网页图片的滚动效果

   有好久没来了,前段时间生病了,所以也没时间添加东西和学习,还有就是先给给我留言和回复的学友道声歉,没能及时给你们解决问题和回答,在这里深感抱歉...好了,别的就不多说了,说说最近的问题吧。

  最近有点忙,以前没接触过网页图片的滚动效果的制作,现在要实现这个了,就临时抱抱佛脚学习了点,现在整理下,以免忘了,多多积累。现在才体会到:书到用时方恨少!好了,别的就不啰嗦了,现在整理了三个模板的滚动效果。

模板一:js动态图片滚动效果

非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>图片滚动</title>
 6 </head>
 7 <body>
 8 <style type="text/css">
 9 <!--
10 #demo {
11 background: #FFF;
12 overflow:hidden;
13 border: 1px dashed #CCC;
14 width: 500px;
15 }
16 #demo img {
17 border: 3px solid #F2F2F2;
18 }
19 #indemo {
20 float: left;
21 width: 800%;
22 }
23 #demo1 {
24 float: left;
25 }
26 #demo2 {
27 float: left;
28 }
29 -->
30 </style>
31 <div id="demo">
32 <div id="indemo">
33 <div id="demo1">
34 <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
35 <a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
36 <a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
37 <a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
38 <a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
39 <a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>
40 </div>
41 <div id="demo2"></div>
42 </div>
43 </div>
44 <script>
45 <!--
46 var speed=10;
47 var tab=document.getElementById("demo");
48 var tab1=document.getElementById("demo1");
49 var tab2=document.getElementById("demo2");
50 tab2.innerHTML=tab1.innerHTML;
51 function Marquee(){
52 if(tab2.offsetWidth-tab.scrollLeft<=0)
53 tab.scrollLeft-=tab1.offsetWidth
54 else{
55 tab.scrollLeft++;
56 }
57 }
58 var MyMar=setInterval(Marquee,speed);
59 tab.onmouseover=function() {clearInterval(MyMar)};
60 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
61 -->
62 </script>
63 </body>
64 </html>

 注:var speed = 10;数越小,滚动的速度就越快。

<div id="demo2"></div>是必须要有的。

模板二:常用JS图片滚动(无缝、平滑、上下左右滚动)

  本源代码收集了一些常用的网页图片滚动,无缝滚动,效果很平滑,包括上下左右四个方向的滚动,或许你现在用不上这些代码,不过先收藏起来。

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net</title>
  6 </head>
  7 <body>
  8 <div id="colee" style="overflow:hidden;height:253px;width:410px;">
  9 <div id="colee1">
 10 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 11 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 12 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 13 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 14 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 15 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 16 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 17 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 18 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 19 </div>
 20 <div id="colee2"></div>
 21 </div>
 22 <script>
 23 var speed=30;
 24 var colee2=document.getElementById("colee2");
 25 var colee1=document.getElementById("colee1");
 26 var colee=document.getElementById("colee");
 27 colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
 28 function Marquee1(){
 29 //当滚动至colee1与colee2交界时
 30 if(colee2.offsetTop-colee.scrollTop<=0){
 31  colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 32  }else{
 33  colee.scrollTop++
 34 }
 35 }
 36 var MyMar1=setInterval(Marquee1,speed)//设置定时器
 37 //鼠标移上时清除定时器达到滚动停止的目的
 38 colee.onmouseover=function() {clearInterval(MyMar1)}
 39 //鼠标移开时重设定时器
 40 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
 41 </script>
 42 <!--向上滚动代码结束-->
 43 <br>
 44 <!--下面是向下滚动代码-->
 45 <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
 46 <div id="colee_bottom1">
 47 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 48 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 49 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 50 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 51 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 52 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 53 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 54 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 55 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
 56 </div>
 57 <div id="colee_bottom2"></div>
 58 </div>
 59 <script>
 60 var speed=30
 61 var colee_bottom2=document.getElementById("colee_bottom2");
 62 var colee_bottom1=document.getElementById("colee_bottom1");
 63 var colee_bottom=document.getElementById("colee_bottom");
 64 colee_bottom2.innerHTML=colee_bottom1.innerHTML
 65 colee_bottom.scrollTop=colee_bottom.scrollHeight
 66 function Marquee2(){
 67 if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
 68 colee_bottom.scrollTop+=colee_bottom2.offsetHeight
 69 else{
 70 colee_bottom.scrollTop--
 71 }
 72 }
 73 var MyMar2=setInterval(Marquee2,speed)
 74 colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
 75 colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
 76 </script>
 77 <!--向下滚动代码结束-->
 78 <br>
 79 <!--下面是向左滚动代码-->
 80 <div id="colee_left" style="overflow:hidden;width:500px;">
 81 <table cellpadding="0" cellspacing="0" border="0">
 82 <tr><td id="colee_left1" valign="top" align="center">
 83 <table cellpadding="2" cellspacing="0" border="0">
 84 <tr align="center">
 85 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
 86 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
 87 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
 88 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
 89 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
 90 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
 91 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
 92 </tr>
 93 </table>
 94 </td>
 95 <td id="colee_left2" valign="top"></td>
 96 </tr>
 97 </table>
 98 </div>
 99 <script>
