基于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系列之数值计算
Jun 07 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
vue跨域解决方法
2017/10/15 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
小学生表扬稿范文
2015/05/05 职场文书
跑出一片天观后感
2015/06/08 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL