`
superytmf
  • 浏览: 19352 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

无缝javascript滚动新闻

阅读更多
<div id="marquees">
<a href="javascript:">1,你可曾有过无数的梦想,</a><br>
<br>
<a href="javascript:">2,却在时光的流逝里幻灭 </a><br>
<br>
<a href="javascript:">3,你可曾对未来期待憧憬,</a><br>
<br>
<a href="javascript:">4,却在成长的岁月中迷失</a><br>
<br>
</div>
<script language="JavaScript">

marqueesHeight=200;
stopscroll=false;

with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",20);//越大越慢
}
document.body.onload=init;

function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>

分享到:
评论

相关推荐

    JavaScript 无缝上下滚动加定高停顿效果

    2. **新闻滚动条**:新闻网站上常见的滚动新闻条,可以采用这种无缝滚动技术。 3. **动态效果增强**:在需要增加用户互动性和视觉效果的网页设计中,可以使用这种技术。 ### 四、扩展思考 1. **性能优化**:考虑到...

    ScrollNews 新闻无缝循环滚动切换特效 ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而并非是一行或几个简单图片构成的滚动。

    ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而...

    table表单无缝连接滚动

    JavaScript是实现无缝滚动的核心,它负责检测用户滚动事件,判断是否接近表格底部,如果满足条件,则通过Ajax请求加载新的数据。Ajax允许在后台与服务器通信,无需刷新整个页面,提高交互性。 ### 5. 数据分块与懒...

    无缝循环滚动插件

    无缝循环滚动插件是一种网页动态效果技术,常用于展示新闻、产品列表或轮播图等,为用户提供连续不间断的浏览体验。基于jQuery实现的此类插件利用了jQuery库的强大功能和简洁API,使得开发者能够轻松地创建出平滑、...

    javascript上下无缝图片滚动

    JavaScript 上下无缝图片滚动是一种常见的网页动态效果,用于展示一系列图片,给用户带来更丰富的视觉体验。这种技术常被应用于产品展示、轮播广告或图片画廊等场景,如糯米网的产品展示。在这个效果中,图片会按照...

    javascript特效无缝滚动marquee

    JavaScript特效无缝滚动是一种常见的网页动态效果,常用于广告展示、新闻滚动等场景。"marquee"是HTML的一个非标准标签,用于创建一个自动移动(滚动)的文本或图像区域,而JavaScript则提供了更灵活和强大的控制...

    javascript无缝滚动代码

    - **性能优化**:考虑到大量DOM操作可能影响页面性能,可以考虑使用CSS3的`transform`属性代替JavaScript滚动,或者使用requestAnimationFrame替代setInterval,以减少CPU负担。 - **响应式设计**:根据屏幕尺寸调整...

    文字列表无缝向上滚动

    【文字列表无缝向上滚动】是一种常见的网页动态效果,它能够为用户提供流畅的视觉体验,尤其在展示大量文本信息时,如新闻更新、公告或者产品列表等。这种效果通过编程技术实现,使得文字列表在到达顶部时不是突然...

    利用Marquee实现无缝循环滚动文字

    在提供的代码示例中,通过JavaScript结合CSS实现了一个类似`&lt;marquee&gt;`标签的无缝循环滚动效果。 - **关键代码解析**: - **CSS样式**:定义了滚动区域的背景颜色、溢出隐藏、宽度和高度等样式。 - **HTML结构**...

    js实现文字内容无缝滚动动画效果

    "js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用,主要用于创建一种视觉上连续、无中断的文字滚动展示,常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息,而不会显得拥挤。...

    无缝滚动新闻的Javascript源代码.doc

    在提供的文件中,我们可以看到实现无缝滚动新闻的关键部分包括CSS样式和JavaScript函数。 首先,CSS样式定义了新闻列表的布局和样式。`.new_newsT`是整个新闻区域的类,设置了内边距和外边距。`.list`类用于定义...

    无缝滚动制作js文字无缝滚动和js图片无缝滚动

    本文将深入探讨如何使用JavaScript来实现文字和图片的无缝滚动效果,以及如何通过复制和应用提供的js代码来创建这些效果。 无缝滚动技术的主要目标是让页面内容(无论是文字还是图片)在不中断视觉连续性的情况下...

    javascript+div图片无缝滚动

    ### JavaScript + div 图片无缝滚动知识点解析 #### 一、技术背景与应用场景 在Web开发领域,使用JavaScript结合HTML和CSS实现动态效果是常见的做法。其中,“图片无缝滚动”是一种非常实用的技术,常用于网站轮播...

    table无限循环无缝滚动.zip

    总的来说,"table无限循环无缝滚动"是一个结合了HTML5、CSS和JavaScript技术的实用功能,它能提供更流畅的用户浏览体验,尤其适用于展示大量数据的场景。在实现过程中,需要考虑到性能、可维护性和兼容性等因素,以...

    marquee图片无缝滚动(上下左右均可)

    "marquee图片无缝滚动(上下左右均可)" 这个标题涉及到一个JavaScript或HTML元素的使用,即`&lt;marquee&gt;`标签,它用于创建一个滚动的效果,通常用于文字或图像的自动滚动。这里的关键词是“无缝滚动”,意味着在滚动...

    JavaScript无缝滚动小例

    这个"JavaScript无缝滚动小例"提供了一个实现这一效果的实例,包括向上、向下、向左和向右四个方向的滚动。 首先,让我们了解JavaScript如何实现无缝滚动的基本原理。通常,我们利用JavaScript的定时器(如`...

    DIV+CSS实现横向无缝图片滚动效果

    接下来,我们可能还需要一个JavaScript(或jQuery)脚本来实现无缝滚动。主要步骤包括: 1. **获取图片列表**:找到所有的图片元素,并记录其宽度。 2. **计算总宽度**:将所有图片宽度相加,再加上适当的间隙,...

    网页图片无缝循环滚动html代码

    根据给定的文件信息,我们可以深入探讨网页图片无缝循环滚动的HTML及JavaScript实现技术。这一技术在网页设计中被广泛运用,特别是在展示产品、广告或背景图像时,它能够为用户带来连续且平滑的视觉体验,提升网站的...

    无缝图片滚动效果,基于IE6,好看使用的

    这个文件可能包含了实现无缝滚动的JavaScript代码,包括定义滚动速度、动画效果、事件监听等功能。开发者可以通过引入这个文件到HTML页面,并配置相关参数来启用图片滚动效果。 在实际应用中,创建无缝图片滚动效果...

    JavaScript图片无缝滚动

    JavaScript 图片无缝滚动源码 图片无缝滚动源码

Global site tag (gtag.js) - Google Analytics