jquery lapisan pop timbul mudah lapisan terapung code

jquery lapisan pop timbul mudah lapisan terapung code_jquery

WBOY

Lepaskan： 2016-05-16 16:02:03

asal

1368 orang telah melayarinya

lapisan pop timbul pintar jquery, kedudukannya boleh disesuaikan, dan ia akan bergerak ke kiri secara automatik apabila lapisan itu dipaparkan di sebelah kanan. Sila tekan F5 untuk menyegarkan apabila dijalankan buat kali pertama Kesannya hanya boleh dilihat selepas memuatkan jQuery jauh Klik butang kiri tetikus dan lapisan pop timbul akan muncul bergerak ke kiri.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery弹出层浮动层代码</title>
<script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<style>
*{ margin:0; padding:0}
body{ margin:0; padding:0; font-size:12px}
ul,li{ list-style:none}
ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background:#fff;}
li{height:23px;line-height:23px;cursor:default; padding:0 0 0 10px}
li.current{background:#eee}
.wrap{ width:158px; background:#eee; position:absolute;}
</style>
<script type="text/javascript">
$(function(){
$(".wrap").hide();
var objW=$(".wrap").width();
var objH=$(".wrap").height();
$(document).mousedown(function(e){
var selfX=objW+e.pageX;
var selfY=objH+e.pageY
var bodyW=document.documentElement.clientWidth+document.documentElement.scrollLeft;
var bodyH=document.documentElement.clientHeight+document.documentElement.scrollTop;
if(selfX>bodyW && selfY>bodyH){
$(".wrap").css({top:(bodyH-objH),left:(bodyW-objW)}).show();
}else if(selfY>bodyH){
$(".wrap").css({top:(bodyH-objH),left:e.pageX}).show();
}else if(selfX>bodyW){
$(".wrap").css({top:e.pageY,left:(bodyW-objW)}).show();
}else{
$(".wrap").css({top:e.pageY,left:e.pageX}).show();
}
})
$("li").hover(function(){
$(this).addClass("current");
},function(){
$(this).removeClass("current");
}).click(function(){
alert($(this).text())
$(this).parent().parent().hide();
})
})
</script>
</head>
<body>
<div style="height:800px;width:900px"> </div>
<div style="position:absolute;top:300px;left:300px"><span style="color:#f00;font-size:28px">请按F5刷新，才能看到效果，</span><br>点击鼠标左键，弹出层，<br>在最右边点击时


层自动往左移</div>
<div class="wrap">
<ul onmousedown="event.cancelBubble = true">
<li>连江</li>
<li>宁德</li>
<li>福州</li>
<li>厦门</li>
<li>北京</li>
</ul>
</div>
</body>
</html>

Salin selepas log masuk

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini, saya harap anda akan menyukainya.