用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - javascript代码库

用Aui-core实现图片放大镜预览js特效（仿京东商城商品放大预览）

2013-01-19 作者： 小蜜锋举报

[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>

[代码运行效果截图]


用Aui-core实现图片放大镜预览js特效（仿京东商城商品放大预览）

[源代码打包下载]




网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...