由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码

现在的位置: 首页 > 综合 > 正文

由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码

2013年05月30日 ⁄ 综合 ⁄ 共 15823字 ⁄ 字号小中大 ⁄ 评论关闭

js实现图片滚动
关键字: js实现图片滚动
Js代码
1.<link rel="stylesheet" href="../css/picscroll2.css" media="screen"

type="text/css">
2.<script src="../js/yahoo.js" type="text/javascript"></script>
3.<script src="../js/event.js" type="text/javascript"></script>
4.<script src="../js/dom.js" type="text/javascript"></script>
5.<script src="../js/animation.js" type="text/javascript"></script>
6.
7.<script type="text/javascript">
8.
9.        YAHOO.example = function() {
10.        var $D = YAHOO.util.Dom;
11.        var $E = YAHOO.util.Event;
12.        var $A = YAHOO.util.Anim;
13.        var $M = YAHOO.util.Motion;
14.        var $DD = YAHOO.util.DD;
15.        var $ = $D.get;
16.        var x = 1;
17.        return {
18.            init : function() {
19.                $E.on(['move-left','move-right'], 'click', this.move);
20.            },
21.            move : function(e) {
22.                $E.stopEvent(e);
23.                switch(this.id) {
24.                    case 'move-left':
25.                        if ( x === 1 ) {
26.                            return;
27.                        }
28.                        var attributes = {
29.                            points : {
30.                                by : [101, 0]
31.                            }
32.                        };
33.                        x--;
34.                    break;
35.                    case 'move-right':
36.                        if ( x === 18 ) {
37.                            return;
38.                        }
39.                        var attributes = {
40.                            points : {
41.                                by : [-101, 0]
42.                            }
43.                        };
44.                        x++;
45.                    break;
46.                };
47.                var anim = new $M('themes', attributes, 0.5,

YAHOO.util.Easing.easeOut);
48.                anim.animate();
49.            }
50.        };
51.    }();
52.    YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example,

true);
53.
54.    </script>
55.<style>
56.
57..divhighlightit img{
58.border: 1px solid #ffffff;
59.}
60.
61..highlightit:hover img{
62.border: 2px solid red;
63.}
64.
65..divhighlightit {
66.border: 2px solid #B5BDC6;
67.}
68.
69.
70.</style>
71.<div id="doc" style="clear: both;">
72.    <div id="info">
73.        <a id="move-left" href="#" ><img src="../images/left.jpg"

border="0" height="70"></a>
74.        <div class="mod">
75.            <ul style="position: relative; left: 0px; top: 2px;"

id="themes">
76. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
77. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
78. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
79. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
80. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
81. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
82. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
83. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
84. <li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>

85.            </ul>
86.        </div>
87.        <a id="move-right" href="#"><img src="../images/right.jpg"

border="0" height="70"></a>
88. </div>
89.</div>
<link rel="stylesheet" href="../css/picscroll2.css" media="screen"

type="text/css">
<script src="../js/yahoo.js" type="text/javascript"></script>
<script src="../js/event.js" type="text/javascript"></script>
<script src="../js/dom.js" type="text/javascript"></script>
<script src="../js/animation.js" type="text/javascript"></script>

  YAHOO.example = function() {
  var $D = YAHOO.util.Dom;
  var $E = YAHOO.util.Event;
  var $A = YAHOO.util.Anim;
  var $M = YAHOO.util.Motion;
  var $DD = YAHOO.util.DD;
  var $ = $D.get;
  var x = 1;
  return {
   init : function() {
    $E.on(['move-left','move-right'], 'click',

this.move);
   },
   move : function(e) {
    $E.stopEvent(e);
    switch(this.id) {
     case 'move-left':
      if ( x === 1 ) {
       return;
      }
      var attributes = {
       points : {
        by : [101, 0]
       }
      };
      x--;
     break;
     case 'move-right':
      if ( x === 18 ) {
       return;
      }
      var attributes = {
       points : {
        by : [-101, 0]
       }
      };
      x++;
     break;
    };
    var anim = new $M('themes', attributes, 0.5,

YAHOO.util.Easing.easeOut);
    anim.animate();
   }
  };
}();
YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example,

true);

</script>
<style>

.divhighlightit img{
border: 1px solid #ffffff;
}

.highlightit:hover img{
border: 2px solid red;
}

