不同位置上弹窗变化
不同位置上彈窗變化 <!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div{display: block;border:2px solid darkseagreen;background-color: greenyellow;color: gray;font-size: 14px;width: 126px;height: 76px;position: absolute;padding: 5px;/*top: 14px;*//*left: 0px;*/}.top{display: block;position: absolute;top: -14px;left: 57px;border-bottom: 14px solid darkseagreen;border-left: 8px solid transparent;border-right: 8px solid transparent;}.right{display: block;position: absolute;right: -14px;top: 32px;border-bottom: 8px solid transparent;border-left: 14px solid darkseagreen;border-top: 8px solid transparent;}.left{display: block;position: absolute;left: -14px;top: 32px;border-bottom: 8px solid transparent;border-right: 14px solid darkseagreen;border-top: 8px solid transparent;}.bottom{display: block;position: absolute;bottom: -14px;left: 57px;border-top: 14px solid darkseagreen;border-left: 8px solid transparent;border-right: 8px solid transparent;}</style>
</head>
<body>
<!--/*在文檔中隨意點擊（充當(dāng)對按鈕的點擊）顯示彈框呈現(xiàn)樣式*/-->
<div><p>隨意點擊彈出我，看看我有什么不同？</p><span class="top"></span>
</div>
<script>
document.onclick = clickStat;
function clickStat() {//確定點擊位置var e = arguments[0] || window.event;var x = e.clientX;var y = e.clientY;var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var o = {top: (y),left: (x),bottom: (h-y),right: (w-x)};alert("w="+w+";h="+h+";left="+ o.left+";"+"top="+ o.top+";"+"right="+ o.right+";"+"bottom="+ o.bottom);//設(shè)置彈框顯示樣式var popdiv = document.getElementsByTagName('div')[0];var arrowSpan = document.getElementsByTagName('span')[0];var popdivStyle = document.defaultView.getComputedStyle(popdiv, null);var arrowSpanStyle = document.defaultView.getComputedStyle(arrowSpan, null);var popH = parseFloat(popdivStyle.height.slice(0,-2))+14;var popW = parseFloat(popdivStyle.width.slice(0,-2))+14;
// var arrowTop = parseFloat(arrowSpanStyle.top.slice(0,-2));
// var arrowLeft = parseFloat(arrowSpanStyle.left.slice(0,-2));//判斷彈框箭頭的方向和箭頭在彈框上的位置var topflag = 0,leftflag = 0,rightflag = 0,bottomflag = 0;if(o.bottom > popH){topflag = 1;if(o.right > popW && o.left <= popW){topflag = 0;leftflag = 1;}else if(o.right<=popW){topflag = 0;rightflag = 1;}else{topflag = 1;}}else{bottomflag = 1;}alert("topflag="+topflag+";leftflag="+leftflag+";rightflag="+rightflag+";bottomflag"+bottomflag);if(bottomflag){arrowSpan.setAttribute("class","bottom");popdiv.style.top = (o.top-popH)+"px";popdiv.style.left = o.left+"px";arrowSpan.style.top = "87px";}else if(leftflag){arrowSpan.setAttribute("class","left");popdiv.style.left = (o.left+14)+"px";if(o.top<40){popdiv.style.top = "0px";arrowSpan.style.top = (o.top-8)+"px";}else{popdiv.style.top = (o.top-40)+"px";arrowSpan.style.top = "32px";}}else if(rightflag){arrowSpan.setAttribute("class","right");popdiv.style.left = (o.left-popW-12)+"px";if(o.top<40){popdiv.style.top = "0px";arrowSpan.style.top = (o.top-8)+"px";}else{popdiv.style.top = (o.top-40)+"px";arrowSpan.style.top = "32px";}}else{arrowSpan.setAttribute("class","top");popdiv.style.top = (o.top+14)+"px";popdiv.style.left = o.left+"px";arrowSpan.style.top = "-14px";}// popdiv.style.display = popdiv.style.display=='none'?'block':'none';
//
}
</script>
</body>
</html>
?
posted on 2015-03-04 17:15 玲兒靈 閱讀(...) 評論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/jymz/p/4313852.html
總結(jié)
- 上一篇： IOS之同步请求、异步请求、GET请求、
- 下一篇： 开机黑屏 仅仅显示鼠标 电脑黑屏 仅仅有