基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动


Posted in Javascript onFebruary 08, 2017

1、准备一张二维码图片,大小、图片自己定义我这里用的宽度和高度都是253,名称weixin.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>二维码图片固定在右下角某处并跟随滚动条滚动</title> 
</head> 
<body> 
<div style="width:1000px; height:1000px;">二维码图片固定在右下角某处并跟随滚动条滚动</div> 
<script language="javascript"> 
function wx_scroll(){  
 var topH=-80; 
 var leftW=10; 
 var sHeight,sWidth,cHeight; 
 //alert(document.documentElement.clientWidth); 
 (document.body.scrollLeft==0)?sWidth=document.documentElement.scrollLeft + document.documentElement.clientWidth - 260 :sWidth=document.body.scrollLeft+ document.documentElement.clientWidth - 260 ; 
 (document.body.scrollTop==0)?sHeight=document.documentElement.scrollTop+ document.documentElement.clientHeight - 260 :sHeight=document.body.scrollTop+ document.documentElement.clientHeight - 260; 
 document.getElementById("bar_float").style.left=eval(sWidth+leftW) +"px"; 
 document.getElementById("bar_float").style.top=eval(sHeight+topH) +"px"; 
} 
setInterval("wx_scroll()",100); 
</script> 
<div id="bar_float" style="position: absolute; display:block; z-index: 10000; left: 1216px; top: -80px;"> 
<div id="stayTopleft"> 
 <table cellspacing="0" cellpadding="0" border="0"> 
 <tbody> 
 <tr> 
  <td colspan="2" valign="top"><img src="weixin.jpg" width="253" height="253" border="0"></td> 
  </tr> 
  <tr> 
 </table></div> 
</div> 
</body> 
</html>

以上所述是小编给大家介绍的基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
单元选择合并变色示例代码
May 26 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
node.js入门学习之url模块
Feb 25 Javascript
JS动画定时器知识总结
Mar 23 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 #Javascript
webpack入门+react环境配置
Feb 08 #Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 #Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 #Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 #Javascript
深入理解js中的加载事件
Feb 08 #Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
3种php生成唯一id的方法
2015/11/23 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
详解python tkinter 图片插入问题
2020/09/03 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
平面设计岗位职责
2013/12/14 职场文书
维稳工作情况汇报
2014/10/27 职场文书
经营场所使用证明
2015/06/19 职场文书
企业年会祝酒词
2015/08/11 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python