基于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 ui css framework
Jun 28 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 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
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
10个简化PHP开发的工具
2014/12/25 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
深入php内核之php in array
2015/11/10 PHP
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python操作MySQL数据库的方法
2018/06/20 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
授权委托书
2015/01/28 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS