8.10-8.14（2）

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