JavaScript特效：横向不间断滚动
2009-12-30 10:40
316 查看
<!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>
<title>横向不间断滚动图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="CopyRight" content="版权所有 枫叶随风" />
<meta name="Generator" content="Dreamweaver8" />
<meta name="Author" content="枫叶随风 QQ:455948725 E-mail:liukun615@126.com" />
<link rel="shortcut icon" href="http://www.fengyekun.com/favicon.ico" />
<style type="text/css">
<!--
body {font-family:"宋体", Arial, Helvetica, sans-serif; margin:0px; font-size:12px;}
h1 {margin:0px; height:95px; line-height:95px; color:#ff0000; text-align:center; font-size:20px; font-weight:bold;}
#main {width:100%;}
#content {position:relative; top:50%; margin:-150px auto; width:500px; height:300px; border:1px solid #999; background:#eee;}
#mydiv {width:480px; height:110px; overflow:hidden; border:10px solid #fff;}
#mydiv table td {text-align:center;}
#demo1 {width:480px; height:110px;}
#demo1,#demo2 {vertical-align:top;}
#demo1 img,#demo2 img {padding-right:10px; width:120px; height:90px; border:none;}
#demo1 a,#demo2 a {display:block; margin-top:5px;}
-->
</style>
<script language="javascript">
var Tid;
function MarqueeImage(Direction){
var speed=20;
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var mydiv = document.getElementById("mydiv");
demo2.innerHTML=demo1.innerHTML;
Tid=setInterval(Marquee,speed)
mydiv.onmouseover=function(){clearInterval(Tid)}
mydiv.onmouseout=function(){Tid=setInterval(Marquee,speed)}
function Marquee(){
if (Direction=="left"){
if(mydiv.scrollLeft==demo1.offsetWidth)
mydiv.scrollLeft=0;
else
mydiv.scrollLeft++;
}
if (Direction=="right"){
if(mydiv.scrollLeft==0)
mydiv.scrollLeft=demo1.offsetWidth;
else
mydiv.scrollLeft--;
}
}
}
</script>
</head>
<body onload="MarqueeImage('right'[或者left]);">
<div id="main">
<div id="content">
<h1>不间断滚动图片</h1>
<div id="mydiv">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="demo1">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="/TempFolder/1.jpg" /><a href="http://www.fengyekun.com">图片1</a></td>
<td><img src="/TempFolder/2.jpg" /><a href="http://www.fengyekun.com">图片2</a></td>
<td><img src="/TempFolder/3.jpg" /><a href="http://www.fengyekun.com">图片3</a></td>
<td><img src="/TempFolder/4.jpg" /><a href="http://www.fengyekun.com">图片4</a></td>
<td><img src="/TempFolder/5.jpg" /><a href="http://www.fengyekun.com">图片5</a></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
</div>
</div>
<script language="JavaScript">document.getElementById("main").style.height=document.documentElement.clientHeight+"px";</script>
</body>
</html>
实例演示：http://www.fengyekun.com/Study_704.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>横向不间断滚动图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="CopyRight" content="版权所有 枫叶随风" />
<meta name="Generator" content="Dreamweaver8" />
<meta name="Author" content="枫叶随风 QQ:455948725 E-mail:liukun615@126.com" />
<link rel="shortcut icon" href="http://www.fengyekun.com/favicon.ico" />
<style type="text/css">
<!--
body {font-family:"宋体", Arial, Helvetica, sans-serif; margin:0px; font-size:12px;}
h1 {margin:0px; height:95px; line-height:95px; color:#ff0000; text-align:center; font-size:20px; font-weight:bold;}
#main {width:100%;}
#content {position:relative; top:50%; margin:-150px auto; width:500px; height:300px; border:1px solid #999; background:#eee;}
#mydiv {width:480px; height:110px; overflow:hidden; border:10px solid #fff;}
#mydiv table td {text-align:center;}
#demo1 {width:480px; height:110px;}
#demo1,#demo2 {vertical-align:top;}
#demo1 img,#demo2 img {padding-right:10px; width:120px; height:90px; border:none;}
#demo1 a,#demo2 a {display:block; margin-top:5px;}
-->
</style>
<script language="javascript">
var Tid;
function MarqueeImage(Direction){
var speed=20;
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var mydiv = document.getElementById("mydiv");
demo2.innerHTML=demo1.innerHTML;
Tid=setInterval(Marquee,speed)
mydiv.onmouseover=function(){clearInterval(Tid)}
mydiv.onmouseout=function(){Tid=setInterval(Marquee,speed)}
function Marquee(){
if (Direction=="left"){
if(mydiv.scrollLeft==demo1.offsetWidth)
mydiv.scrollLeft=0;
else
mydiv.scrollLeft++;
}
if (Direction=="right"){
if(mydiv.scrollLeft==0)
mydiv.scrollLeft=demo1.offsetWidth;
else
mydiv.scrollLeft--;
}
}
}
</script>
</head>
<body onload="MarqueeImage('right'[或者left]);">
<div id="main">
<div id="content">
<h1>不间断滚动图片</h1>
<div id="mydiv">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="demo1">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="/TempFolder/1.jpg" /><a href="http://www.fengyekun.com">图片1</a></td>
<td><img src="/TempFolder/2.jpg" /><a href="http://www.fengyekun.com">图片2</a></td>
<td><img src="/TempFolder/3.jpg" /><a href="http://www.fengyekun.com">图片3</a></td>
<td><img src="/TempFolder/4.jpg" /><a href="http://www.fengyekun.com">图片4</a></td>
<td><img src="/TempFolder/5.jpg" /><a href="http://www.fengyekun.com">图片5</a></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
</div>
</div>
<script language="JavaScript">document.getElementById("main").style.height=document.documentElement.clientHeight+"px";</script>
</body>
</html>
实例演示：http://www.fengyekun.com/Study_704.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 创建符合web标准的javascript横向不间断滚动文字代码
- 不间断滚动图片Javascript特效讲解_Javascript教程
- 不间断图片横向滚动特效代码
- 网页特效:横向不间断滚动
- 横向不间断的文字滚动javascript
- JavaScript特效：纵向不间断滚动
- 不间断图片横向滚动特效代码
- 横向不间断滚动广告
- JavaScript实现一个最基本的图片无缝横向滚动效果
- javascript 不间断向左滚动图片
- JavaScript实现垂直向上无缝滚动特效
- JavaScript特效—滚动公告
- 使用javascript实现滚动特效
- Android横向滚动屏幕特效分析
- JavaScript不间断连续图片滚动效果
- 不间断无缝滚动代码(横向、…
- javascript 不间断的图片滚动并可点击
- --连续不间断横向滚动图片代码--
- android横向滚动屏幕特效分析
- JavaScript实现图片的不间断连续滚动