基于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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
php二分查找二种实现示例
2014/03/12 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
初识ThinkPHP控制器
2016/04/07 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python实现内存监控系统
2021/03/07 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
django rest framework使用django-filter用法
2020/07/15 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
项目合作意向书范本
2014/04/01 职场文书
英语专业自荐书
2014/06/13 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
2014年预算员工作总结
2014/12/05 职场文书
云台山导游词
2015/02/03 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript