js 运动方法

最新推荐文章于 2022-11-16 19:39:03 发布

mll881128

最新推荐文章于 2022-11-16 19:39:03 发布

阅读量150

点赞数

分类专栏： js 文章标签： js 运动

本文链接：https://blog.csdn.net/mll881128/article/details/84437435

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂</title>
<style type="text/css" >

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }

body { background: #ecfaff; }

.play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }

.play .text {width:100%; position:absolute; left:0; bottom:0; height:60px;}
.play .text div {position:absolute; left:0; top:0; width:100%; height:100%; background:black; filter:alpha(opacity:40); opacity:0.4; z-index:99;}
.play .text span {position:absolute; left:0; top:0; width:100%; height:100%; line-height:60px; color:white; z-index:999; text-align:center; font-size:20px;}

ol { position: absolute; right: 5px; bottom: 5px; z-index: 99999; }
ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }

ul { position: absolute; top: 0; left: 0; z-index: 1; }
ul li { width: 470px; height: 150px; float: left; }
ul img { float: left; width: 470px; height: 150px; }
</style>

<script >
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function move(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop =true;
for(var attr in json)
{
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr));
}
var speed =(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opcity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
},30);
}

function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{//IE
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}

</script>
<script>
window.οnlοad=function()
{
var oDiv=document.getElementById('play');
var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUl=oDiv.getElementsByTagName('ul')[0];
var now=0;
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].οnclick=function(){
now=this.index;
tab();
}
}
function tab()
{
for(var i=0;i<aBtn.length;i++){
aBtn[i].className="";
}
aBtn[now].className='active';
move(oUl,{top:-150*now});
}
function next()
{
now++;
if(now==aBtn.length)
{
now=0;
}
tab();
}
var timer=setInterval(next,1000);
oDiv.οnmοuseοver=function()
{
clearInterval(timer);
}
oDiv.οnmοuseοut=function()
{
timer=setInterval(next,1000);
}
};
</script>
</head>
<body>
<div class="play" id="play">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="../images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="../images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="../images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="../images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="../images/5.jpg" alt="广告五" /></a></li>
</ul>
</div>
</body>
</html>

mll881128

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 运动方法

淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂 * { padding: 0; margin: 0; } li { list-style: none; } img { border: none; } body { backgroun...
复制链接

扫一扫

专栏目录