`
cenhonggang86830
  • 浏览: 45211 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

【转载】无缝图片滚动代码

    博客分类:
  • Java
 
阅读更多
向右滚动:
<div id=demo style=overflow:hidden;height:35;width:200;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top>
[align=left][/align]<img src="http://www.songzi.org/blog/styles/default/sz_blog.gif"><img src="http://www.songzi.org/forum/images/powered.gif"><img src="http://iedoo.net/logo/mylogo.gif"></td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLdemo.scrollLeft=demo.scrollWidthfunction Marquee(){if(demo.scrollLeft<=0)demo.scrollLeft+=demo2.offsetWidthelse{demo.scrollLeft--}}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:35;width:200;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://www.songzi.org/blog/styles/default/sz_blog.gif"><img src="http://www.songzi.org/forum/images/powered.gif"><img src="http://iedoo.net/logo/mylogo.gif"></td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLdemo.scrollLeft=demo.scrollWidthfunction Marquee(){if(demo.scrollLeft<=0)demo.scrollLeft+=demo2.offsetWidthelse{demo.scrollLeft++}}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:100;width:90;background:#214984;color:#ffffff><div id=demo1><img src="http://www.songzi.org/forum/images/powered.gif"><img src="http://www.songzi.org/blog/styles/default/sz_blog.gif"><img src="http://iedoo.net/logo/mylogo.gif"></div><div id=demo2></div></div><script>var speed=30demo2.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>


向下滚动:
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1><img src="http://www.songzi.org/forum/images/powered.gif"><img src="http://www.songzi.org/blog/styles/default/sz_blog.gif"><img src="http://iedoo.net/logo/mylogo.gif"></div><div id=demo2></div></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLdemo.scrollTop=demo.scrollHeightfunction Marquee(){if(demo1.offsetTop-demo.scrollTop>=0)demo.scrollTop+=demo2.offsetHeightelse{demo.scrollTop--}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>[align=left][/align]
分享到:
评论

相关推荐

    js无缝图片滚动代码素材.rar

    【标题】"js无缝图片滚动代码素材.rar"指的是一个JavaScript实现的无缝图片滚动代码资源,它可以帮助网页开发者创建出平滑、高效的图片展示效果。在网页设计中,图片滚动是一种常见的交互元素,常用于新闻更新、产品...

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

    "jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...

    鼠标可控的无缝图片滚动代码.rar

    【标题】中的“鼠标可控的无缝图片滚动代码”是指一种网页设计技术,它允许用户通过鼠标操作来实现图片的平滑、连续滚动效果。这种效果通常用于网站的轮播图或者展示多张图片的场景,可以提升用户体验,使得图片浏览...

    图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向

    标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片,以滚动的方式呈现,使得用户无需手动翻页就能浏览到...

    js左右切换鼠标可控的无缝图片滚动代码.rar

    js左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码....

    js无缝图片滚动,无缝图片滚动

    js无缝图片滚动,很不错,可以做到无缝图片流动效果,js无缝图片滚动.

    无缝图片滚动效果

    "无缝图片滚动效果"是网页设计中的一种常见视觉特效,它可以让图片以平滑连续的方式循环滚动,给予用户流畅的浏览体验。这个效果常用于产品展示、轮播广告或照片墙等场景。 该插件的主要功能是创建一个自动或手动...

    js无缝滚动代码制作js图片无缝滚动向上无缝滚动

    以上代码是一个基础的图片向上无缝滚动的实现,实际应用中可能需要考虑更多的细节,比如兼容性、动画平滑性以及用户交互等。在进行此类效果的开发时,可以结合CSS3的`transition`和`transform`属性,以及现代浏览器...

    图片左右无缝滚动JS代码

    在网页设计中,图片滚动效果是一种常见的动态展示方式,可以吸引用户的注意力并提供视觉上的吸引力。"图片左右无缝滚动JS代码"是指使用JavaScript编程语言实现的一种特效,它允许图片在水平方向上连续、平滑地滚动,...

    图片无缝滚动插件上下左右图片无缝滚动代码.zip

    7. **无缝循环**:为实现“无缝”,需要处理边界情况,当图片滚动到最后一张时,应立即返回到第一张,且过渡自然无断裂感。这可能涉及到数组索引的计算和图片的重新排列。 8. **优化性能**:考虑到用户体验,代码...

    左右切换鼠标可控的无缝图片滚动代码

    左右切换鼠标可控的无缝图片滚动代码

    js产品图片无缝滚动代码向左和向上图片无缝滚动代码

    在电商网站或产品展示页面中,图片无缝滚动是一种常见的视觉设计手法,它能够吸引用户的注意力,提升用户体验。本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先,我们需要理解无缝滚动的基本...

    JS+CSS控制左右切换鼠标可控的无缝图片滚动代码

    JS+CSS控制左右切换鼠标可控的无缝图片滚动代码

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

    "无缝图片滚动效果"是一种流行的网页动态效果,它能够让图片以连续且平滑的方式循环滚动,给予用户一种无终止的视觉体验。在这个场景中,我们特别关注的是一个基于IE6实现的无缝图片滚动解决方案,这在现代浏览器...

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

    ### 一、网页图片无缝循环滚动的基本原理 网页图片的无缝循环滚动主要通过HTML结构布局与JavaScript控制相结合来实现。其核心思想是创建两个并行的元素,其中一个作为实际显示区域(如`demo1`),另一个作为复制...

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

    标题中的“DIV+CSS实现横向无缝图片滚动效果”是指在网页设计中,通过HTML的`&lt;div&gt;`元素和CSS样式来创建一个可以水平无限循环滚动的图片展示区域。这种效果通常用于网站的横幅广告、产品展示或者新闻更新等部分,以...

    JavaScript左右切换鼠标可控的无缝图片滚动代码.rar

    本资源提供了一个基于JavaScript实现的左右切换、鼠标可控的无缝图片滚动代码,适用于网站展示多张图片的需求,既能提升用户体验,也能增强网页的交互性。 首先,我们要理解JavaScript在其中的作用。JavaScript是一...

    jQuery图片左右无缝滚动特效代码

    jQuery图片左右无缝滚动特效是一种常见的网页动态效果,用于展示多张图片并营造出平滑、连贯的浏览体验。...开发者可以通过理解这些知识点,结合实际的代码实现,来创建或优化自己的图片滚动特效。

    web-JQuery无缝图片滚动

    **jQuery无缝图片滚动**是一种常见的网页动态效果,用于在网页上展示一组图片,通过自动循环滚动,给予用户连续且平滑的视觉体验。这个技术基于JavaScript库jQuery,它简化了DOM操作,使得实现复杂的交互变得更加...

Global site tag (gtag.js) - Google Analytics