`
zcwfeng
  • 浏览: 97087 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
社区版块
存档分类
最新评论

HTML5 放大镜效果实例源码

 
阅读更多


<!doctype html>


<html>


<head>


<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


<meta charset="utf-8">


<title>放大镜效果测试</title>









<style class="csscreations">/*Some CSS*/


* {margin: 0; padding: 0;}


.magnify {width: 200px; margin: 50px auto; position: relative;}






/*Lets create the magnifying glass*/


.large {


width: 175px; height: 175px;


position: absolute;


border-radius: 100%;





/*Multiple box shadows to achieve the glass effect*/


box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),


0 0 7px 7px rgba(0, 0, 0, 0.25),


inset 0 0 40px 2px rgba(0, 0, 0, 0.25);





/*Lets load up the large image first*/


background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;





/*hide the glass by default*/


display: none;


}






/*To solve overlap bug at the edges during magnification*/


.small { display: block; }</style></head>


<body>





<!-- Lets make a simple image magnifier -->


<div class="magnify">





<!-- This is the magnifying glass which will contain the original/large version -->


<div class="large"></div>





<!-- This is the small image -->


<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>





</div>






<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->


<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>


<!-- You can download it from http://leaverou.github.com/prefixfree/ -->






<!-- Time for jquery action --></body>


</html><script>$(document).ready(function(){


$(document).ready(function(){






var native_width = 0;


var native_height = 0;






//Now the mousemove function


$(".magnify").mousemove(function(e){


//When the user hovers on the image, the script will first calculate


//the native dimensions if they don't exist. Only after the native dimensions


//are available, the script will show the zoomed version.


if(!native_width && !native_height)


{


//This will create a new image object with the same image as that in .small


//We cannot directly get the dimensions from .small because of the


//width specified to 200px in the html. To get the actual dimensions we have


//created this image object.


var image_object = new Image();


image_object.src = $(".small").attr("src");





//This code is wrapped in the .load function which is important.


//width and height of the object would return 0 if accessed before


//the image gets loaded.


native_width = image_object.width;


native_height = image_object.height;


}


else


{


//x/y coordinates of the mouse


//This is the position of .magnify with respect to the document.


var magnify_offset = $(this).offset();


//We will deduct the positions of .magnify from the mouse positions with


//respect to the document to get the mouse positions with respect to the


//container(.magnify)


var mx = e.pageX - magnify_offset.left;


var my = e.pageY - magnify_offset.top;





//Finally the code to fade out the glass if the mouse is outside the container


if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)


{


$(".large").fadeIn(100);


}


else


{


$(".large").fadeOut(100);


}


if($(".large").is(":visible"))


{


//The background position of .large will be changed according to the position


//of the mouse over the .small image. So we will get the ratio of the pixel


//under the mouse pointer with respect to the image and use that to position the


//large image inside the magnifying glass


var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;


var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;


var bgp = rx + "px " + ry + "px";





//Time to move the magnifying glass with the mouse


var px = mx - $(".large").width()/2;


var py = my - $(".large").height()/2;


//Now the glass moves with the mouse


//The logic is to deduct half of the glass's width and height from the


//mouse coordinates to place it with its center at the mouse coordinates





//If you hover on the image now, you should see the magnifying glass in action


$(".large").css({left: px, top: py, backgroundPosition: bgp});


}


}


})


})


});</script>


<style>


<!--.Controls{position:absolute;z-index:9999;right:30px;top:10px;width:80px;height:30px;line-height:30px;background-color:#eee;opacity:0.5;font-size:10px;text-align:center;}


.Controls a{text-decoration:none;margin:10px 5px;}-->


.GoEdit{opacity: 0; position: fixed; top: -1px; right: -1px; padding: 5px 10px; background-color: rgb(204, 204, 204); color: rgb(51, 51, 51); text-shadow: rgb(255, 255, 255) 0px 1px 1px; border-top-right-radius: 5px; border: 1px solid rgb(153, 153, 153); text-decoration: none; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue', Arial, Helvetica; -webkit-transition: opacity 100ms ease-out; background-position: initial initial; background-repeat: initial initial; }


</style>


<script type="text/javascript" src="/tools/jsbin/edit.js"></script>


<script type="text/javascript">


var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");


document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2b9232a7b0ced15280772333a4ec7c3a' type='text/javascript'%3E%3C/script%3E"));


</script>






<!-- Generated by OSCTools.NET (Tue Jul 24 23:17:56 CST 2012) 3ms -->
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics