基于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 相关文章推荐
利用jquery操作Radio方法小结
Oct 20 Javascript
javascript计时器详解
Feb 28 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
Vue全局事件总线你了解吗
Feb 24 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
php实现邮件发送并带有附件
2014/01/24 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
js最简单的拖拽效果实现代码
2010/09/24 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python将多份excel表格整理成一份表格
2018/01/03 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Pandas之缺失数据的实现
2021/01/06 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
弘扬民族精神演讲稿
2014/05/07 职场文书
药剂专业求职信
2014/06/20 职场文书
物流管理专业自荐信
2014/06/23 职场文书
面试自我评价范文
2014/09/17 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis