jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果

jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果实现源码

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类： > jQuery插件难易：入门级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 10 积分

$(document).ready(function(){

	/* This code is executed on the document ready event */

	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:500, height:283 } },
		webpage	= $('#webpage'),
		offset	= { left: webpage.offset().left, top: webpage.offset().top },
		retina	= $('#retina');

	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		/*	Applying a special chrome curosor,
			as it fails to render completely blank curosrs. */
			
		retina.addClass('chrome');
	}
	
	webpage.mousemove(function(e){

		left = (e.pageX-offset.left);
		top = (e.pageY-offset.top);

		if(retina.is(':not(:animated):hidden')){
			/* Fixes a bug where the retina div is not shown */
			webpage.trigger('mouseenter');
		}

		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			/*	If we are out of the bondaries of the
				webpage screenshot, hide the retina div */

			if(!retina.is(':animated')){
				webpage.trigger('mouseleave');
			}
			return false;
		}

		/*	Moving the retina div with the mouse
			(and scrolling the background) */

		retina.css({
			left				: left - sizes.retina.width/2,
			top					: top - sizes.retina.height/2,
			backgroundPosition	: '-'+(1.6*left)+'px -'+(1.35*top)+'px'
		});
		
	}).mouseleave(function(){
		retina.stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
		retina.stop(true,true).fadeIn('fast');
	});
});

//html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果</title>
<meta name="description" content="jquery图片放大镜制作仿iphone苹果手机浏览网页图片文字放大查看效果，带放大镜查看图片文字放大预览效果。" />
</head>

<body>

<div id="main">

	<div id="iphone">
    	<div id="webpage">
			<img src="img/webpage.png" width="499" height="283" alt="Web Page" />
        	<div id="retina"></div>
        </div>
    </div>
    
</div>

<link rel="stylesheet" type="text/css" href="styles.css" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果 收藏

jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果
收藏