基于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 Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
js实现网页收藏功能
2015/12/17 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
三个python爬虫项目实例代码
2019/12/28 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
总经理秘书的岗位职责
2013/12/27 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
五一手机促销方案
2014/03/08 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
学术会议邀请函
2015/01/30 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
2015年采购工作总结
2015/04/10 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
教师节领导致辞
2015/07/29 职场文书
详解MySQL的半同步
2021/04/22 MySQL
详解php中流行的rpc框架
2021/05/29 PHP
Redis入门教程详解
2021/08/30 Redis
vue 自定义组件添加原生事件
2022/04/21 Vue.js