position用法总结_peaceful的用法
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
position用法总结_peaceful的用法,希望能够帮助你!!!。
position:relative日常应用的时候一般是设置给position:absolute;的父层的,
父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素…
比如要实现商品细节图展示的效果，可以使用如下的方法，这个例子很好的解释了position方法的使用。
这个页面中，右侧大的图片所在的div class="big"需要设置absolute的绝对定位，那它的父元素.box就必须设置relative相对定位。
左侧小图中的红色方块需要随着鼠标移动，因此也需要设置absolute的绝对定位。那么它的父元素.small就必须设置relative相对定位。
右侧div中的大图片需要随鼠标移动，因此它也需要设置absolute绝对定位，而它的父元素.big已经是absolute绝对定位了，因此大图片的定位是相对.big来的。大图片的坐标（0,0）的位置在右侧div的左上角的位置。
图中红色方块的移动方向和大图片的移动方向是相反并且成比例的。大图片的移动距离是方块移动距离的倍数。
<style type="text/css"> .box{
position: relative; } .small{
position: relative; width: 350px; height: 350px; border: solid 1px darksalmon; } .mask{
position: absolute; width: 80px;height: 80px; background-color: rgba(223,24,22,0.2); display: none; } .big{
position: absolute; left: 360px; top: 0px; border: solid 1px darksalmon; width: 400px;height: 400px; overflow: hidden; /*display: none;*/ } #bigimg{
position: absolute; left: 0px; top:0px; border: solid seagreen 1px; } </style> </head> <body> <div class="box"> <div id="small" class="small"> <img id="smallimg" src="img/small.jpg"/> <div id="mask" class="mask"> </div> </div> <div class="big" id="big"> <img id="bigimg" src="img/big.jpg" /> </div> </div> 这段代码实现商品细节图的页面框架设计
下面是javaScript的实现代码
<script type="text/javascript"> function $ (id) {
return document.getElementById(id) } $("small").onmouseover=function () {
$("mask").style.display="block" $("big").style.display="block" } $("small").onmouseout=function () {
$("mask").style.display="none" $("big").style.display="none" } $("small").onmousemove=function (e) {
var event = e ||window.event //鼠标在文档的位置 var pageX = event.pageX||event.clientX+document.documentElement.scrollLeft var pageY = event.pageY||event.clientY+document.documentElement.scrollTop //mask的位置 = 鼠标的位置-mask的一半宽度 var maskX = pageX - $("mask").offsetWidth/2 var maskY = pageY - $("mask").offsetHeight/2 //mask可以移动的范围 if (maskX<0) {
maskX=0 } else if(maskX>$("small").offsetWidth-$("mask").offsetWidth){
maskX=$("small").offsetWidth-$("mask").offsetWidth } if (maskY<0) {
maskY=0 } else if(maskY>$("small").offsetHeight-$("mask").offsetHeight){
maskY=$("small").offsetHeight-$("mask").offsetHeight } $("mask").style.left=maskX+"px" $("mask").style.top=maskY+"px" var bigImg = $("bigimg").offsetWidth-$("big").offsetWidth var mask = $("small").offsetWidth-$("mask").offsetWidth var rate = bigImg/mask //bigimg的坐标 $("bigimg").style.top = -rate*maskY+"px" $("bigimg").style.left= -rate*maskX+"px" console.log($("bigimg").style.top) } </script> 今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
最新文章
