基于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 28 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
小程序如何获取多个formId实现详解
Sep 20 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
Element Popover 弹出框的使用示例
Jul 26 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的图形函数中显示汉字
2006/10/09 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jquery处理json对象
2014/11/03 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
超简单的Python HTTP服务
2019/07/22 Python
python银行系统实现源码
2019/10/25 Python
pycharm显示远程图片的实现
2019/11/04 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Python3开发环境搭建详细教程
2020/06/18 Python
零基础学python应该从哪里入手
2020/08/11 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
致垒球运动员加油稿
2014/02/16 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技