<!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">
<!--把下面代码加到之间-->
<style type="text/css">
a{display:block;font-size:15px;height:18px;line-height:18px;text-decoration:none;color:#333;font-family:Arial;font-size:12px; border-bottom:1px solid #aaa;}
.shell{float:left;border-left:1px solid #aaa;width:400px;padding:0px 2px 0px 20px;overflow:hidden;}
.core{height:190px;position:relative;overflow:hidden;}
#core-absolute{}
.imgBox{}
.imgBox img{width:400px;height:190px;padding:0;margin:0;display:block;}
</style>
</head>
<body>
说明:一轮结束后从头开始。<br><br>
<!--把下面代码加到<body>与</body>之间-->
<div class="imgBox" id="imgBox" style="height:190px;width:400px;overflow:hidden;float:left;">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
<img alt="jquery仿flash 个性实用的图片联动标题效果" src="#">
</div>
<div class="shell">
<div class="core">
<a href="javascript:">图片说明一</a>
<a href="javascript:">图片说明二</a>
<a href="javascript:">图片说明三</a>
<a href="javascript:">图片说明四</a>
<a href="javascript:">图片说明五</a>
<a href="javascript:">图片说明六</a>
<a href="javascript:">图片说明七</a>
<a href="javascript:">图片说明八</a>
<a href="javascript:">图片说明九</a>
<a href="javascript:">图片说明十</a>
<div id="core-absolute" style="position:absolute;z-index:2;width:400px;height:17px;border:1px solid #000;left:0;top:0px;"></div>
</div>
</div>
<script language="javascript">
function linkage(imgB,coreD,wtime){
var imgBox=document.getElementById(imgB);
var coreD=document.getElementById(coreD);
can=true;
coreD.οnmοuseοver=function(){can=false};
coreD.οnmοuseοut=function(){can=true}
var Max=parseInt(imgBox.scrollHeight/2);
new function(){
var Stop=parseInt(coreD.style.top)%19==0&&!can;
if(!Stop){
var x= parseInt(coreD.style.top);
x==171?(x=0,coreD.style.top=0+"px",imgBox.scrollTop=0):(imgBox.scrollTop+=10,x++,coreD.style.top=x+"px");
}
setTimeout(arguments.callee,parseInt(coreD.style.top)%19?10:wtime)
}
}
linkage("imgBox","core-absolute",3000);
</script>
</body>
</html>
jqeury仿flash图片联动标题效果
最新推荐文章于 2024-09-04 20:18:34 发布