悬浮二维码 QQ ToTop

//回顶部

<div id="lqdbe" style="position: absolute; visibility: visible; z-index: 1; display: none;">

<a href=‘#goTop‘>

<img src="/JCZC/images/tzdb.gif" />

</a>

</div>

页面元素:

//悬浮二维码

<!-- 悬浮 二维码

<div class="suspension">

<ul>

<li>

<div id="gototop" class="suspenbox">

<span>返回顶部</span>

</div>

</li>

<li>

<div id="online_advice" class="suspenbox">

<span>在线咨询</span>

<div class="onlineQQ" id="D_qq" runat="server">

</div>

</div>

</li>

<li>

<div id="QRcode" class="suspenbox">

<span>扫二维码</span>

<div class="QRcodebig"><img src="/images/qrcode_app_download_link.jpg" /></div>

</div>

</li>

</ul>

</div>

Css样式 :

/* 新增侧边浮动快捷框样式 sta */

.suspension { position: fixed; right:10px; bottom:90px; z-index: 9999;}

.suspension li { width: 39px; height: 39px; }

.suspenbox {width:38px; height: 38px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #d2d2d2; cursor: pointer;}

.suspenbox span { display:block; width: 24px; height: 26px; background: #f2f2f2; padding:6px 7px; color:#999; display: none; }

#gototop { background:#fff url(../images/back_top.png) no-repeat 0 0; display: none; }

#online_advice {  background:#fff url(../images/back_top.png) no-repeat 0 -38px; position:relative;}

.onlineQQ { width:180px; height:40px; right:39px; bottom:-1px; position: absolute; display: none; }

.qqonlinebox { float: right; width: 38px; height: 38px; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #d2d2d2;  background:#fff url(../images/back_top.png) no-repeat 0 -114px; }

#QRcode {  background:#fff url(../images/back_top.png) no-repeat 0 -76px; position:relative; }

.QRcodebig { width: 124px; height: 124px; position: absolute; bottom:-1px; right: 39px; border:1px solid #d2d2d2; display: none; }

.QRcodebig img  { width: 100%; height: 100%; }

/* 新增侧边浮动快捷框样式 end */

JS 文件:

$(function () {

/*悬浮快捷框*/

$(".suspenbox").hover(function () {

$(this).children("span").css(‘display‘, ‘block‘);

}, function () {

$(this).children("span").css(‘display‘, ‘none‘);

});

$("#online_advice").hover(function () {

$(this).children(‘.onlineQQ‘).slideDown(200);

}, function () {

$(this).children(‘.onlineQQ‘).slideUp(200);

});

$("#QRcode").hover(function () {

$(this).children(‘.QRcodebig‘).show(200);

}, function () {

$(this).children(‘.QRcodebig‘).hide(200);

});

$(window).on(‘scroll‘, function () {

var st = $(document).scrollTop();

if (st > 200) {

$(‘#gototop‘).fadeIn(200);

} else {

$(‘#gototop‘).fadeOut(200);

}

});

$(‘#gototop‘).bind(‘click‘, function () {

$(‘html,body‘).animate({ ‘scrollTop‘: 0 }, 500);

});

});

时间: 2024-11-09 15:13:53

悬浮二维码 QQ ToTop的相关文章

微信QQ的二维码登录原理浅析

在很多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用开始多起来,这里先说下啥是二维码,其实二维码就是存了二进制数据的黑白图片,当出现要求二维码登录的时候,服务器会生成一条临时的唯一的二维码信息,发送到客户端以二维码(图片)的形式写入到网页,然后你就会看到统一的四个方形的二维码,如果做的好这个二维码信息应该是有时效的,这里暂且不考虑这些,就简单的微信登录作为例子看看吧: 首先说下整个授权流程: 在客户端网页中会不断向服

android炫酷动画源码,QQ菜单、瀑布流、二维码源码

Android精选源码 自定义弹框封装,ProgressDialog,StatusDialog和Toast,支持自定义颜色 有深度感的fragment代码 在屏幕顶部或者底部显示提示 短信转发工具,自动转发短信到手机或邮箱 美观的菜单隐藏在主界面底部的抽屉导航. 仿QQ菜单.瀑布流.数据库.二维码生成 andorid实现"划词翻译"功能的项目 android界面切换的效果,输入文字时背景图缩放效果 android一款很炫的动画代码 Android雷达扫描图,超高仿QQ附近的人 Andr

微信+支付宝+QQ钱包 二维码支付整合 源码20171107

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1&quo

第一讲 从头开始做一个web qq 机器人,第一步获取smart qq二维码

新手教程: 前言:最近在看了一下很久很久以前做的qq机器人失效了,最近也在换工作目前还在职,时间很挺宽裕的.就决定从新搞一个web qq机器人 PC的协议解析出来有点费时间以后再做. 准备工作: 编译工具:vs2017 编程语言:C# 或者.net 开始建一个SDK  新建文件 -项目 -选择类库-(WEBQQSDK)-添加一个类 smartqq 第一步,登录了一下Smart QQ,以这个HTTP协议,做机器人交互吧,TX把这个版本的很多功能去掉了,基本的群聊,私聊 收发信息之类还在.(用谷歌浏

微信小程序获取二维码(直接上代码)https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

应为是直接返回二进制数据所有与其他接口些许差别,希望能帮助现在的你! 谢谢!!!    /** * 37.微信二维码生成 */ public String getWeiXinCourseMap() { String courseId = StringUtils.defaultString(getPara("courseId")); String codeUrl = ""; String path = "你的二维码指向路径(可以拼接参数)"; tr

【技术】悬浮微信二维码微博分享置顶

滚动条滚动到50后: html部分: <li style="display:none;height:50px;" id="li-top"><a id="top" href="#top"></a></li> js部分: $(document).ready(function(){ $(window).scroll(function() { if ($(window).scrollTo

PHP微信扫描二维码登录网站代码示例

扫描二维码登录对于现在的web应用来说,确实是个很炫酷的功能,安全性也可以保障,不少朋友可能觉得这是个很复杂的工作,其实不然,真正说来只有几个步骤而已. 原理 PC浏览器展示一张二维码图片,该图片二维码值为一段绝对地址的url,大致如下:http://www.example.com/oauth/qrcode?key=key PC浏览器定期轮询 http://www.example.com/oauth/query,可能有的同学会问,怎么不用带上key?这里我们用session来保存key,所以链接

微信公众平台生成带参数二维码

<?php // +---------------------------------------------------------------------- // | 获取微信公众带参数二维码 // | Author: wzb [email protected] // +---------------------------------------------------------------------- namespace Mob\Controller; use Think\Contr

使用libqrencode库制作二维码电子名片--IOS版

1.效果图: 点击生成按钮,显示二维码: 使用微信扫一扫后,获得如下界面: 2.libqrencode库: libqrencode是一个日本人(Kentaro Fukuchi)写的生成二维码的跨平台c语言库.官网是这里,Github在这里.本人最喜欢的就是这种[用c写成的.跨平台的.功能单一的.使用方便的]库!IOS中Objc使用C/C++库超方便,android下,稍微麻烦一点. 3.Objc对libqrencode包装: 网上找的QRCodeGenerator类,由Andrew Kopane