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. 诺基亚HERE地图

    1.基本图层 2.3D图层 3.卫星图层 4.地形图层 5.在线帮助

  2. 如何把apache和nginx 加入到系统服务,用service 命令来控制启动、停止

    1 把apache 加入到系统服务,即用service 命令来控制Apache 启动.停止  如果Linux服务器上默认安装了httpd的话(用rpm -qa|grep httpd查看),那你就可以用 ...

  3. 怎么用MindMapper分类功能整理导图

    我们在绘制导图时是按着我们大脑中的思维来的,虽然有着总体逻辑,但是在细节上面还是不可避免的有些小杂乱,我们则可以通过MindMapper分类功能来对导图进行整理. 我们在打开MindMapper思维导 ...

  4. cocos2d-x绑定ccb文件

    首先,ccb文件是如何生成的,我就不多说了,大家可以搜下cocosbuilder,就能找的相关的教程,而通过cocosbuilder,我们可以省去了很多设计的麻烦,比如设计一个精灵的位置啥的,而通过c ...

  5. mysql 分库分表的方法

    分表后怎么做全文搜索 1.merge方式分表(不好) 2. 使用 sql union 3 使用Sphinx全文检索引擎 一,先说一下为什么要分表 当一张的数据达到几百万时,你查询一次所花的时间会变多, ...

  6. [AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)（转）

    用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄 ...

  7. HDU 5740 - Glorious Brilliance

    题意: 给出已0 1染色的无向图(不一定联通),一次操作为一对相邻点颜色互换. 问使任意相邻点颜色不同,最少需要多少次操作 分析: 交换两点的代价即为两点间最短路. 故用BFS找出所有点到任意点的最短 ...

  8. VS2013 编译错误 error: MSB8031

    VS2010 创建的 MFC 程序,用 VS2013 打开后编译出现错误: C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Microso ...

  9. 198. House Robber,213. House Robber II

    198. House Robber Total Accepted: 45873 Total Submissions: 142855 Difficulty: Easy You are a profess ...

  10. 字符和字符串处理-ANSI字符和Unicode字符

    我们知道,C语言用char数据类型表示一个8位的ANSI字符,默认在代码中声明一个字符串时,C编译器会把字符串中的字符转换成由8位char数据类型构成的一个数组: // An 8-bit charac ...