 |
热门文章 |
|
|
|
|
| 兼容各种浏览器且可控制滚动方向的图片展示效果 |
| 来源：中国站长天空 更新时间：2010/8/11 14:56:21 阅读次数： 我要投稿 |
|
<!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">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
a{color:#333333;background:none;text-decoration:none;font:12px 宋体;}
img{border:none;margin:0px;}
#outer{border:1px solid #CCCCCC;height:172px;width:585px;background:#990000;position:relative;padding-top:10px;overflow:hidden;}
#left{width:40px;display:block;float:left;height:162px;position:absolute;left:10px;z-index:2;opacity:0.05;filter:alpha(opacity=5);overflow:hidden;}
#right{width:40px;display:block;float:left;height:162px;position:absolute;left:535px;z-index:2;overflow:hidden;opacity:0.05;filter:alpha(opacity=5);}
#demo{overflow:hidden;width:565px;height:162px;float:left;margin:0 10px;position:absolute;z-index:0;}
.listname{height:156px;display:block;line-height:27px;text-align:center;padding:0 3px;border-left:1px solid #990000;border-right:1px solid #990000;}
.listimage{width:150px;height:130px;}
</style>
<script type="text/javascript" language="javascript">
window.onload=function(){
function getElement(id){
return document.getElementById(id);
}
var speed=30
var demo=getElement("demo");
var demo2=getElement("demo2");
var demo1=getElement("demo1");
demo2.innerHTML=demo1.innerHTML//复制demo1中的图片到demo2中
function Marqueeleft(){//向左滚动
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else
demo.scrollLeft++
}
function Marqueeright(){//向右滚动
if(demo2.offsetWidth-demo.scrollLeft>=565)
demo.scrollLeft+=demo1.offsetWidth
else
demo.scrollLeft--
}
var MyMar=setInterval(Marqueeleft,speed)//自动开始滚动
Direction='Left';//设定初始方向为向左滚
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {
if(Direction=='Left'){
MyMar=setInterval(Marqueeleft,speed)
}else if(Direction=='Right'){
MyMar=setInterval(Marqueeright,speed)
}
};
getElement('left').onclick=function(){
clearInterval(MyMar);
MyMar=setInterval(Marqueeleft,speed)
Direction='Left';
};
getElement('left').onmouseover=function(){
this.style.opacity=0.3;
this.style.filter='alpha(opacity=30)';
}
getElement('left').onmouseout=function(){
this.style.opacity=0.05;
this.style.filter='alpha(opacity=5)';
}
getElement('right').onclick=function(){
clearInterval(MyMar);
MyMar=setInterval(Marqueeright,speed)
Direction='Right';
};
getElement('right').onmouseover=function(){
this.style.opacity=0.3;
this.style.filter='alpha(opacity=30)';
}
getElement('right').onmouseout=function(){
this.style.opacity=0.05;
this.style.filter='alpha(opacity=5)';
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="outer">
<a href="#nogo" hidefocus id="left"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591341.png"></a>
<div id="demo" >
<table width="565px" border="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td id="demo1" valign="top">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top" >
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
<td align="center" style="border:1px solid #FFFFFF;"><div><a href="#nogo" class="listname"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591367.jpg" class="listimage">时尚新潮</a></div></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<a href="#nogo" hidefocus id="right"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114591333.png"></a>
</div>
</body>
</html> |
| 特效说明： |
兼容各种浏览器且可控制滚动方向的图片展示效果
用到的图片：
  
|
|
| 上一篇文章： 很酷的仿Flash图片幻灯切换效果下一篇文章： 淘宝男人画报焦点图代码 |
|
|
|
注册 登录
