跪求源代码
qq_記憶錠格洅瞬僴_03242943
2016-11-07 14:58
有这节课的源代码嘛
1回答
-
- 慕九州9371693
- 2016-11-09 10:35:08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
}
.div{
width:360px;
background: #999;
margin:0 auto;
font-size: 0;
}
a{
width:100px;
height:100px;
text-align: center;
display:inline-block;
text-decoration: none;
font-size: 12px;
filter:alpha(opacity:100);
opacity:1;
position: relative;
background: #000;
}
.a{
margin:10px 15px;
}
.b{
margin:10px 0;
}
i{
position: absolute;
top:25px;
left:25px;
}
span{
display: block;
width:100px;
text-align: center;
color:orange;
position: absolute;
bottom: 0;
left:0;
}
img{
width:50px;
height:50px;
}
</style>
<script>
var eventUnit={
//添加句柄
addHanlder:function(element,type,hanlder){
if(element.addEventListener){
element.addEventListener(type,hanlder);
}else if(element.attachEvent){
element.attachEvent('on'+type,hanlder);
}else{
element['on'+type]=hanlder;
}
},
//删除句柄
removeHanlder:function(element,type,hanlder){
if(element.removeEventListener){
element.removeEventListener(type,hanlder);
}else if(element.detachEvent){
element.detachEvent('on'+type,hanlder);
}else{
element['on'+type]=null;
}
},
//获取事件本身
getEvent:function(event){
return event?event:window.event;
},
//获取事件类型click等事件
getType:function(event){
return event.type;
},
//获取事件目标
getElement:function(event){
return event.target.nodeName||event.srcElement.nodeName;
},
//阻止默认事件
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=true;
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
window.event.cancelBubble=true;
}
},
//获取元素style属性由于width，height等需parseInt(getStyle(element,attr))
getStyle:function(element,attr){
if(element.currentStyle){
return element.currentStyle[attr];
}else{
return getComputedStyle(element,false)[attr];
}
}
},
timer=null;
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json){
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(eventUnit.getStyle(obj,attr))*100);
}else{
icur=parseInt(eventUnit.getStyle(obj,attr));
}
var speed=(json[attr]-icur)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr]!=icur){
flag=false;
}
if(attr=='opacity'){
obj.style.opacity=(icur+speed)/100;
obj.style.filter='alpha('+(icur+speed)+')';
}else{
obj.style[attr]=(icur+speed)+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},10)
}
window.onload=function(){
var aLi=document.getElementsByTagName('a');
for(var i=0;i<aLi.length;i++){
eventUnit.addHanlder(aLi[i],'mouseenter',function(){
var _this=this.getElementsByTagName('i')[0];
startMove(_this,{top:0,opacity:0},function(){
_this.style.top=45+'px';
startMove(_this,{top:25,opacity:100})
})
})
}
}
</script>
</head>
<body>
<div class="div">
<a href="#" class="a"><i><img src="w.png" alt=""></i><span>1</span></a>
<a href="#" class="b"><i><img src="w.png" alt=""></i><span>2</span></a>
<a href="#" class="a"><i><img src="w.png" alt=""></i><span>3</span></a>
<a href="#" class="a"><i><img src="w.png" alt=""></i><span>4</span></a>
<a href="#" class="b"><i><img src="w.png" alt=""></i><span>5</span></a>
<a href="#" class="a"><i><img src="w.png" alt=""></i><span>6</span></a>
</div>
</body>
</html>
JS动画效果
113925 学习 · 1443 问题
相似问题