基于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之自动完成组件的深入解析
Jun 19 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
微信小程序页面渲染实现方法
Nov 06 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
图象函数中的中文显示
2006/10/09 PHP
php解决约瑟夫环示例
2014/04/09 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
深入研究React中setState源码
2017/11/17 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
浅谈Python的文件类型
2016/05/30 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python实现朴素贝叶斯算法
2018/11/19 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
师德建设实施方案
2014/03/21 职场文书
机械专业求职信
2014/05/25 职场文书
银行求职自荐书
2014/06/25 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript