如何在HTML中实现图片的滚动效果
注释：
1) scrollAmount。它表示速度，值越大速度越快。
2) 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。
给滚动图片加超链接
用<a href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。例子如下：
<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="链接网址"><img src="图片网址" border=0></a></MARQUEE>
图片从右到左滚动
<MARQUEE width=宽 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="图片地址 "><img src="图片地址 ">···</MARQUEE>
图片从下到上滚动
<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址 "><img src="图片网址 ">···</marquee>
带有超链接的图片实现滚动效果
<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="连接地址"><img src="http://图片地址" idth="88" height="33" border="0"></a><a target="cont" href="连接地址"><img src="图片地址" width="88" height="33" border="0"></a></marquee>
素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，小编也准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。
打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。
切换至代码编辑界面，输入如下代码：
<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>
新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。
在新建的样式表文件"MyStyle.css”文件中输入如下代码：
* { padding:0; margin:0;} /*设置所有对像的内边距为0*/
body { text-align:center;} /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9
之所以减去9是第6张图片的右边留白 */
width:681px;
/* 图片的宽度（包含高度、padding、border）
计算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份将被隐藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
在网页文件"index.html"中添加对该样式表的引用：
<link rel="stylesheet" type="text/css" href="MyStyle.css">
新建一个JS文件，并将该文件另存为“MoveEffect.js"。
在”MoveEffect.js“文件中输入如下所示代码：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //获得每个img容器的宽度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //数值越大越慢
ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};
然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。
<script type="text/javascript" src="MoveEffect.js"></script>
打开“index.html”网页文件，最终效果如果所示：
|
广告 您可能关注的内容 |
