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

封装js运动函数

2016-10-11 08:32 423 查看

//js封装函数

function getstyle(obj, name) {

if(obj.currentStyle) {
return obj.currentStyle[name];
//ie浏览器获取非行间样式的值
} else {
return getComputedStyle(obj, false)[name];
//非ie浏览器获取非行间样式的值
}

}

//var timer1=null;

function move(obj, json, fn) {
//var oOne=document.getElementById('one');

clearInterval(obj.timer);
obj.timer = setInterval(function() {
var stop = true;
for(var i in json) { //i为json里面的属性名称，json[i]表示json里面属性名称对应的值;
//var at=parseInt(getstyle(obj,att));
var at = 0;
if(i == 'opacity') {
at = Math.round(parseFloat(getstyle(obj, i)) * 100);
} else {
at = parseInt(getstyle(obj, i));
}

var speed = (json[i] - at) / 10;
speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);

if(at != json[i]) {
stop = false;
}

//obj.style[att]=at+speed+'px';
if(i == 'opacity') {
obj.style.opacity = (at + speed) / 100;
obj.style.filter = 'alpha(opacity:' + (at + speed) + ')';
document.getElementById('tex').value = obj.style.opacity;
} else {
obj.style[i] = at + speed + 'px';
}

}
if(stop) {
clearInterval(obj.timer);
if(fn) {
fn()
}
}
}, 30);
}

//html部分

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
ol{
position: absolute;
right: 170px;
bottom: 7px;
z-index: 20;
}
ol li {
width: 20px;
height: 20px;
border: 1px solid #c47d3f;
text-align: center;
float: left;
margin-left: 3px;
background-color: #f7f1cf;
font-size: 9px;
font-weight: bold;
line-height: 20px;
border-radius: 20px;
}

ol li a {
color: #ac6935;
}
.box{width: 470px;height: 150px;margin: 150px 0 0 400px;background-color: yellow;position: relative;overflow: hidden;}
.active a{color: #fff;}
.active{background-color: #efbc3f;}
#ul_img{position: absolute;top: 0;left: 0;z-index: 10;width: 2350px;height: 150px;}
#ul_img li{float: left;}
#ul_img img{display: block;}
</style>
<script type="text/javascript" src="../js/js.js"></script>
<script type="text/javascript">
window.onload=function(){
var oNumber=document.getElementById('number');
var aLi1=oNumber.getElementsByTagName('li');
var oUl_img=document.getElementById('ul_img');
var aLi2=oUl_img.getElementsByTagName('li');
var oBox=document.getElementById('box');
var now=0;
var timer=null;
for(var i=0;i<aLi1.length;i++){
aLi1[i].index=i;//给每个li添加一个下标
aLi1[i].onclick=function(){
now=this.index;//鼠标点击的时候，将点击的那个li的下标赋值给now
tab();
};
}
function tab(){
for(var i=0;i<aLi1.length;i++){
aLi1[i].className='';
}
aLi1[now].className='active';//aLi1[now]等于aLi1[this.index],但是此时ali已经不是在onclick事件里面，所以不能运用this,声明now变量的作用就在这里
move(oUl_img,{left:-470*now})
}
function next(){
now++;
if(now==aLi2.length){
now=0;
}
tab();
}
timer=setInterval(next,3000);
};
</script>
</head>

<body>
<div class="box" id="box">
<ol id="number">
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
</ol>
<ul id="ul_img">
<li>
<a href="#"><img src="../img/10.jpg" /></a>
</li>
<li>
<a href="#"><img src="../img/13.jpg" /></a>
</li>
<li>
<a href="#"><img src="../img/14.jpg" /></a>
</li>
<li>
<a href="#"><img src="../img/15.jpg" /></a>
</li>
<li>
<a href="#"><img src="../img/16.jpg" /></a>
</li>
</ul>
</div>
</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航