<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>替代Marquee滚动效果</title>
<style type="text/css">
.Mar
{
margin:8px auto;
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 800px; /*页面滚动需要显示的宽度*/
}
.Mar img
{
border: 3px solid #F2F2F2;
width: 124px;
height: 93px;
}
.inMar
{
float: left;
width: 3500px; /*能在一行放下所有滚动的图片的总宽度*2 像素值或者百分比*/
}
</style>
</head>
<body>
<div id="Mar" class="Mar">
<div id="inMar" class="inMar">
<div id="Mar1" style="float:left;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="elephant.jpg"/><br /></td>
<td><img src="sunset.jpg"/><br /></td>
<td><img src="blue hills.jpg"/><br /></td>
</tr>
</table>
</div>
<div id="Mar2" style="float:left;">
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var speed = 1; //数字越小速度越快
var step = 2;//步进
var nImgWidth = 130;
var div = document.getElementById("Mar");
var div1 = document.getElementById("Mar1");
var div2 = document.getElementById("Mar2");
div2.innerHTML = div1.innerHTML;
function Marquee() {
//向右滚动
//if (div.scrollLeft <= 0)
//div.scrollLeft += div2.offsetWidth
//else {
//div.scrollLeft--
//}
//向左滚动
if(div.scrollLeft%nImgWidth == 0) {//每一张图片就停留,如果要连续就去掉这点代码
div.scrollLeft += step;
step = 0;
window.setTimeout("set(2)", 2000);
}
if (div2.offsetWidth - div.scrollLeft <= 0)
div.scrollLeft -= div1.offsetWidth
else {
div.scrollLeft += step;
}
}
var MyMarquee = setInterval(Marquee, speed);
div.onmouseover = function() { clearInterval(MyMarquee) };
div.onmouseout = function() { MyMarquee = setInterval(Marquee, speed) };
function set(i) {
i = parseInt(i);
step = i;
}
</script>
</body>
</html>
javascript-yingyong.rar_javascript
版权申诉
47 浏览量
2022-09-24
03:57:53
上传
评论
收藏 1.35MB RAR 举报
javascript-yingyong.rar （45个子文件） 
图片onmouseover.html 675B 各种函数.html 974B
动画2.html.bak 719B 当天时间信息.html 1KB 标题大小变化.html.bak 649B 错误显示.html.bak 0B 调用函数.html.bak 0B
图片滚动 
Sunset.jpg 70KB 图片滚动.html 3KB elephant.jpg 634KB Blue hills.jpg 28KB 图片滚动.html.bak 3KB Sunset.jpg 70KB 数组+调用函数.html 670B 动画2.html 702B 复杂的调用函数.html.bak 579B 复杂的调用函数.html 567B 各种函数.html.bak 983B elephant.jpg 634KB 按纽颜色变化.html 735B 字符检索 字符检索1.html.bak 714B 字符检索1.html 740B 循环函数.html 772B Blue hills.jpg 28KB 调用函数.html 691B 当天时间信息.html.bak 1KB 获取系统时间.条件语句.html 1014B 数据输入相当于C语言的scanf.html 471B 点击标题 错误显示.html.bak 614B 错误显示.html 614B 加密与解密 解密后的script脚本.html.bak 627B 用escape方式加密与解密.html.bak 1KB 加密处理过的script脚本.html 598B 用escape方式加密与解密.html 1KB 加密处理过的script脚本.html.bak 0B 解密后的script脚本.html 627B 用escape方式加密与解密.html.bak.bak 1KB 循环函数.html.bak 0B 标题大小变化.html 649B 按纽颜色变化.html.bak 735B 数组+调用函数.html.bak 0B 获取系统时间.html.bak 905B 图片onmouseover.html.bak 663B 数据输入相当于C语言的scanf.html.bak 502B 错误显示.html 754B资源评论
