js代码跟html如上,单独放在一个页面运行测试就可以,可当放到实际项目中只滚动2次就停了。原因
2014-04-23 12:31
525 查看
JS上下滚动代码问题:
<div id="colee"style="overflow:hidden;height:100px;width:200px;">
<div id="colee1">
我是滚动内容1
我是滚动内容2
我是滚动内容3
我是滚动内容4
我是滚动内容5
我是滚动内容6
我是滚动内容7
我是滚动内容8
我是滚动内容9
</div>
<divid="colee2"></div>
</div>
<scripttype="text/javascript">
var speed = 50;
var colee2 = document.getElementById("colee2");
var colee1 = document.getElementById("colee1");
var colee = document.getElementById("colee");
colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
function Marquee1() {
//当滚动至colee1与colee2交界时
if (colee2.offsetTop <= colee.scrollTop) {
colee.scrollTop -=colee1.offsetHeight; //colee跳到最顶端
} else {
colee.scrollTop++;
}
}
var MyMar1 =setInterval(Marquee1, speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover = function() { clearInterval(MyMar1) }
//鼠标移开时重设定时器
colee.onmouseout = function() { MyMar1 = setInterval(Marquee1, speed) }
</script>
js代码跟html如上,单独放在一个页面运行测试就可以,可当放到实际项目中只滚动2次就停了。我百思不得其解。
单独提出来就没问题,但是一放到页面里面就有问题了,原因是什么:
解决了,查资料得知跟offsetTop有关系:
1、当元素的父容器没有指定定位方式时,指元素与body元素之间的偏移距离;
2、当对父容器指定定位方式(如:position:relative;)时,则指元素与父容器之间的偏移距离;
所以,当没有指定定位方式时,代码中的colee2.offsetTop值已经是元素colee2与body元素之间的偏移距离了。当这部分代码置入页面上方top:0处时,自然没有问题。但是,如果插入到页面下方时,colee2.offsetTop值就已经不再是top:0了,自然就出现位移偏差了,以致滚动执行不正确!
所以只需在colee的css样式中加入"position:absolute"即可。
即:
<divid="colee"style="overflow:hidden;height:100px;width:200px;position:absolute;">
CSDN论坛
<div id="colee"style="overflow:hidden;height:100px;width:200px;">
<div id="colee1">
我是滚动内容1
我是滚动内容2
我是滚动内容3
我是滚动内容4
我是滚动内容5
我是滚动内容6
我是滚动内容7
我是滚动内容8
我是滚动内容9
</div>
<divid="colee2"></div>
</div>
<scripttype="text/javascript">
var speed = 50;
var colee2 = document.getElementById("colee2");
var colee1 = document.getElementById("colee1");
var colee = document.getElementById("colee");
colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
function Marquee1() {
//当滚动至colee1与colee2交界时
if (colee2.offsetTop <= colee.scrollTop) {
colee.scrollTop -=colee1.offsetHeight; //colee跳到最顶端
} else {
colee.scrollTop++;
}
}
var MyMar1 =setInterval(Marquee1, speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover = function() { clearInterval(MyMar1) }
//鼠标移开时重设定时器
colee.onmouseout = function() { MyMar1 = setInterval(Marquee1, speed) }
</script>
js代码跟html如上,单独放在一个页面运行测试就可以,可当放到实际项目中只滚动2次就停了。我百思不得其解。
单独提出来就没问题,但是一放到页面里面就有问题了,原因是什么:
解决了,查资料得知跟offsetTop有关系:
1、当元素的父容器没有指定定位方式时,指元素与body元素之间的偏移距离;
2、当对父容器指定定位方式(如:position:relative;)时,则指元素与父容器之间的偏移距离;
所以,当没有指定定位方式时,代码中的colee2.offsetTop值已经是元素colee2与body元素之间的偏移距离了。当这部分代码置入页面上方top:0处时,自然没有问题。但是,如果插入到页面下方时,colee2.offsetTop值就已经不再是top:0了,自然就出现位移偏差了,以致滚动执行不正确!
所以只需在colee的css样式中加入"position:absolute"即可。
即:
<divid="colee"style="overflow:hidden;height:100px;width:200px;position:absolute;">
CSDN论坛
相关文章推荐
- SSH项目开发中,将jsp页面放在WEB-INF的原因解析
- 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构、性能的要求都很简单,随着互联网业务的不断丰富,网站
- AIDL的Proxy-Stub理解:(以实际媒体播放器服务单独运行在一个进程中为例)
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
- 看到的帮个忙,把css代码单独放在一个文件夹页面引用
- 如何导出Java项目成为一个可以直接双击运行的jar文件的问题
- 查询软件和硬件列表清单[将文章里代码另存为 list.vbs,双击运行就会出现一个html页面]
- 一个B.js获取另一个A.js的方法,只要将在html页面中的载入顺序将A.js放在B.js前即可
- Javascript 用本页面文本域中的HTML代码打开一个空白窗口来运行
- 发现一个可以在线运行JS代码的网站
- 安卓HTML中打开一个连接!点击跳转了,可以实现返回上一级的HTML的页面!
- 网上找到一个可以用来测试网站安全性能的测试ASP页面
- 三种简单的html网页自动跳转方法,可以让你在打开一个html网页时自动跳转到其它的页面
- vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用
- Qt官方开发环境生成的exe发布方式--使用windeployqt(windeployqt是单独的程序,放在低版本qt4目录下也可以运行的)
- myEclipse可以main运行,不能debug,不能用Junit测试--解决方案及原因
- 在多模块开发的时候,利用项目继承可以将结构信息、部署信息,将共同的依赖放在一个父类中。
- 写一个多线程程序在捕捉信号后放在后台运行(附多线程加锁的原因见解)
- 单元测试(对项目中某一个独立业务模块进行单独的测试)
- 有些JS为什么不可以单独放在一个js文件里面