javascript滑动停顿效果

最新推荐文章于 2024-01-30 17:45:00 发布

luoage_

最新推荐文章于 2024-01-30 17:45:00 发布

阅读量555

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/j864458340/article/details/78435160

版权

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

突然发现好久没来了,这些天忙着工作,悲催 !!

一个小的JS滑顿效果,虽然功能很小,在刚看到这个功能的时候我还是费了一上午,汗呐...!! javascript滑动停顿效果

下面开始附代码:

<html>
<head>
<title>滑顿效果</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="cuxiao_huodong">
<div class="img_3"></div>
<dl class="cuxiao_huodong_wz" id="cxhd_0" style="height:18px;overflow:hidden;">
<dd><a target="_blank" href="http://jc/goods-3916.html">国宝熊猫币画双绝12</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币1</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币2</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币3</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币4</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币5</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币6</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币7</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币8</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币9</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币10</a></dd>
<dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币11</a></dd>
<dd><a target="_blank" href="http://jc/goods-13870.html">辛亥革命百年暨孙中山先生诞辰145周年大铜章13</a></dd>
<dd><a target="_blank" href="http://jc/goods-4166.html">盛世中华中国印青玉版14</a></dd>
<dd><a target="_blank" href="http://jc/goods-11160.html">Y6259缅甸生肖挂件淡雅A货翡翠生肖吊坠鸡证书正品15</a></dd>
</dl>
<div class="img_0"></div>
</div>
<script type="text/javascript">
var previous = 0;
var link = null;
var t = 100;//循环间隔时间
var waitTime = 2000;//间隔时间2s
var isScroll = true;
var t1 = 0;
function n(){
if(! isScroll) return;
var d = document.getElementByIdx_x('cxhd_0');
if(d.scrollTop==0){//18一个A框的高度
t1 += t;
if(t1 != waitTime) return; else t1=0;
}
previous = d.scrollTop;
d.scrollTop+=18;
if(d.scrollTop == previous) d.scrollTop = 0;
}
setInterval('n()',t);
</script>
</body>
</html>

这里我把#cuxiao_huodong_wz的height设置成18了,然后每次增加18个,18个停顿一次,就造成了,文字无法漫步向上走动的效果,但是避免了,文章结束时的突然出现,小bug.

总归这段JS比在网上找到的要精简的多,很实用,我们网站首页加载加上图片就要1M左右,再加一个几十K的滑动代码,就惨了.所以不得不修改啊.正在写autocomplete.祝我成功 !!

luoage_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript滑动停顿效果

突然发现好久没来了,这些天忙着工作,悲催 !!一个小的JS滑顿效果,虽然功能很小,在刚看到这个功能的时候我还是费了一上午,汗呐...!!下面开始附代码: 滑顿效果 <script src="jquery.js"type="text/javascript"> <divclass
复制链接

扫一扫

专栏目录