7,765
社区成员
发帖
与我相关
我的任务
分享
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<style>
*
{
margin: 0;
padding: 0;
}
.zoomple
{
cursor: crosshair;
display: block;
width: 150px;
height: 150px;
overflow: hidden;
outline-style: none;
position: relative;
border: 1px solid #aaa;
}
.zoomple img
{
width: 150px;
height: 150px;
border: 0;
}
.zoomplePopup
{
background: #fff;
overflow: hidden;
opacity: 0.5;
filter: alpha(opacity = 50);
z-index: 10;
cursor: crosshair;
height: 40px;
width: 40px;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
/*预览的大图的css*/
#preview
{
border: 1px solid #aaa;
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 300px;
overflow: hidden;
display: none;
}
#preview img
{
width: 600px;
height: 600px;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
$(function () {
var zoompos = { x: 0, y: 0 }; //定义一个对象,缓存x,y变量.
var $pre = $("#preview");
var $preimg = $("#preview img");
var p_w = parseInt($preimg.css("width"), 10); //这里不能使用 $preimg.width(). width()方法对隐藏元素无效
var p_h = parseInt($preimg.css("height"), 10);
$(".zoomple").bind("mouseenter", function (e) {
var $this = $(this);
var $zoom = $this.find(".zoomplePopup");
$zoom.show();
$pre.show();
PositionPopupZoom($this, $zoom, e.pageX, e.pageY, p_w, p_h);
$this.bind("mousemove", function (e) {
setTimeout(function () {
PositionPopupZoom($this, $zoom, e.pageX, e.pageY, p_w, p_h);
}, 10);
});
}).bind("mouseleave", function () {
var $this = $(this);
var $zoom = $this.find(".zoomplePopup");
$zoom.hide();
$pre.hide();
$this.unbind("mousemove");
});
/*
wrap : 当前绑定的元素
zoom : 当前绑定的元素里的popupzoom元素
x, y : 当前鼠标在页面上的位置
w, h : 放大的图片的高度和宽度,用来计算比例
*/
function PositionPopupZoom(wrap, zoom, x, y, w, h) {
var wrapLeft = wrap.offset().left;
var wrapTop = wrap.offset().top;
var zoomWidth = zoom.width();
var zoomHeight = zoom.height();
var wrapWidth = wrap.width();
var wrapHeight = wrap.height();
//计算半透明层的x,y.确定它不超出图片
zoompos.x = x - wrapLeft - (zoomWidth / 2);
zoompos.y = y - wrapTop - (zoomHeight / 2);
if (zoompos.x <= 0) {
zoompos.x = 0;
}
if (zoompos.y <= 0) {
zoompos.y = 0;
}
if (zoompos.x + zoomWidth >= wrapWidth) {
zoompos.x = wrapWidth - zoomWidth;
}
if (zoompos.y + zoomHeight >= wrapHeight) {
zoompos.y = wrapHeight - zoomHeight;
}
//放大比例
var xRatio = w / wrapWidth;
var yRatio = h / wrapHeight;
//设置位置
zoom.css({ left: zoompos.x, top: zoompos.y });
$preimg.css({ left: -(zoompos.x * parseInt(xRatio, 10)), top: -(zoompos.y * parseInt(yRatio, 10)) });
}
});
</script>
</head>
<body>
<div style="width: 500px; margin: 20px auto;">
<a href="img/t_big.jpg" class="zoomple">
<img src="img/t.jpg" />
<div class="zoomplePopup">
</div>
</a>
<div id="preview">
<img src="img/t_big.jpg" />
</div>
</div>
</body>
</html>
<style type="text/css">
#div1 { width: 120px; height: 90px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 120px; height: 90px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
}
return aTmp;
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];
var oFloat=getByClass(oDiv, 'float_layer')[0];
var oBig=getByClass(oDiv, 'big_pic')[0];
var oSmall=getByClass(oDiv, 'small_pic')[0];
var oImg=oBig.getElementsByTagName('img')[0];
oMark.onmouseover=function ()
{
oFloat.style.display='block';
oBig.style.display='block';
};
oMark.onmouseout=function ()
{
oFloat.style.display='none';
oBig.style.display='none';
};
oMark.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
if(l<0)
{
l=0;
}
else if(l>oMark.offsetWidth-oFloat.offsetWidth)
{
l=oMark.offsetWidth-oFloat.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>oMark.offsetHeight-oFloat.offsetHeight)
{
t=oMark.offsetHeight-oFloat.offsetHeight;
}
oFloat.style.left=l+'px';
oFloat.style.top=t+'px';
var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
};
};
</script>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="wall_s6.jpg" /></div>
<div class="big_pic"><img src="wall6.jpg" /></div>
</div>
</body>
</html>