Publicado em 10 de out.

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.

//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>
</head> <body>

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

<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>

<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)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

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".