8.10-8.14（2）
通过css和js实现一般电商网站放大镜效果，这里的放大镜不是固定的哦。
/**
* Created by Administrator on 15-8-12.
*/
$(document).ready(function(){
// 定义图像的实际尺寸、
var native_width = 0;
var native_height = 0;
// 首先、我们应该获得图像的实际尺寸、（本地的图片）
$('.small').load(function(){
// 这里我们需要重新创建一个和之前相同的图像对象、
// 因为我们不能直接获得图像尺寸的宽高、
// 因为我们在HTML里已经指定了图片宽度为200px、
var img_obj = new Image();
img_obj.src = $(this).attr('src');
// 在这里这段代码写在这里是非常有必要的、
// 如果在图像加载之前就访问的话、return的宽高值为0、
native_width = img_obj.width;
native_height = img_obj.height;
// 现在、我来开始写鼠标移动的函数、mousemove()
$('.magnify1').mousemove(function(e){
// 获得鼠标X轴和Y轴的坐标
// 先获得magnify相对与document的定位position
var magnify_offset = $(this).offset();
// 这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置 来得到鼠标的位置
var mouse_x = e.pageX - magnify_offset.left;
var mouse_y = e.pageY - magnify_offset.top;
// 现在、我们来调整一下放大镜的隐藏与显示、
if( mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height() ){
$('.large1').fadeIn(100);
}else{
$('.large1').fadeOut(100);
}
if($('.large1').is(':visible')){
// 放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、
// 因此、我们应该先得到放大的比例、来定位这个放大镜里背景图片的定位、
/*
var ratio_x = mouse_x/$('.small').width();//得到的是缩放的比例
var large_x = ratio_x*native_width;
// 我们需要让它在放大镜的中间位置显示、
large_x = large_x - $('.large').width()/2;
// 因为背景图片的定位、这里需要转化为负值、
large_x = large_x*-1;
// 现在我们来整合一下所有的计算步骤、
*/
var rx = Math.round(mouse_x/$('.small').width()*native_width - $('.large1').width()/2)*-1;
var ry = Math.round(mouse_y/$('.small').height()*native_height - $('.large1').height()/2)*-1;
var bgp = rx + 'px ' + ry + 'px';
// 现在我们应该来写放大镜跟随鼠标的效果、
// 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、
// 再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标
var gx = mouse_x - $('.large1').width()/2;
var gy = mouse_y - $('.large1').height()/2;
$('.large1').css({
'left':gx,
'top':gy,
'backgroundPosition':bgp
})
}
})
})
// 最后、我们来把这个mousemove()这个函数来放在这个load这个函数里
})
$(document).ready(function(){
// 定义图像的实际尺寸、
var native_width = 0;
var native_height = 0;
// 首先、我们应该获得图像的实际尺寸、（本地的图片）
$('.small').load(function(){
// 这里我们需要重新创建一个和之前相同的图像对象、
// 因为我们不能直接获得图像尺寸的宽高、
// 因为我们在HTML里已经指定了图片宽度为200px、
var img_obj = new Image();
img_obj.src = $(this).attr('src');
// 在这里这段代码写在这里是非常有必要的、
// 如果在图像加载之前就访问的话、return的宽高值为0、
native_width = img_obj.width;
native_height = img_obj.height;
// 现在、我来开始写鼠标移动的函数、mousemove()
$('.magnify2').mousemove(function(e){
// 获得鼠标X轴和Y轴的坐标
// 先获得magnify相对与document的定位position
var magnify_offset = $(this).offset();
// 这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置 来得到鼠标的位置
var mouse_x = e.pageX - magnify_offset.left;
var mouse_y = e.pageY - magnify_offset.top;
// 现在、我们来调整一下放大镜的隐藏与显示、
if( mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height() ){
$('.large2').fadeIn(100);
}else{
$('.large2').fadeOut(100);
}
if($('.large2').is(':visible')){
// 放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、
// 因此、我们应该先得到放大的比例、来定位这个放大镜里背景图片的定位、
/*
var ratio_x = mouse_x/$('.small').width();//得到的是缩放的比例
var large_x = ratio_x*native_width;
// 我们需要让它在放大镜的中间位置显示、
large_x = large_x - $('.large').width()/2;
// 因为背景图片的定位、这里需要转化为负值、
large_x = large_x*-1;
// 现在我们来整合一下所有的计算步骤、
*/
var rx = Math.round(mouse_x/$('.small').width()*native_width - $('.large2').width()/2)*-1;
var ry = Math.round(mouse_y/$('.small').height()*native_height - $('.large2').height()/2)*-1;
var bgp = rx + 'px ' + ry + 'px';
// 现在我们应该来写放大镜跟随鼠标的效果、
// 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、
// 再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标
var gx = mouse_x - $('.large2').width()/2;
var gy = mouse_y - $('.large2').height()/2;
$('.large2').css({
'left':gx,
'top':gy,
'backgroundPosition':bgp
})
}
})
})
// 最后、我们来把这个mousemove()这个函数来放在这个load这个函数里
})
<style>
.magnify1 {
width: 400px;
margin: 150px auto;
position: relative; }
.large1 {
width: 180px;
height: 180px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.8), 0 0 7px 7px rgba(0, 0, 0, 0.3), inset 0 0 40px 2px rgba(0, 0, 0, 0.3);
background: url("../img/mx5-1.jpg") no-repeat;
display: none; }
.small {
display: block; }
</style>
<div class='magnify1'> <div class='large1'></div> <img src='img/mx5-1.jpg' width="200px" class='small'> </div>
