基于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 相关文章推荐
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
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
isset和empty的区别
2007/01/15 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
javascript中的this详解
2014/12/08 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
松材线虫病防治方案
2014/06/15 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android