提示：您可以先修改部分代码再运行
js+div 弹出层城市切换代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js+div 弹出层城市切换代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html{margin:0;padding:0;font-size:12px;font: 12px/1.5 arial;background:#A2DDEF;}
#head{background:#454545;height:110px;}
.shell{margin:20px 0 0 50px;}
.shell strong{background:#606060;color:#eee;font-size:16px;padding: 5px 20px;margin-left:60px;}
.shell span{color:#fff;font-size:12px;margin-left:10px;cursor:pointer;}
#logo img{border:none;}
#menu{position:absolute;background:#515151;color:#eee;padding:4px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu li a{display:block;font-size:14px;color:#fff;text-decoration:none;zoom:1}
#menu li a:hover,#menu li.focus a{background:#606060;}
#menu li{float:left;display:inline;width:78px;line-height :25px;text-align:center;margin-left:4px;}
#menu ul{border-bottom:1px dashed #666;float:left;padding:5px;width:340px;}
.menufoot{clear:both;text-align:right;padding:10px;}
.menufoot a{color:#339999;text-decoration:none;padding:5px 10px;}
.menufoot a:hover{background:#606060;color:#339999;text-decoration:none;}
.nav{background:#44ABAF;height:70px;border-top:4px solid #338888;}
</style>
</head>
<body>
<div id="head">
<div class="shell"><a href="###" id="logo"><img src="http://www.meituan.com/static//css/i/logo.gif" alt="" /></a>
<strong>深圳</strong><span id="menuBtn">切换城市</span></div>
</div>
<div class="nav"></div>
<div id="menu" style="display:none;">
<ul>
<li><a href="" >北京</a></li>
<li><a href="" >上海</a></li>
<li><a href="" >武汉</a></li>
<li><a href="" >广州</a></li>
<li class="focus"><a href="" >深圳</a></li>
<li><a href="" >杭州</a></li>
<li><a href="" >南京</a></li>
<li><a href="" >成都</a></li>
<li><a href="" >天津</a></li>
<li><a href="" >西安</a></li>
<li><a href="" >福州</a></li>
<li><a href="" >重庆</a></li>
<li><a href="" >厦门</a></li>
<li><a href="" >青岛</a></li>
<li><a href="" >大连</a></li>
</ul>
<div class="menufoot"><a href="" >其它城市?</a></div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
ldh={
get:function (el){
return typeof el=="string"?document.getElementById(el):el;
},
on:function(el,type,fn){
el=this.get(el);
el.attachEvent?
el.attachEvent('on'+type,function(){fn.call(el,event)}):
el.addEventListener(type,fn,false);
return this
},
align:function (el,el2,x,y){
var rect=this.get(el2).getBoundingClientRect(),x=x||0,y=y||0;
el.style.top=rect.top+this.get(el2).offsetHeight+y+'px';
el.style.left=rect.left+x+'px'
},
stop:function (e){
e=e||window.event;
e.stopPropagation&&e.stopPropagation();
e.cancelBubble=true
},
onblur:function(el,fn) {
el=this.get(el);
this.on(el,'click',function (e){
ldh.stop()
}).on(document, 'click',function(e) {
el.style.display='none';
});
return this
}
};
ldh.onblur('menu').on('menuBtn','click',function (){
var css=ldh.get('menu').style;
if(css.display!='none')return ;
ldh.align(ldh.get('menu'),this,-85,10);
css.display= 'block';
ldh.stop();
})
//]]>
</script>
</html>
提示：您可以先修改部分代码再运行