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. 关闭ubuntu apport

    apport就是ubuntu上的"crash report"服务,就是当有程序崩溃时弹出的那个发送error report的程序: 个人觉得此功能无用,本着给我的老本子节省资源的思 ...

  2. 修改MySQL 5.5的max_allowed_packet属性的方法

    今天在部署一个实验系统的时候,报出下面这个错: Your 'max_allowed_packet' variable is set to less than 16777216 Byte (16MB). ...

  3. hdu 3478 Catch（染色 dfs 或 bfs ）

    Problem Description A thief is running away! We can consider the city to N–. The tricky thief starts ...

  4. Struts2(四)——页面相关内容

    上篇博客总结了数据流转各个方面的内容,这篇重点说一下框架对于界面上知识. 一,说到页面,记得在总体介绍中,说到Struts2比Struts1的一方面优势就是它支持更多的视图技术(Freemarker, ...

  5. Android学习总结——SharedPreferences

    SharePreferences存储方式,只是轻量级数据存储,xml格式的数据显示方式.简单存储步骤如下:一:获取SharePreferences对象1.SharedPreferences pref ...

  6. Ffmpeg和SDL创建线程（转）

    Spawning Threads Overview Last time we added audio support by taking advantage of SDL's audio functi ...

  7. oninput,onpropertychange,onchange的使用方法和差别

    1.前言 因为工作须要,需实现一个相似于微博输入框的功能,在用户动态输入文字的时候,改动提示“您还能够输入XX字”.例如以下图所看到的: 因此,略微研究了一下oninput,onpropertycha ...

  8. Godaddy主机从购买到开通的详细图文教程（2013年）

    http://bbs.zhujiusa.com/thread-10-1-1.html Godaddy主机从购买到开通的详细图文教程(2013年最新) Godaddy是全球域名注册商中的NO.1,同时也 ...

  9. js判断是否为ie的方法

    原文:http://blog.sina.com.cn/s/blog_7bbe4a850100v95z.html 下面第三种亲测可用 第一种: if(window.addEventListener){ ...

  10. Android使用NumberPicker控件实现选择城市，生日

    本人菜鸟一枚,第一次写技术博客,有点小紧张,加上代码很乱,求不喷. 先放效果图: 界面就这么简单. 然后放上代码: package com.example.dialog; import java.ut ...