[javascript]代码库
<!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>
<link href="css/base.css" type="text/css" rel="stylesheet" media="all" />
<style>
#demo {
margin:0 auto;
width:350px;
}
#wraper {
position:relative;
width:350px;
height:350px;
background:#fff url(images/loading.gif) no-repeat center center;
border:5px solid #fff;
}
#small {
width:350px;
height:350px;
overflow:hidden;
}
#mask {
display:none;
position:absolute;
left:0;
top:0;
z-index:2;
height:100px;
overflow:hidden;
width:100px;
border:1px dashed #999;
cursor:move;
}
#mask div {
background:#fff;
opacity:.4;
filter:alpha(opacity:40);
height:100px;
}
#big {
height:400px;
width:400px;
position:absolute;
top:-5px;
left:370px;
z-index:1;
border:5px solid #fff;
background:#fff url(images/loading.gif) no-repeat center center;
overflow:hidden;
}
#bg {
background:black;
position:absolute;
left:0;
top:0;
height:350px;
width:350px;
z-index:1;
opacity:0;
filter:alpha(opacity:0 );
}
#big img {
position:absolute;
left:0;
top:0;
z-index:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用Aui-core实现图片放大镜预览js特效(仿京东商城商品放大预览)</title>
<script src="js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
<script>
Aui.ready( function()
{
var oDemo = Aui( "#demo" );
var opt = {
smallSrc : "http://www.jq-school.com/upload/small.jpg",
smallWidth : 350,
smallHeight : 350,
bigSrc : "http://www.jq-school.com/upload/big.jpg",
bigWidth : 800,
bigHeight : 800
};
var oWin = Aui( window );
var owraper = Aui( "#wraper" )
var oSmall = Aui( "#small" );
var oBig = Aui( "#big" );
var obg = Aui( "#bg" );
var oMask = Aui( "#mask" );
var oBigImg = null;
var oBigImgWidth = opt.bigWidth;
var oBigImgHeight = opt.bigHeight;
var iBwidth = oBig.width();
var iBheight = oBig.height();
oBig.setStyle( "display", "none" );
var iTop = owraper.top();
var iLeft = owraper.left();
var iWidth = owraper.width();
var iHeight = owraper.height();
var iSpeed = 200;
var setOpa = function( o )
{
o.style.cssText = "opacity:0;filter:alpha(opacity:0);"
return o;
};
var imgs = function( opt )
{
if( Aui.typeOf( opt ) !== "object" ) return false;
var oBig = new Image();
oBig.src = opt.bigSrc;
oBig.width = opt.bigWidth;
oBig.height = opt.bigHeight;
var oSmall = new Image();
oSmall.src = opt.smallSrc;
oSmall.width = opt.smallWidth;
oSmall.height = opt.smallHeight;
oBigImg = Aui( oBig );
return {
bigImg : setOpa( oBig ),
smallImg : setOpa( oSmall )
};
};
var append = function( o, img )
{
o.append( img );
Aui( img ).fx(
{
opacity : 1
}, iSpeed*2, null , function()
{
this.style.cssText = "";
});
};
var eventMove = function( e )
{
var e = e || window.event;
var w = oMask.width();
var h = oMask.height();
var x = e.clientX - iLeft + oWin.scrollLeft() - w/2;
var y = e.clientY - iTop + oWin.scrollTop() - h/2;
var l = iWidth - w - 10;
var t = iHeight - h - 10;
if( x < 0 )
{
x = 0;
}
else if( x > l )
{
x = l;
};
if( y < 0 )
{
y = 0;
}
else if( y > t )
{
y = t;
};
oMask.setStyle(
{
left : x < 0 ? 0 : x > l ? l : x,
top : y < 0 ? 0 : y > t ? t : y
});
var bigX = x / ( iWidth - w );
var bigY = y / ( iHeight - h );
oBigImg.setStyle(
{
left : bigX * ( iBwidth - oBigImgWidth ),
top : bigY * ( iBheight - oBigImgHeight )
});
return false;
};
var eventOver = function()
{
oMask.show();
obg.stop()
.fx(
{
opacity : .1
}, iSpeed );
oBig.show()
.stop()
.fx(
{
opacity : 1
}, iSpeed/2 );
return false;
};
var eventOut = function()
{
oMask.hide();
obg.stop()
.fx(
{
opacity : 0
}, iSpeed/2);
oBig.stop()
.fx(
{
opacity : 0
}, iSpeed, null, function()
{
Aui( this ).hide();
});
return false;
};
var _init = function( object, oB, oS, callback )
{
var num = 0;
oBig.setStyle( "opacity",0 );
append( oB, object.bigImg );
append( oS, object.smallImg );
object.bigImg.onload = function()
{
num += 1;
if( num === 2 )
{
callback.call( object.smallImg );
};
};
object.smallImg.onload = function()
{
num += 1;
if( num === 2 )
{
callback.call( object.smallImg );
};
};
};
// 初始化 继续写
_init( imgs( opt ), oBig, oSmall, function()
{
//绑定事件
oWin.resize( function()
{
iTop = owraper.top();
iLeft = owraper.left();
iWidth = owraper.width();
iHeight = owraper.height();
});
oSmall.hover( eventOver, eventOut )
.mousemove( eventMove );
});
});
</script>
</head>
<body>
<h1>Adam ' Aui 放大镜 DEMO( 鼠标移到图片上试试 )</h1>
<div id="demo">
<div id="wraper">
<div id="small"> <span id="mask">
<div></div>
</span> <samp id="bg"></samp> </div>
<div id="big"> </div>
</div>
</div>
</body>
</html>
[代码运行效果截图]
[源代码打包下载]