[转]JS图片滚动效果

简介: From: http://bbs.blueidea.com/thread-2762084-1-1.html演示效果:http://bbs.blueidea.com/thread-2762084-1-1.
From: http://bbs.blueidea.com/thread-2762084-1-1.html

演示效果: http://bbs.blueidea.com/thread-2762084-1-1.html

img_a6339ee3e57d1d52bc7d02b338e15a60.gif <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< html  xmlns ="http://www.w3.org/1999/xhtml" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< head >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< title > 家园网 www.wfamilies.com </ title >
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
< style  type ="text/css" > img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif*
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifmargin
:0;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifbody
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifbackground
:#CCC;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
/**//*--大块定义--*/
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#container
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.giftext-align
:left;
img_33d02437d135341f0800e3d415312ae8.gifwidth
:778px;
img_33d02437d135341f0800e3d415312ae8.gifoverflow
:hidden;
img_33d02437d135341f0800e3d415312ae8.gifbackground
:#fff;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#content
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifwidth
:778px;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
/**//*--休闲一刻--*/
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.giffloat
:left;
img_33d02437d135341f0800e3d415312ae8.gifwidth
:778px;
img_33d02437d135341f0800e3d415312ae8.gifmargin
:0;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0;
img_33d02437d135341f0800e3d415312ae8.gifbackground
:#999;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.giffloat
:left;
img_33d02437d135341f0800e3d415312ae8.gifwidth
:778px;
img_33d02437d135341f0800e3d415312ae8.gifmargin
:0;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0 0 20px 0;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content img
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifborder
:0;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content .roll
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifwidth
: 750px;
img_33d02437d135341f0800e3d415312ae8.gifmargin
:4px auto;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0 0 0 0; 
img_33d02437d135341f0800e3d415312ae8.gifoverflow
:hidden;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content .roll #main
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.giflist-style
:none;
img_33d02437d135341f0800e3d415312ae8.gifwidth
:1620px;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0;
img_33d02437d135341f0800e3d415312ae8.gifmargin
:0;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content .roll #main #pic1,#xxyk .content .roll #main #pic2
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.giffloat
:left;
img_33d02437d135341f0800e3d415312ae8.giftext-align
:left;
img_33d02437d135341f0800e3d415312ae8.gifwidth
:810px;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0;
img_33d02437d135341f0800e3d415312ae8.gifmargin
:0;
img_33d02437d135341f0800e3d415312ae8.gifbackground
:#f90;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content .roll #main #pic1 a,#xxyk .content .roll #main #pic2 a
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifdisplay
:block;
img_33d02437d135341f0800e3d415312ae8.giftext-align
:center;
img_33d02437d135341f0800e3d415312ae8.gifcolor
:#FFFFFF;
img_33d02437d135341f0800e3d415312ae8.gifwidth
:135px;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content .roll #main #pic1 img,#xxyk .content .roll #main #pic2 img
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifdisplay
:block;
img_33d02437d135341f0800e3d415312ae8.gifclear
:both;
img_33d02437d135341f0800e3d415312ae8.gifwidth
:115px;
img_33d02437d135341f0800e3d415312ae8.gifheight
:111px;
img_33d02437d135341f0800e3d415312ae8.gifmargin
:0 auto 5px auto;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content .roll #main #pic1 ul,#xxyk .content .roll #main #pic2 ul
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.giffloat
:left;
img_33d02437d135341f0800e3d415312ae8.giflist-style
:none;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#xxyk .content .roll #main #pic1 ul li,#xxyk .content .roll #main #pic2 ul li
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.giffloat
:left;
img_33d02437d135341f0800e3d415312ae8.gifdisplay
:block;
img_33d02437d135341f0800e3d415312ae8.gifmargin
:0;
img_33d02437d135341f0800e3d415312ae8.gifpadding
:0;
img_105a1e124122b2abcee4ea8e9f5108f3.gif
}

