基于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之浮动窗口实现代码(两种方法)
Sep 08 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
js格式化时间小结
2014/11/03 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python 实现的车牌识别项目
2021/01/25 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
幸福终点站观后感
2015/06/04 职场文书
校运会班级霸气口号
2015/12/24 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS