Привет, я попытался реализовать код увеличения jquery на моем веб-сайте. Я совмещаю его с javascript.skrollr для прокрутки параллакса. Он отлично работает в firefox, но, похоже, не работает вообще в хроме и сафари.
Веб-сайт можно найти по адресу: https://dl.dropboxusercontent.com/u/209428711/Test-content-site/index.html.
Java для функции увеличения
<script src="javascripts/prefixfree.min.js" type="text/javascript"></script>
<script src="javascripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
$(".magnify").mousemove(function(e){
if(!native_width && !native_height)
{
var image_object = new Image();
image_object.src = $(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
}
else
{
var magnify_offset = $(this).offset();
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"))
{
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;
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
</script>
Вся помощь очень ценится :) Если у вас есть вопросы по сайту, я могу попытаться ответить на них.
мир
попробуйте использовать mouseover (изменить mousemove на mouseover)