`
lxj8749
  • 浏览: 66575 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js循环滚动新闻,最简洁版

 
阅读更多
<script type="text/javascript">    
//滚动信息
window.onload=function(){marquee('roll_box','roll_content','roll_temp','40'); }
function marquee(id,id1,id2,speed){	
	var obj=document.getElementById(id);
	var obj1=document.getElementById(id1);
	var obj2=document.getElementById(id2);
	obj2.innerHTML=obj1.innerHTML;
	function scrolly(){if(obj.scrollTop>=obj1.offsetHeight){obj.scrollTop=0;}else{obj.scrollTop++;}}
	var rollTime=setInterval(scrolly,speed);
	obj.onmouseover=function(){clearInterval(rollTime);}
	obj.onmouseout=function(){rollTime=setInterval(scrolly,speed);}
} 
</script>


<div id="roll_box" style="height:200px;overflow:hidden;"><div id="roll_content">
	
	<!--滚动内容start-->
	<li><a href="/index.php/news/show/id/10782" target="_blank">福格森®孕妇维D3钙片成功获得国食健...</a><span></span></li>
	<li><a href="/index.php/news/show/id/10781" target="_blank">我公司喜获湖北省著名商标</a><span></span></li>
	<li><a href="/index.php/news/show/id/10780" target="_blank">喜讯:我公司已被评为“2010年度湖...</a><span></span></li>
	<li><a href="/index.php/news/show/id/10779" target="_blank">我公司参加华人华创创业发展洽谈会展会...</a></li>
	<li><a href="/index.php/news/show/id/10775" target="_blank">出生缺陷诊断防治进展高级培训班在郑州...</a></li>
	<li><a href="/index.php/news/show/id/10774" target="_blank">敬告各位朋友:福格森免费400882...</a></li>
	<li><a href="/index.php/news/show/id/10743" target="_blank">“福格森”爱心奉献滕州市病残儿家庭</a></li>
	<li><a href="/index.php/news/show/id/10742" target="_blank">福格森热烈祝贺湖北省计划生育服务交流...</a></li>
	<li><a href="/index.php/news/show/id/10740" target="_blank">预防出生缺陷 全社会的责任-----...</a></li>
	<li><a href="/index.php/news/show/id/10737" target="_blank">济南日报:历城筑牢三道防线拦截出生缺...</a></li>  
	<!--滚动内容end-->                      
	
</div><div id="roll_temp"></div>
</div>

 

分享到:
评论
1 楼 搅屎棍 2012-12-26  
测试了一下,问题还是不小的啊,如果失去浏览器窗口失去焦点,甚至是单击了浏览器的状态栏,都会导致滚动失效。。。

相关推荐

    DIV向上滚动新闻,简洁JavaScript示例,高浏览器兼容性

    标题中的“DIV向上滚动新闻,简洁JavaScript示例,高浏览器兼容性”指的是一种使用JavaScript技术来实现网页中DIV元素的向上滚动效果,通常用于显示新闻或者更新信息,以动态吸引用户的注意力。这个示例强调了代码的...

    无缝循环滚动插件

    - `js`:JavaScript代码通常放在这里,可能包含jQuery库以及无缝循环滚动插件的源代码。 - `css`:CSS样式表,用于定义元素的外观和布局,以及滚动动画的样式。 通过分析这些文件,我们可以了解插件的工作原理,并...

    垂直滚动新闻效果jquery插件.rar

    通过循环遍历新闻项并改变它们的位置,可以实现自动滚动。 5. **事件处理**:为了增加互动性,可能还需要添加暂停和继续滚动的控制按钮,以及鼠标悬停时暂停滚动的机制。这可以通过监听`click`和`mouseover`事件来...

    用CSS3实现无限循环的无缝滚动的示例代码

    总的来说,CSS3的动画功能为实现无限循环无缝滚动提供了简洁高效的方法,减少了对JavaScript的依赖,同时也让网页设计更加灵活和动态。理解并熟练运用这些技术,可以让你的网页设计更加生动和吸引人。

    Javascript制作的横向滚动的广告

    在这个场景中,我们讨论的是使用JavaScript制作一个横向滚动的广告,这种效果类似于迅雷首页的展示方式。要实现这样的功能,我们需要理解以下几个关键知识点: 1. **DOM操作**:JavaScript通过Document Object ...

    JS左右滚动的图片切换效果(jquery版).zip

    【标题】"JS左右滚动的图片切换效果(jquery版)" 是一个基于JavaScript库jQuery实现的交互式图片轮播功能。这种效果通常用于网站中的产品展示、图像画廊或广告横幅,通过用户点击或自动播放的方式,实现图片的平滑...

    JS实现页面图片轮播滚动效果

    6. **兼容性考虑**:对于旧版浏览器,我们需要确保JavaScript代码和CSS效果具有良好的兼容性,可能需要引入polyfill或降级处理。 综上所述,通过JavaScript和相关辅助库,我们可以轻松地实现页面上的图片轮播滚动...

    jQuery流水线循环滚动特效代码

    这个特效利用了JavaScript库jQuery的强大功能,结合特定的插件来实现图片的无缝循环滚动,当鼠标悬停时,滚动会暂停,移开后又会自动恢复,提供了一种动态且友好的用户体验。 首先,我们要了解jQuery,这是一个广泛...

    JS各种版本手册

    JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端的动态效果和交互。这份"JS各种版本手册"的资源集合包含了不同来源和版本的JS参考文档,旨在为开发者提供全面的学习和查阅材料。其中提及的微软、W3C...

    MSClass通用不间断滚动JS封装类

    6. **参数配置**:一个良好的封装类会提供多种配置项,让开发者可以根据需求调整滚动速度、方向、是否循环等参数。 7. **文档说明**:附带的文本说明至关重要,它会详细介绍如何初始化类、设置参数、调用方法以及...

    简单纯净版的图片滚动移动效果

    当然,这只是一个基础的示例,实际应用中可能需要添加更多功能,如自动播放、循环滚动、触发动画等。 标签“滚动”表明这个话题主要关注网页的滚动交互。在移动设备上,考虑到触摸滑动的普遍性,这类效果通常需要...

    JQ 文字无缝滚动效果

    这种效果可以让文字像新闻滚动条一样,不断循环滚动,既节省空间,又富有动态美感。本文将深入探讨如何利用jQuery(简称JQ)实现这种效果,帮助开发者创建生动的网页交互体验。 首先,我们要了解jQuery,这是一个...

    jquery无间隔连续滚动

    它能够实现内容在页面上不断循环滚动,给予用户流畅且连贯的浏览体验,无需手动翻页。下面将详细介绍这个效果的实现原理和关键知识点。 首先,jQuery是一个轻量级的JavaScript库,它的简洁API使得开发者可以轻松地...

    JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri

    1. **JavaScript基础**:JavaScript语言的基础包括变量、数据类型、运算符、流程控制(条件语句、循环语句)、函数等。学习JavaScript首先要掌握这些基本语法,为后续的高级特性学习打下坚实基础。 2. **DOM操作**...

    jquery 无缝滚动 demo

    无缝滚动效果通常是通过创建一个循环列表来实现的,这个列表包含所有需要滚动的元素。当用户滚动到列表的末尾时,列表会立即返回到开头,从而实现“无缝”过渡。这种效果在图片轮播、新闻滚动等场景中尤为常见。 三...

    javascript快速入门+常用js特效源程序

    JavaScript,也常被称为JS,是Web开发中不可或缺的一部分,它是一种轻量级的解释型编程语言,主要用于增强网页和应用程序的交互性。本资源“javascript快速入门+常用js特效源程序”旨在帮助初学者迅速掌握JavaScript...

    JS学习资料(自己整理)

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级编程语言,主要负责网页的动态交互。作为客户端脚本语言,它可以直接在用户的浏览器上运行,无需服务器支持,从而实现网页内容的实时更新、用户交互以及数据...

    jquery及js效果合集试用版

    **jQuery与JavaScript效果合集试用版** 这个资源包提供了30多种JavaScript和jQuery的动态效果,涵盖了网页设计中常用的各种交互元素。这些效果能够极大地提升用户体验,使网站更具吸引力和互动性。以下是对其中一些...

    Head First Javascript源码

    3. **事件处理**:JavaScript通常用于增强网页的交互性,通过监听和响应用户的动作,如点击按钮、滚动页面等。 4. **DOM操作**:Document Object Model (DOM)是HTML和XML文档的结构化表示,JavaScript可以用来遍历...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    `images`目录包含了用于演示的图片资源,而`js`目录可能包含了一个或多个.js文件,里面是实现滚动逻辑的JavaScript代码。这些文件通常会导入jQuery库,并在DOM加载完成后执行滚动初始化代码。 **五、优化与扩展** -...

Global site tag (gtag.js) - Google Analytics