js右侧悬浮框
示例:屏幕右侧悬浮框
原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";
知识点:
浏览器窗体的高度
document.documentElement.clientHeight
浏览器滚动的高度
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
html部分
<body style=" height:1600px;">
<div id="div1"></div>
</body> #div1 { position:absolute; right:; bottom:; width:100px; height:150px; background:green;}
js部分
<script> window.onscroll = function(){
var oDiv = document.getElementById("div1");
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";
oDiv.style.top = startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
} var timer = null;
function startMove(iTarget){
clearInterval(timer); timer = setInterval(function(){
var oDiv = document.getElementById("div1");
var speed = (iTarget - oDiv.offsetTop)/4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(oDiv.offsetTop == iTarget){
clearInterval(timer);
} else {
oDiv.style.top = oDiv.offsetTop + speed + "px";
} },30); } </script>
同上面这个悬浮框,可心改成另一个示例:对联悬浮框
示例:对联悬浮框
原理:
iTarget = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;
潜在问题:
对联一直在不停的抖动
检测分析:
1,打印出这个div 的offsetTop,发现它的值始终在两个相关1像素的值之间跳动
2,再打印iTarget发现它是800.5
原因:iTarget不是一个整数,造成“对联”不停的抖动
解决:
iTarget = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);
js右侧悬浮框的更多相关文章
- JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
- [Javascript]右侧悬浮框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现悬浮框滑动动画
最近在做个人博客想做个相册,鼠标悬浮后出现个div并且鼠标移动到哪个相册,div跟随到哪个相片上. <!DOCTYPE html> <html lang="en" ...
- js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...
- 菜鸟学JS(三)——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- (41)JS运动之右側中间悬浮框(对联悬浮框)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
- HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- ajaxterm不好还是gateone好
http://pkgs.org/centos-5-rhel-5/epel-i386/Ajaxterm-0.10-8.el5.noarch.rpm.html Web SSH 客户端Ajaxterm安装 ...
- Python 实现的下载op海贼王网的图片(网络爬虫)
没得事就爬一下我喜欢的海贼王上的图片 须要在d盘下建立一个imgcache目录 # -*- coding: utf-8 -*- import urllib import urllib2 import ...
- poj2226(最小点覆盖)
传送门:Muddy Fields 题意:一个由r行c列方格组成的田地,里面有若干个方格充满泥泞,其余方格都是草.要用长度不限,宽度为1的长木板来覆盖这些泥方格,但不能覆盖草地.最少要用多少个长木板. ...
- Session为空的一种原因
在维护一份比较老的代码,想改为ajax调用,然后就添加了一个一般处理程序文件,也就是以.ashx结尾的文件,一切都正常,但发现session一直为空,很奇怪 基本的代码如下: public class ...
- hdu1535(最短路)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1535 题意:给你一个源点,让你从这里派发n个学生去其余的n-1个站点去邀请人们去CSS,然后再返回CS ...
- 2014年辛星解读Javascript之用DOM动态操纵HTML元�
关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...
- 开放源代码的微微信.NET 0.8 版公布了
微微信.NET 0.8 版公布了 A.源代码应用范围: 未认证的和经过认证的微信订阅号.微信服务号均可使用,本源代码的每个模块都提供全然的 ASP.NET C#源代码,绝对不含 ...
- 2012 PHP热门资料64个+经典源码50个——下载目录 :
完整附件0豆下载:http://down.51cto.com/data/419216 附件部分预览: PHP精彩应用实例程序源码集锦 http://down.51cto.com/zt/39 无师自通: ...
- My Solution: Word Ladder
public class Solution { public int ladderLength(String start, String end, Set<String> dict) { ...
- 业务系统需要什么样的ID生成器
业务系统需要什么样的ID生成器 ID 生成器在微博我们一直叫发号器,微博就是用这样的号来存储,而我微博里讨论的时候也都是以发号器为标签.它的主要目的确如平常大家理解的“为一个分布式系统的数据objec ...