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. Light OJ 1067 Combinations (乘法逆元）

    Description Given n different objects, you want to take k of them. How many ways to can do it? For e ...

  2. openstack configure

    <一,nova.conf配置文件配置 hypervisors compute_driver = 值> 1,kvm/qemu Hypervisor OpenStack nova comput ...

  3. 《如何让TT T4模板输出多个文件（VS2010中）》-- access911.net 文章

    <如何让TT T4模板输出多个文件(VS2010中)>-- access911.net 文章   问题:   VS2010中自带的 TT 模板功能挺好用,但是如何定义其输出的目录,或者如何 ...

  4. Oleg Sych - » Pros and Cons of T4 in Visual Studio 2008

    Oleg Sych - » Pros and Cons of T4 in Visual Studio 2008 Pros and Cons of T4 in Visual Studio 2008 Po ...

  5. POJ 3997 Stock Chase

    Stock Chase Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 455   Accepted: 131 Descrip ...

  6. hibernate多对一的操作解析

    在hibernate的关联操作中有很多关系,其中多对一关系是最常见的.我们看这两个表. 这里有部门表和员工表. 那么我们可以这么说一个部门可以有多个员工.这就是1对多的关系.这是我们站在部门表的角度上 ...

  7. Nginx日志文件配置与切割

    Nginx日志的指令主要有两条: log_format,设置日志的格式 access_log,指定日志文件的存放路径.格式和缓存大小 两条指令在Nginx配置文件中的位置可以在http{……..}之间 ...

  8. 基于redis AE异步网络架构

    最近的研究已redis源代码,redis高效率是令人钦佩. 在我们的linux那个机器,cpu型号, Intel(R) Pentium(R) CPU G630 @ 2.70GHz  Intel(R) ...

  9. 【进制问题】【HDU2056】A + B Again

    A + B Again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  10. live555从RTSP服务器读取数据到使用接收到的数据流程分析

    本文在linux环境下编译live555工程,并用cgdb调试工具对live555工程中的testProgs目录下的openRTSP的执行过程进行了跟踪分析,直到将从socket端读取视频数据并保存为 ...