最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/js/1110.html 二当家的 2017-02-06 14:11浏览(947)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果
分类: > jQuery插件 难易:入门级
查看演示 下载资源: 8

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1110.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2