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. Jquery EasyUI修改行背景的两种方式

    1.数据加载完成不请求后台的做法 方式一: //更改表格行背景 function changeLineStyle(index){ var rows=$("#alertGird"). ...

  2. Trapping Raining Water 解答

    Question Given n non-negative integers representing an elevation map where the width of each bar is ...

  3. Impala 3、Impala、Hbase整合

    Impala可以通过Hive外部表方式和HBase进行整合,步骤如下: • 步骤1:创建hbase 表,向表中添加数据 create 'test_info', 'info' put 'test_inf ...

  4. telnet如何操作Memcached缓存系统？

    4.(1)telnet操作Memcached 许多语言都实现了连接memcached的客户端,其中以Perl.PHP为主.仅仅memcached网站上列出的语言就有:• Perl • PHP • Py ...

  5. Longest Palindromic Substring-----最长回文子串

    首先讲讲什么是回文, 看看Wiki是怎么说的:回文,亦称回环,是正读反读都能读通的句子.亦有将文字排列成圆圈者,是一种修辞方式和文字游戏.回环运用得当.能够表现两种事物或现象相互依靠或排斥的关系, 比 ...

  6. Reflux 使用教程

    Reflux是根据React的flux创建的单向数据流类库.Reflux的单向数据流模式主要由actions和stores组成.例如,当组件list新增item时,会调用actions的某个方法(如a ...

  7. 本地无sqlserver服务下操作数据库 之GSQL

    作为程序员无论是我们写的各种MIS系统还是游戏都离不开数据的存取操作,正如我们前几天在VS下做的一MIS系统,现在纠结. 如果是C/S或B/S模型就好了,可是需求不是,没办法,顾客是上帝...他们的需 ...

  8. javascript模式——Flyweight

    Flyweight是一种共享数据内存的模式. Flyweight模式是将一些公有属性从个人中剔除,放在共享的对象当中. 下面以一个项目实例,通过不断的改进,以显示Flyweight模式的优点. 现在我 ...

  9. 写一个Windows上的守护进程（2）单例

    写一个Windows上的守护进程(2)单例 上一篇的日志类的实现里有个这: class Singleton<CLoggerImpl> 看名字便知其意--单例.这是一个单例模板类. 一个进程 ...

  10. jeasyui制作计划-ajax学习

    Ajax:可以无刷新状态更新页面,并且实现异步提交,提升了用户的体验. 1.load()函数的使用,可以三个参数:url(必须的参数,请求html文件的url地址,参数类型string).date(可 ...