img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
/**//*--隐藏元素--*/
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif#slhdly .title,#xxyk .content ul li.more
{img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif}{
img_33d02437d135341f0800e3d415312ae8.gifposition
:absolute;
img_33d02437d135341f0800e3d415312ae8.gifvisibility
:hidden;
img_33d02437d135341f0800e3d415312ae8.gifoverflow
:hidden;
img_33d02437d135341f0800e3d415312ae8.gifdisplay
:none;
img_33d02437d135341f0800e3d415312ae8.gifclip
:rect(0,0,0,0);
img_33d02437d135341f0800e3d415312ae8.gifheight
:0;
img_05dd8d549cff04457a6366b0a7c9352a.gif
}

img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ style >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ head >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< body >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< div  id ="xxyk" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< div  class ="content" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< div  id ="pic"  class ="roll" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< div  id ="main" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< div  id ="pic1" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< ul >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< li >< href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< li >< href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< li >< href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< li >< href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< li >< href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< li >< href ="#"  target =_blank >< img  src ="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg"  /  ></ a ></ li >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ ul >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ div >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< div  id ="pic2" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ div >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ div >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ div >
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
< script  type ="text/javascript" > img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif             
var spe=22;  /**//*--控制移动速度--*/
img_33d02437d135341f0800e3d415312ae8.gif                
var m = document.getElementById("pic");
img_33d02437d135341f0800e3d415312ae8.gif                
var m1 = document.getElementById('pic1');
img_33d02437d135341f0800e3d415312ae8.gif                
var m2 = document.getElementById('pic2');
img_33d02437d135341f0800e3d415312ae8.gif                m2.innerHTML 
= m1.innerHTML;
img_33d02437d135341f0800e3d415312ae8.gif              
function Marquee()
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                 
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                  
if(m2.offsetWidth-m.scrollLeft<=0)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                  
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                     m.scrollLeft
-=m1.offsetWidth;
img_105a1e124122b2abcee4ea8e9f5108f3.gif                  }

img_33d02437d135341f0800e3d415312ae8.gif                  
else
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                  
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                   m.scrollLeft
++;
img_105a1e124122b2abcee4ea8e9f5108f3.gif               }

img_105a1e124122b2abcee4ea8e9f5108f3.gif           }

img_33d02437d135341f0800e3d415312ae8.gif                 
var k1;
img_33d02437d135341f0800e3d415312ae8.gif                 
function startmarquee()
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                 
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                     k1
=setInterval(Marquee,spe)                 
img_105a1e124122b2abcee4ea8e9f5108f3.gif                 }

img_33d02437d135341f0800e3d415312ae8.gif                 window.setTimeout('startmarquee()',
1000);
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           m.onmouseover
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{clearInterval(k1)}
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif           m.onmouseout
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{k1=setInterval(Marquee,spe)}
img_05dd8d549cff04457a6366b0a7c9352a.gif               
</ script >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ div >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ div >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ body >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ html >
目录
相关文章
|
3月前
|
前端开发 JavaScript API
使用 JavaScript 实现图片上传
使用 JavaScript 实现图片上传
114 1
|
3月前
|
JavaScript 数据可视化
JS如何优雅的实现模块自动滚动展示
【8月更文挑战第22天】JS如何优雅的实现模块自动滚动展示
30 1
JS如何优雅的实现模块自动滚动展示
|
2月前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
3月前
|
JavaScript 前端开发
JS - 如何上传 Base64 编码的图片
本文展示了如何将Base64编码的图片在前端转换为Blob对象,并使用`FormData`上传到服务器端的方法。
177 0
|
3月前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
54 0
|
3月前
|
JavaScript
js之图片上传
js之图片上传
75 0
|
4月前
|
JavaScript
【vue】 vue2 | js 实现数字滚动效果
【vue】 vue2 | js 实现数字滚动效果
80 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
44 0
|
4月前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
24 0