[JavaScript知识库] javascript节流器优化浮层，微信微博二维码弹出

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> javascript节流器优化浮层，微信微博二维码弹出 -> 正文阅读

[JavaScript知识库]javascript节流器优化浮层，微信微博二维码弹出

<!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>