<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 150px;
height: 150px;
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div id="icon" class="icon">
<ul class="icon">
<li class="weixin">微信</li>
<li class="weibo">微博</li>
</ul>
<div class="">
<img src="img/weixin.jpg" alt="">
<img src="img/weibo.jpg" alt="">
<span class="arrow"><em></em></span>
</div>
</div>
<script language="javascript">
var extend=function(target,source){
for(var property in source){
target[property]=source[property];
}
return target;
}
var throttle=function(){
var isClear=arguments[0],fn;
if(typeof isClear==='boolean'){
fn=arguments[1];
fn.__throttleID&&clearTimeout(fn.__throttleID);
}else{
fn=isClear;
param=arguments[1];
var p=extend({
context:null,
args:[],
time:300
},param);
arguments.callee(true,fn);
fn.__throttleID=setTimeout(function(){
fn.apply(p.context,p.args)
},p.time)
}
};
function $(id){return document.getElementById(id)}
function $tag(tag,container){
container=container||document;
return container.getElementsByTagName(tag);
}
var Layer=function(id){
this.container=$(id);
this.layer=$tag('div',this.container)[0];
this.lis=$tag('li',this.container);
this.imgs=$tag('img',this.container);
this.bindEvent();
}
Layer.prototype={
bindEvent:function(){
var that=this;
function hideLayer(){
that.layer.className='';
}
function showLayer(){
that.layer.className='show';
}
that.on(that.container,'mouseenter',function(){
throttle(true,hideLayer);
throttle(showLayer);
}).on(that.container,'mouseleave',function(){
throttle(hideLayer);
throttle(true,showLayer);
});
for(var i=0;i<that.lis.length;i++){
that.lis[i].index=i;
that.on(that.lis[i],'mouseenter',function(){
var index=this.index;
for(var i=0;i<that.imgs.length;i++){
that.imgs[i].className='';
}
that.imgs[index].className='show';
that.layer.style.left=-22+60*index+'px';
}).on(that.lis[i],'mouseleave',function(){
var index=this.index;
that.imgs[index].className='';
})
}
},
on:function(ele,type,fn){
ele.addEventListener?ele.addEventListener(type,fn,false):ele.attachEvent('on'+type,fn);
return this;
}
};
var icon=new Layer('icon');
</script>
</body>
</html>
|