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

2当家的 发布于 2017/02/08 09:40
阅读 273
收藏 0

演示下载地址:http://www.erdangjiade.com/js/1110.html
 

Js代码

  1. $(document).ready(function(){   
  2.    
  3.     /* This code is executed on the document ready event */   
  4.    
  5.     var left    = 0,   
  6.         top        = 0,   
  7.         sizes    = { retina: { width:190, height:190 }, webpage:{ width:500, height:283 } },   
  8.         webpage    = $('#webpage'),   
  9.         offset    = { left: webpage.offset().left, top: webpage.offset().top },   
  10.         retina    = $('#retina');   
  11.    
  12.     if(navigator.userAgent.indexOf('Chrome')!=-1)   
  13.     {   
  14.         /*    Applying a special chrome curosor,  
  15.             as it fails to render completely blank curosrs. */   
  16.                
  17.         retina.addClass('chrome');   
  18.     }   
  19.        
  20.     webpage.mousemove(function(e){   
  21.    
  22.         left = (e.pageX-offset.left);   
  23.         top = (e.pageY-offset.top);   
  24.    
  25.         if(retina.is(':not(:animated):hidden')){   
  26.             /* Fixes a bug where the retina div is not shown */   
  27.             webpage.trigger('mouseenter');   
  28.         }   
  29.    
  30.         if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)   
  31.         {   
  32.             /*    If we are out of the bondaries of the  
  33.                 webpage screenshot, hide the retina div */   
  34.    
  35.             if(!retina.is(':animated')){   
  36.                 webpage.trigger('mouseleave');   
  37.             }   
  38.             return false;   
  39.         }   
  40.    
  41.         /*    Moving the retina div with the mouse  
  42.             (and scrolling the background) */   
  43.    
  44.         retina.css({   
  45.             left                : left - sizes.retina.width/2,   
  46.             top                    : top - sizes.retina.height/2,   
  47.             backgroundPosition    : '-'+(1.6*left)+'px -'+(1.35*top)+'px'   
  48.         });   
  49.            
  50.     }).mouseleave(function(){   
  51.         retina.stop(true,true).fadeOut('fast');   
  52.     }).mouseenter(function(){   
  53.         retina.stop(true,true).fadeIn('fast');   
  54.     });   
  55. });  
  56.   
  57. //html   
  58. <html xmlns="http://www.w3.org/1999/xhtml">   
  59. <head>   
  60. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  61. <title>jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果</title>   
  62. <meta name="description" content="jquery图片放大镜制作仿iphone苹果手机浏览网页图片文字放大查看效果,带放大镜查看图片文字放大预览效果。" />   
  63. </head>   
  64.    
  65. <body>   
  66.    
  67. <div id="main">   
  68.    
  69.     <div id="iphone">   
  70.         <div id="webpage">   
  71.             <img src="img/webpage.png" width="499" height="283" alt="Web Page" />   
  72.             <div id="retina"></div>   
  73.         </div>   
  74.     </div>   
  75.        
  76. </div>   
  77.    
  78. <link rel="stylesheet" type="text/css" href="styles.css" />   
  79.    
  80. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>   
  81. <script type="text/javascript" src="js/script.js"></script>   
  82.    
  83. </body>   
  84. </html>  


演示下载地址:http://www.erdangjiade.com/js/1110.html

加载中
0
2当家的
2当家的

程序员,加油。

返回顶部
顶部