100 //使用div时,请保证colee_left2与colee_left1是在同一行上.
101 var speed=30//速度数值越大速度越慢
102 var colee_left2=document.getElementById("colee_left2");
103 var colee_left1=document.getElementById("colee_left1");
104 var colee_left=document.getElementById("colee_left");
105 colee_left2.innerHTML=colee_left1.innerHTML
106 function Marquee3(){
107 if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
108 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
109 else{
110 colee_left.scrollLeft++
111 }
112 }
113 var MyMar3=setInterval(Marquee3,speed)
114 colee_left.onmouseover=function() {clearInterval(MyMar3)}
115 colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
116 </script>
117 <!--向左滚动代码结束-->
118 <br>
119 <!--下面是向右滚动代码-->
120 <div id="colee_right" style="overflow:hidden;width:500px;">
121 <table cellpadding="0" cellspacing="0" border="0">
122 <tr><td id="colee_right1" valign="top" align="center">
123 <table cellpadding="2" cellspacing="0" border="0">
124 <tr align="center">
125 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
126 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
127 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
128 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
129 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
130 </tr>
131 </table>
132 </td>
133 <td id="colee_right2" valign="top"></td>
134 </tr>
135 </table>
136 </div>
137 <script>
138 var speed=30//速度数值越大速度越慢
139 var colee_right2=document.getElementById("colee_right2");
140 var colee_right1=document.getElementById("colee_right1");
141 var colee_right=document.getElementById("colee_right");
142 colee_right2.innerHTML=colee_right1.innerHTML
143 function Marquee4(){
144 if(colee_right.scrollLeft<=0)
145 colee_right.scrollLeft+=colee_right2.offsetWidth
146 else{
147 colee_right.scrollLeft--
148 }
149 }
150 var MyMar4=setInterval(Marquee4,speed)
151 colee_right.onmouseover=function() {clearInterval(MyMar4)}
152 colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
153 </script>
154 <!--向右滚动代码结束-->
155 </body>
156 </html>

模块三:jQuery控制图片淡入淡出效果

  Query控制图片淡入淡出效果,或许见的多了就不足为奇了,淡入淡出效果不论是在WEB或是WinForm编程中都使用广泛,很经典的一款转场或图片切换特效,在此,把基于jquery实现的图片淡入淡出效果分享给大家,希望对你的编程有帮助。

View Code
 1 <html>
 2 <head>
 3     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 4     <title>jQuery控制图片淡入淡出效果</title>
 5     <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript" charset="utf-8"></script>
 6     <style type="text/css">
 7         ul li{position:absolute;left:50px;top:20px;}
 8         .onoe{display:none;}
 9     </style>
10 </head>
11 <body>
12     <ul> 
13         <li><img src="/jscss/demoimg/wall1.jpg"></li>
14         <li><img src="/jscss/demoimg/wall2.jpg"></li>
15         <li><img src="/jscss/demoimg/wall3.jpg"></li>
16     </ul> 
17     <script>
18         $(function(){
19             var n = 2;
20             setInterval(function(){
21                 if(! $("ul li").eq(n).is(":hidden")){
22                     $("ul li").eq(n).fadeOut("slow")
23                 }else{
24                      $("ul li").eq(n).fadeIn("slow")
25                 }
26                 n--;
27             if(n == 0){
28                 n = 2;
29             };
30             },2000);
31         });
32 
33     </script>
34 </body>
35 </html>

就写着几个吧,其它的如果大家要用,就去网上搜吧,只是帮助自己记住这些而已,当然如果各位觉得可以就可以拿去试试。

posted @ 2013-01-24 16:04  妍珊  阅读(7293)  评论(14编辑  收藏  举报