您的位置：首页 > Web前端 > JavaScript

js滚动广告效果

2009-03-31 13:19 429 查看

上下翻滚的js滚动广告效果，通过js操作table的position来实现。

运行代码运行代码

<HTML>
<HEAD>
<title>test</title>
<style>
#g_div{
text-align:right;
overflow:hidden;
}
.b{
width:24px;
height:16px;
background:#737373;
font-size:14px;
font-weight:bold;
color:#fff;
text-decoration:none
margin-left:1px;
}
.b:hover{
width:24px;
height:16px;
background:#780001;
font-size:14px;
font-weight:bold;
color:#fff;
text-decoration:none;
margin-left:1px;
}
.bhover{
width:24px;
height:16px;
background:#780001;
font-size:14px;
font-weight:bold;
color:#fff;
text-decoration:none;
margin-left:1px;
}
</style>
</HEAD>
<BODY>
<div id="g_div" style="WIDTH:270px;HEIGHT:252px">
<a href="#" target="_blank">
<img id="g_img" style="BORDER-RIGHT:green 1px solid; BORDER-TOP:green 1px solid; FILTER:revealTrans(duration=1,transition=23); BORDER-LEFT:green 1px solid; WIDTH:266px; BORDER-BOTTOM:green 1px solid; HEIGHT:220px" src="http://zi.csdn.net/xian.gif">
</a>
<a href="http://www.baidu.com/" for="http://pic.moobol.com/user_pic//070910/news/071023/s/153210223.jpg" target="_blank">
Tip 1
</a>
<a href="http://www.126.com/" for="http://pic.moobol.com/user_pic//070213/hcwuzhanlong/071030/s/141331956.jpg" target="_blank">
Tip 2
</a>
<a href="http://mp3.baidu.com/" for="http://pic.moobol.com/user_pic//070910/news/071023/s/154419597.jpg" target="_blank">
Tip 3
</a>
<a href="http://post.baidu.com/" for="http://pic.moobol.com/user_pic//061013/keke/071030/s/173614548.jpg" target="_blank">
Tip 4
</a>
<a href="http://top.baidu.com/" for="http://pic.moobol.com/user_pic//070612/pengshaojun/071030/s/115630736.JPG" target="_blank">
Tip 5
</a>
</div>
</BODY>
</HTML>

<script language="JavaScript">
function f(){
var g_sec=5;
var g_items=new Array();
var g_div=document.getElementById("g_div");
var g_img=document.getElementById("g_img");
var g_imglink=g_img.parentElement;
var arr=g_div.getElementsByTagName("A");
var arr_length=arr.length;
var g_index=1;

var show_img=function(n){
if(//d+/.test(n)){
var prev=g_index+1;
g_index=n-1;
}
else{
var prev=(g_index>arr.length)?(arr_length-1):g_index+1;
g_index=(g_index<arr_length-2)?(++g_index):0;
}
if(document.all){
g_img.filters.revealTrans.Transition=23;
g_img.filters.revealTrans.apply();
g_img.filters.revealTrans.play();
}
arr[prev].className="b";
arr[g_index+1].className="bhover";
g_img.src=g_items[g_index].img.src;
g_img.title=g_items[g_index].txt;
g_imglink.href=g_items[g_index].url;
g_imglink.target=g_items[g_index].target;
}

for(var i=1;i<arr_length;i++){
g_items.push({txt:arr[i].innerHTML,
url:arr[i].href,
target:arr[i].target,
img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})
arr[i].title=arr[i].innerHTML
arr[i].innerHTML=[i," "].join("")
arr[i].className="b"
arr[i].onclick=function(){
event.returnValue=false;
show_img(event.srcElement.innerText)
}
}
show_img(1);
var t=window.setInterval(show_img,g_sec*1000)
g_img.onmouseover=function(){window.clearInterval(t)}
g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}
}
window.attachEvent("onload",f);
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function transition div javascript filter table

相关文章推荐

新的分享

章节导航