js原生/jQuery实现页面滚动字幕效果

17:45:49

　　在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果，以下为简单的实现页面中滚动字幕的效果

1、jQuery实现页面滚动字幕效果

　　代码如下：

<div class="box">
<ul class="list">
<li>这是滚动加载的第1条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第3条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第5条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第7条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第9条数据</li>
</ul>
</div>

<style>
.box{
width: 300px;height: 100px;overflow: hidden;
margin: 50px auto;font: 14px/24px "微软雅黑";color: #666;
}
ul{
width: 260px;margin:10px auto;
}
li{
padding-left: 10px;
}
</style>

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
function gunDong(){
var big = $("ul");
var ob = $("ul li:last");
ob.hide();
ob.prependTo(big);
ob.slideDown("100");
}
var timer = setInterval("gunDong()",1000);
$("div").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval("gunDong()",1000)
})
</script>

2、js原生实现

<body>
<div class="box">
<ul class="list" id="list">
<div id="li_box">
<li>这是滚动加载的第1条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第3条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第5条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第7条数据</li>
<li>你猜猜这是第几条滚动加载的文字</li>
<li>这是滚动加载的第9条数据</li>
</div>
<div id="li_show"></div>
</ul>
</div>
</body>

<style>
.box{
width: 500px;height: 160px;overflow: hidden;
margin: 50px auto;font: 14px/24px "微软雅黑";color: #666;border: 1px solid #ccc;
}
ul{
width: 260px;height: 140px;margin:10px auto;overflow: hidden;
}
li{
padding-left: 10px;
}
</style>

<script type="text/javascript">
var ul_cont = document.getElementById("list");
var li_box = document.getElementById("li_box");
var li_show = document.getElementById("li_show");

li_show.innerHTML = li_box.innerHTML;//将li所在的div里边的内容赋给下边的div

function gunDong(){
if(li_show.offsetHeight - ul_cont.scrollTop <= 0){//如果ul的滚动高度大于列表的高度
ul_cont.scrollTop -= li_box.offsetHeight;//ul的滚动高度减去列表的高度
console.log(ul_cont.scrollTop);
}else{
ul_cont.scrollTop++;//ul的滚动高度递增
}
}
var timer = setInterval(gunDong,100);//定时器，函数每隔100毫秒触发一次事件
ul_cont.onmouseover = function(){
clearInterval(timer);//鼠标滑入事件停止
};
ul_cont.onmouseout = function(){
timer = setInterval(gunDong,100);//鼠标滑出事件开始
}
</script>

js原生 + jQuery实现页面滚动字幕的更多相关文章

  1. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  2. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  3. [转]用 jQuery 实现页面滚动（Scroll）效果的完美方法

    转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...

  4. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  5. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  6. 用JS或jQuery访问页面内的iframe

    用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...

  7. [jquery]判断页面滚动到顶部和底部（适用于手机web加载）

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  8. js开启和关闭页面滚动【亲测有效】

    在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法... 第一步:构建一个函数 function bodyScroll(event){ event.preventD ...

  9. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

随机推荐

  1. 在Linux CentOS 6.5 (Final)上安装git-1.9.0

    CentOS 6.5 (Final)默认安装的git版本为1.7.1.3,而我们希望安装1.9.0版本.由于rpm安装库里没有1.9.0版本,因此我们需要找其它方法来安装. 网上有很多文章介绍了如何从 ...

  2. python定时器爬取豆瓣音乐Top榜歌名

    python定时器爬取豆瓣音乐Top榜歌名 作者:vpoet mail:vpoet_sir@163.com 注:这些小demo都是前段时间为了学python写的,现在贴出来纯粹是为了和大家分享一下 # ...

  3. GDB+GDBServer调试Linux应用程序

    参考:http://blog.csdn.net/shanghaiqianlun/article/details/7820401 一.gdb+gdbserver总体介绍 远程调试环境由宿主机GDB和目标 ...

  4. VF(动态规划)

    VF 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 Vasya is the beginning mathematician. He decided to make a ...

  5. CMD下用csc.exe编译.cs 代码

    用惯了VS来写C#代码,要是用记事本写会不会觉得很好玩,然后再CMD窗口下编译运行,当然写一些简单的Console代码还是可以这么玩玩的,如果你觉得打开VS太麻烦的话. 把后缀名改成.cs,test. ...

  6. 76 bytes for faster jQuery

    转载自http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/ 作者JAMES PADOLSEY 在我们平时使用JQuery,调 ...

  7. a:hover span 隐藏/显示 问题

    :hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单.相册效果等等. 或许用了这么久的伪类:hover,还有部分朋友还不完全了解ho ...

  8. 浅谈JavaScript DOM编程艺术读后感和一点总结

    最近工作不是很忙就想想想JavaScript的内部组成和一些要点,就是从这本书开始的.对新手来说还好,简单易懂. 简单终结下我重书中学到的一些要点. 下面都是个人学习的要点提取: 1.给自己预留退路, ...

  9. Sql中的Exists和in

    最近学习数据库的分页算法,提到第一种 SELECT TOP 页大小 *FROM table1WHERE id NOT IN          (          SELECT TOP 页大小*(页数 ...

  10. 单链表（Single Linked List）

    链表的结点结构  ┌───┬───┐  │data|next│  └───┴───┘ data域--存放结点值的数据域 next域--存放结点的直接后继的地址(位置)的指针域(链域) 实例:从终端输入 ...