.divhighlightit {
border: 2px solid #B5BDC6;
}

</style>
<div id="doc" style="clear: both;">
<div id="info">
<a id="move-left" href="#" ><img src="../images/left.jpg"

border="0" height="70"></a>
<div class="mod">
<ul style="position: relative; left: 0px; top: 2px;"

id="themes">
<li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div

class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>

   </ul>
  </div>
  <a id="move-right" href="#"><img src="../images/right.jpg"

border="0" height="70"></a>
</div>
</div>

Css代码
1.
2.#vecherthemes {
3.    WIDTH: 4000px
4.}
5.
6.#vecherthemes {
7.    FLOAT: left;
8.    PADDING-RIGHT: 0px;
9.    PADDING-LEFT: 0px;
10.    PADDING-BOTTOM: 0px;
11.    MARGIN: 0px;
12.    OVERFLOW: hidden;
13.    PADDING-TOP: 0px
14.}
15.
16.#vecherthemes LI {
17.    PADDING-RIGHT: 0px;
18.    PADDING-LEFT: 0px;
19.    PADDING-BOTTOM: 0px;
20.    MARGIN: 0px;
21.    OVERFLOW: hidden;
22.    PADDING-TOP: 0px
23.}
24.
25.#vecherthemes LI {
26.    PADDING-RIGHT: 0px;
27.    PADDING-LEFT: 0px;
28.    FLOAT: left;
29.    PADDING-BOTTOM: 0px;
30.    MARGIN: 0px 0px 0px 0px;
31.    WIDTH: 79px;
32.    PADDING-TOP: 0px;
33.    HEIGHT: 80px
34.}
35.
36.#themes LI {
37.    PADDING-RIGHT: 0px;
38.    PADDING-LEFT: 0px;
39.    PADDING-BOTTOM: 0px;
40.    MARGIN: 0px;
41.    OVERFLOW: hidden;
42.    PADDING-TOP: 0px
43.}
44.
45.#themes LI {
46.    PADDING-RIGHT: 0px;
47.    PADDING-LEFT: 0px;
48.    FLOAT: left;
49.    PADDING-BOTTOM: 0px;
50.    MARGIN: 0px 0px 0px 0px;
51.    WIDTH: 100px;
52.    PADDING-TOP: 0px;
53.    HEIGHT: 80px
54.}
55.
56.LI IMG {
57.    BORDER-RIGHT: #eee 1px solid;
58.    BORDER-TOP: #eee 1px solid;
59.    BORDER-LEFT: #eee 1px solid;
60.    BORDER-BOTTOM: #eee 1px solid
61.}
62.
63..highlightit img {
64.    border: 1px solid #ffffff;
65.}
66.
67..divhighlightit {
68.    border: 2px solid #B5BDC6;
69.}
70.
71..highlightit:hover img {
72.    border: 2px solid red;
73.}
74.
75.#vecherdoc {
76.    height: 101px;
77.    width: 433px;
78.    background-repeat: repeat-x
79.}
80.
81.#vecherinfo {
82.    PADDING-BOTTOM: 5px;
83.    margin-left: 1px;
84.    MARGIN: 0px auto;
85.    OVERFLOW: hidden;
86.    WIDTH: 433px;
87.    POSITION: relative;
88.}
89.
90.#vecherinfo A {
91.    DISPLAY: block;
92.    Z-INDEX: 100;
93.    BACKGROUND: #fff;
94.    COLOR: #333;
95.    POSITION: absolute;
96.    TOP: 10px;
97.    TEXT-DECORATION: none
98.}
99.
100.#vecherinfo A#nev-move-left {
101.    LEFT: -2px
102.}
103.
104.#vecherinfo A#nev-move-right {
105.    RIGHT: 5px
106.}
107.
108.#vecherinfo .vechermod {
109.    OVERFLOW: hidden
110.}
111.
112..vechermod {
113.    Text-Align: left;
114.    MARGIN: 0px auto;
115.    OVERFLOW: hidden;
116.    WIDTH: 390px;
117.    ZOOM: 1;
118.    POSITION: relative;
119.    margin-left: 18px;
120.}

以前我们站点也介绍过连续滚动的图片，但缺陷是有间断。如何制作连续不间断的播放滚动呢？

请参看制作方法：
　　先制作向上滚动的效果：
　　插入代码：

<base href="http://www.it365cn.com">
<div id=demo

