跪求源代碼
? ?有這節(jié)課的源代碼嘛
qq_記憶錠格洅瞬僴_03242943
2016-11-07
1 回答
舉報(bào)
0/150
提交
取消
2016-11-09
<!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;
? ? },
? ? //獲取事件目標(biāo)
? ? getElement:function(event){
? ? ? ? return event.target.nodeName||event.srcElement.nodeName;
? ? },
? ? //阻止默認(rèn)事件
? ? 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>