`
liuyanhui
  • 浏览: 37942 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
最近访客 更多访客>>
社区版块
存档分类
最新评论

连续的滚动特效

    博客分类:
  • HTML
阅读更多
向上滚动的效果
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff> 
<div id=demo1> 
<!-- 定义图片 --> 
<img src="images/logo_1.gif"> 
<img src="images/logo/flashempire.gif"> 
<img src="images/logo.gif"> 
<img src="images/logo/5dmedia.gif"> 
<img src="images/logo/macromedia.gif"> 
<img src="images/logo/sucaiw.gif"> 
<img src="images/logo/blueieda.gif"> 
<img src="images/logo/htmlcn.gif"> 
<img src="images/logo/fwcn.gif"> 
</div> 
<div id=demo2></div> 
</div>

<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetTop-demo.scrollTop<=0) 
demo.scrollTop-=demo1.offsetHeight 
else{ 
demo.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>


制作向下滚动的效果,将上面“制作向上滚动的效果”中的红色字体Js部分替换成:
<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
demo.scrollTop=demo.scrollHeight 
function Marquee(){ 
if(demo1.offsetTop-demo.scrollTop>=0) 
demo.scrollTop+=demo2.offsetHeight 
else{ 
demo.scrollTop-- 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>

制作向左滚动的效果:
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff> 
<table align=left cellpadding=0 cellspace=0 border=0> 
<tr> 
<td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif"> 
</td> 
<td id=demo2 valign=top></td> 
</tr> 
</table> 
</div>

<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetWidth-demo.scrollLeft<=0) 
demo.scrollLeft-=demo1.offsetWidth 
else{ 
demo.scrollLeft++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>


制作向右滚动的效果,将上面“制作向左滚动的效果”中的红色字体Js部分替换成:
<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
demo.scrollLeft=demo.scrollWidth 
function Marquee(){ 
if(demo.scrollLeft<=0) 
demo.scrollLeft+=demo2.offsetWidth 
else{ 
demo.scrollLeft-- 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>
分享到:
评论

相关推荐

    JavaScript图片连续滚动效果

    在本主题"JavaScript图片连续滚动效果"中,我们将探讨如何使用JavaScript来创建四种不同的图片滚动效果:向下滚动、向上滚动、向左滚动和向右滚动。这些效果可以提升网站的视觉吸引力,增加用户体验,常用于新闻轮播...

    javascript经典特效---图片连续滚动效果.rar

    在网页设计中,JavaScript经常被用来创建各种视觉特效,其中之一就是图片连续滚动效果。这种效果能够吸引用户的注意力,提升网站的用户体验,常用于展示产品、新闻更新或者广告轮播等场景。 要实现图片连续滚动效果...

    页脚图片连续滚动

    在网页设计中,"页脚图片连续滚动"是一种常见的视觉效果,它通常用于展示一系列相关的图片,如公司产品、服务示例或者动态信息等。这种滚动效果能够吸引用户的注意力,提高用户在页面上的停留时间,同时也能够有效地...

    图片无限连续滚动的js代码

    "图片无限连续滚动的js代码"就是一种实现这种效果的技术,它基于JavaScript语言,类似于HTML中的`&lt;marquee&gt;`标签,但提供了更为灵活和可控的滚动体验。下面我们将详细探讨这个主题。 1. **JavaScript基础**: ...

    css3无缝连续滚动网页特效

    "css3无缝连续滚动网页特效"是利用CSS3的新功能实现的一种动态视觉效果,使得网页内容可以平滑、不间断地循环滚动,给用户带来流畅的浏览体验。这种特效常见于新闻滚动条、产品展示区域或轮播图等场景。 首先,CSS3...

    图片连续滚动

    在网页设计中,图片连续滚动是一种常见的动态效果,主要用于展示多张图片,增强用户体验和视觉吸引力。这种效果通常由JavaScript实现,因为JavaScript可以提供实时、交互式的动态功能,而HTML和CSS则更多地用于静态...

    用JavaScript和ASP制作连续滚动的字幕

    要实现真正的连续滚动效果,关键在于通过程序逻辑控制字幕内容的高度超出滚动区域高度的两倍以上,同时隐藏多余的滚动条,仅通过代码控制滚动条的位置来模拟内容的连续滚动。具体步骤包括: 1. **内容复制**:将...

    网页表格中图片连续滚动

    本文将详细解析如何在HTML表格中实现图片的连续滚动效果,包括其实现原理、代码详解以及注意事项。 ### 实现原理 在网页设计中,想要让元素(如图片)在固定区域内连续滚动,主要依赖于CSS和JavaScript的结合。...

    JS图片、新闻连续滚动

    在本文中,我们将深入探讨如何使用JavaScript来创建一个图片和新闻的连续滚动效果,这种效果常用于网站的相册展示和新闻更新。 首先,让我们了解“循环滚动”和“连续滚动”的概念。这两种滚动方式都是为了让内容...

    比较好用_js地区联动与连续滚动_javascript地区联动与连续滚动

    标题中的“比较好用_js地区联动与连续滚动_javascript地区联动与连续滚动”表明这是一个关于JavaScript实现的地区联动和连续滚动效果的技术分享。地区联动通常指的是在网页中选择一个地区(如省份)时,下方的下拉...

    无间断连续滚动网页代码

    无间断连续滚动网页代码是一种常见的网页动态效果,它能够为用户提供流畅的浏览体验,尤其适用于展示长内容或创建无限滚动的页面。这种效果通常通过JavaScript实现,因为JavaScript具有强大的DOM(文档对象模型)...

    js 特效 html 特效 连续滚动的图片

    js 特效 html 特效 连续滚动的图片 js 特效 html 特效 连续滚动的图片

    简单左右连续滚动

    标题“简单左右连续滚动”可能指的是一个网页或应用中的元素滚动效果,这种效果常见于网站的轮播图、产品展示或者新闻滚动等场景。描述中的“简单”可能意味着设计者追求的是易于理解和实现的解决方案,而不是复杂的...

    WPF自定义连续滚动条

    "WPF自定义连续滚动条"这个项目,提供了一个可以直接使用的自定义滚动条控件,同时也可作为学习和参考的例子。 滚动条主要由两部分组成:滑块(thumb)和轨道(track)。在WPF中,滚动条可以通过继承`System....

    利用JavaScript制作无缝的连续滚动广告效果.pdf

    "利用JavaScript制作无缝的连续滚动广告效果" 本文介绍了如何使用JavaScript制作无缝的连续滚动广告效果,实现多行文字从下向上垂直连续不断地滚动,并且当鼠标移到滚动文字上就停止滚动,否则继续滚动。 知识点:...

    jQuery点击按钮图片无缝连续滚动适合图片类的网站.zip

    标题中的“jQuery点击按钮图片无缝连续滚动”是一个典型的网页动态效果,主要应用于图片展示类的网站,提升用户体验。这个效果利用了JavaScript库jQuery的强大功能,实现了图片在用户点击按钮时平滑、无缝地进行切换...

    实现连续滚动文字效果,无间断

    根据给定文件的信息,本文将详细介绍如何实现网页上连续滚动的文字效果,并确保其无间断地展示。在实际开发过程中,这种效果常用于新闻滚动、公告栏等场景,能够有效地吸引用户注意力并传达重要信息。 ### 实现原理...

    js实现新闻列表连续的滚动效果

    通过js实现的新闻列表的滚动效果 效果为连续滚动

    JavaScript实现图片连续滚动的案例

    本案例将详细介绍如何使用JavaScript实现图片连续滚动,特别地,我们将关注“MarqueeScrollLeft”这个实现方法,它代表了向左滚动的效果。 首先,我们需要理解基本的HTML结构,用于放置要滚动的图片。通常,我们会...

    使用JavaScript实现连续滚动字幕效果的方法

    JavaScript实现连续滚动字幕效果涉及了多个知识点,具体包括: 1. Marquee标签和其局限性 在内容中首先提到,一般情况下我们使用HTML的Marquee标签来控制元素的滚动。但是Marquee标签实现的滚动效果是单向的,且在...

Global site tag (gtag.js) - Google Analytics