style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>

<img src=http://www.blue1000.com/article/"images/LOGO_1.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/Flashempire.gif">
<img src=http://www.blue1000.com/article/"images/LOGO.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/5dmedia.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/macromedia.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/sucaiw.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/blueieda.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/HTMLcn.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/fwcn.gif">
</div>
<div id=demo2></div>
</div>

　　制作向下滚动的效果：
　　将上面“制作向上滚动的效果”中的红色字体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>

　　制作向左滚动的效果：
<base href="http://www.it365cn.com">
<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=http://www.blue1000.com/article/"images/LOGO_1.gif"><img

src=http://www.blue1000.com/article/"images/LOGO/Flashempire.gif"><img

src=http://www.blue1000.com/article/"images/LOGO.gif"><img

src=http://www.blue1000.com/article/"images/LOGO/5dmedia.gif"><img

src=http://www.blue1000.com/article/"images/LOGO/macromedia.gif"><img

src=http://www.blue1000.com/article/"images/LOGO/sucaiw.gif"><img

src=http://www.blue1000.com/article/"images/LOGO/blueieda.gif"><img

src=http://www.blue1000.com/article/"images/LOGO/HTMLcn.gif"><img

src=http://www.blue1000.com/article/"images/LOGO/fwcn.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>

　　制作向右滚动的效果：
　　将上面“制作向左滚动的效果”中的红色字体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实现图片的不间断连续滚动
------------------------------------------------------------------------------

--
好喜爱学习网 HaoXiAi.Net 分类：网站制作脚本语言来源：网络收集录入：管理员
------------------------------------------------------------------------------

•用javascript实现上下文字滚动特效•文字左右滚动的走马灯效果是一种非常容易实现的特效

，同样的，文字上下滚
•javascript面向对象技术实现树形控件•树形控件是一种人们熟悉的用户界面控件，广泛地用

来显示层次型数据。树形
•网页里嵌入javascript 验证空，汉字，字母，数字长度输入•首先,验证那个表

单:<formaction="orgInser
•用javascript操作word文档•1、向word中写入内容首先在word中设置书签，如书签名为book
　　制作的代码不给大家加注释了！代码中的图片大家都可以自己加上自己的超级连接，修改的

方法为：<a href="连接的地址" target=_blank><img src="替换

webdesign.chinaitlab.com/img/link.gif" width=图片宽度 height=图片高度

border="0"></a>

　　先制作向上滚动的效果：

<base href="替换www.webjx.com">
<div id=demo

style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>

<img src="替换webdesign.chinaitlab.com/img/link.gif">
<img src="替换webdesign.chinaitlab.com/img/link1.gif">
<img src="替换webdesign.chinaitlab.com/img/link2.gif">
<img src="替换webdesign.chinaitlab.com/img/link3.gif">
<img src="替换webdesign.chinaitlab.com/img/link4.gif">
</div>
<div id=demo2></div>
</div>

　　制作向下滚动的效果：

　　将上面“制作向上滚动的效果”中的红色字体Js部分替换成：

　　制作向左滚动的效果：　

<base href="替换www.webjx.com">
<div id=demo

style=overflow:hidden;height:33;width:200;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="替换

webdesign.chinaitlab.com/img/link.gif"><img src="替换

webdesign.chinaitlab.com/img/link1.gif"><img src="替换

webdesign.chinaitlab.com/img/link2.gif"><img src="替换

webdesign.chinaitlab.com/img/link3.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>

部分替换成： <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>

有什么问题请到中发表

<base href="http://www.okajax.com">
<div id=demo

style=overflow:hidden;height:33;width:200;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="/upimg/080623/121422243GP19458.gif"

onclick="javascript:window.open(this.src);" style="CURSOR: pointer"

onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"

onclick="javascript:window.open(this.src);" style="CURSOR: pointer"

onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"

onclick="javascript:window.open(this.src);" style="CURSOR: pointer"

onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"

onclick="javascript:window.open(this.src);" style="CURSOR: pointer"

onload="return imgzoom(this,550)">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>

【上篇】COM编程入门第二部分——深入COM服务器
【下篇】eclipse配置字体、背景颜色

作者: uplift

该日志由 uplift 于11年前发表在综合分类下，最后更新于 2013年05月30日.
转载请注明: 由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码

作者: uplift

书签

最新文章New

本站推荐

返回首页