快捷導(dǎo)航

jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼

更新時(shí)間：2015年10月12日 10:02:30 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼,可實(shí)現(xiàn)根據(jù)鼠標(biāo)位置進(jìn)行合理的判斷并顯示彈出層的功能,涉及jQuery鼠標(biāo)事件及頁面元素位置屬性的相關(guān)判定技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼。分享給大家供大家參考。具體如下：

這是一款jquery實(shí)現(xiàn)的智能彈出層效果，位置可以自適應(yīng)，當(dāng)層靠右邊顯示時(shí)自動往左移。初次運(yùn)行時(shí)請按F5刷新，載入遠(yuǎn)程jQuery后才能看到效果，點(diǎn)擊鼠標(biāo)左鍵，彈出層將出現(xiàn)，在最右邊點(diǎn)擊時(shí)層自動往左移。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/

具體代碼如下：

<!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="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">&nbsp;</div>
<div style="position:absolute;top:300px;left:300px"><span style="color:#f00;font-size:28px">請按F5刷新，才能看到效果，</span><br>點(diǎn)擊鼠標(biāo)左鍵，彈出層，<br>在最右邊點(diǎn)擊時(shí)層自動往左移</div>
<div class="wrap">
 <ul onmousedown="event.cancelBubble = true">
  <li>連江</li>
  <li>寧德</li>
  <li>福州</li>
  <li>廈門</li>
  <li>北京</li>
 </ul>
</div>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: