基于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格式化时间和js格式化时间戳示例
Feb 10 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
详解express使用vue-router的history踩坑
2019/06/05 Javascript
Python切片操作实例分析
2018/03/16 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python mysql断开重连的实现方法
2019/07/26 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Python模块常用四种安装方式
2020/10/20 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
工商管理专业自荐信
2014/06/03 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS