efeito lupa em fotos
galera estava vendo o tutorial desse site http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 eu fiz tudo como esta la,mas so a parte do java(jquery) nao esta pegando! olhem meu codigo:
<html> <head>
<link href="new1.css" rel="stylesheet" type="text/css"/>
<<script type="text/javascript">
$(document).ready(function(){ var native_width = 0. var native_height = 0. $(".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"). //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. 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". 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>
</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](http://thecodeplayer.com/uploads/media/iphone.jpg)" width="200"/> </div><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 -->
<script src="[http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js](http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js)" type="text/javascript"></script> </body> </html>Discussão (2)
Carregando comentários...