DIV向上滚动（类似新闻）

<div id="div1" style="overflow:hidden;height:60px;width:120px;background:#e6e6e6"> <div id="div2">  <a href="index.php">第一行内容</a><br /> <a href="index.php">第二行内容</a><br /> <a href="index.php">第三行内容</a><br /> <a href="index.php">第四行内容</a><br /> <a href="index.php">第五行内容</a><br /> <a href="index.php">第六行内容</a><br /> <a href="index.php">第七行内容</a><br /> <a href="index.php">第八行内容</a></div> <div id="div3"></div>
</div><script language="JavaScript">
function $(str){return document.getElementById(str);
}
$("div3").innerHTML = $("div2").innerHTML;
function marQuee(){ if($("div3").offsetTop - $("div1").scrollTop <= 0){$("div1").scrollTop -= $("div2").offsetHeight;} else{ $("div1").scrollTop ++;}
}
var quee = setInterval(marQuee, 50);
$("div1").onmouseover = function(){clearInterval(quee);
}
$("div1").onmouseout = function(){quee = setInterval(marQuee, 50);
}
</script>

效果图如下：

第一行内容
第二行内容
第三行内容
第四行内容
第五行内容
第六行内容
第七行内容
第八行内容

转载于:https://www.cnblogs.com/chirifengye/archive/2012/12/21/2828333.html

DIV向上滚动（类似新闻）相关推荐

HTML中 scrollTop++ 不能够实现div向上滚动的原因
假设有三个层,id分别是:demo,demo1,demo2,包含关系如下:即,demo 包含demo1和demo2; HTML代码: <div id="demo" style ...
逐行向上滚动类似中奖名单的小例子
alertPopShow.js 文件 /** mobile web toast.alert.confirm提示框* 2016.05.25 ghb * toast使用方式:* webToast(&quo ...
中奖人员信息向上滚动
最近公司搞一个抽奖转盘,然后下面有个中奖人列表信息,向上滚动的效果,在网上找了好了好多demo,不过他们大部分都有些小问题,因为我的数据第动态添加进来的,所以会导致重复叠加div向上滚动,这样太耗性能 ...
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
vue项目新闻消息向上滚动案例
vue项目新闻消息向上滚动案例效果如下图所示: 代码组件如下: <template><div class="message-page"><div c ...
html 向上滚动不间断,向上不间断滚动div+css+js模板
div+css不间断向上滚动模板上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码),这次给大家介绍的是比较实用比较简单的不间断css滚动代码 DIV+CSS不间断滚 ...
向上滚动tabBar隐藏向下显示
原理: 监听滚动事件并获取页面当前的滚动高度,比较滚动前后的高度,判断是向上滚动还是向下滚动.并对tabBar样式进行更改. <html> <style>html body { ...
jQuery实现文字向上滚动
在一些网页中,我们会看到有一行或多行文字向上滚动,就像轮播一样.那我们如何实现它呢,现在就开始吧! 单行文字 html代码 <div id="scrollDiv"> & ...
jQuery无缝向上滚动效果
该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果,废话不多说,直接上代码 (1)向上滚动 HTML: <div id="demo" style=" ...
Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...

DIV向上滚动（类似新闻）

DIV向上滚动（类似新闻）相关推荐

最新文章

热门文章