<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片放大镜 图片类似放大镜展示鼠标滑过小图异步加载中图、大图</title>
</head>

<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{line-height:180%;font-size:12px;}

/* preview style */
.preview{width:500px;}
/* smallImg */
.smallImg{position:relative;height:360px; padding:26px 5px; width:72px; overflow:hidden;float:left;}
.scrollbutton{width:45px; height:10px; overflow:hidden; position:absolute; left:17px; cursor:pointer;background:url(images/zoom.gif) no-repeat;}
.scrollbutton.smallImgUp{background-position:0 0; top:8px;}
.scrollbutton.smallImgDown{background-position:0 -11px; bottom:8px;}
.scrollbutton.smallImgUp.disabled{background-position:0 -22px;}
.scrollbutton.smallImgDown.disabled{background-position:0 -33px;}
#imageMenu {height:350px;overflow:hidden; margin-top:4px;}
#imageMenu li {height:82px; width:72px; overflow:hidden;}
#imageMenu li img{padding:1px;border:1px solid #E8E8E8; width:68px; height:68px;cursor:pointer;}
#imageMenu li#onlickImg img{border:1px solid #990000;}
/* bigImg */
.bigImg{position:relative;float:right;width:400px;height:400px;padding:5px;border:1px solid #E4E4E4;overflow:hidden;}
.bigImg #midimg{width:400px;height:400px;}
.bigImg #winSelector{width:235px;height:210px;}
#winSelector{position:absolute;cursor:crosshair;filter:alpha(opacity=15);-moz-opacity:0.15;opacity:0.15;background-color:#000;border:1px solid #fff;}
/* bigView */
#bigView{position:absolute;border: 1px solid black;overflow: hidden;width:260px;height:295.652px;top:300px;left:540px;z-index:999;}
#bigView img{position:absolute;}
</style>

<div class="preview" style="float:left;">
        <div class="smallImg">
            <div class="scrollbutton smallImgUp disabled"></div>
            <div id="imageMenu">
                <ul>
                    <li id="onlickImg"><img src="small/01.jpg" width="68" height="68" alt="洋妞"/></li>
                    <li><img src="small/02.jpg" width="68" height="68" alt="洋妞"/></li>
                    <li><img src="small/03.jpg" width="68" height="68" alt="洋妞"/></li>
                    <li><img src="small/04.jpg" width="68" height="68" alt="洋妞"/></li>
                    <li><img src="small/05.jpg" width="68" height="68" alt="洋妞"/></li>
                    <li><img src="small/06.jpg" width="68" height="68" alt="洋妞"/></li>
                </ul>
            </div>
            <div class="scrollbutton smallImgDown"></div>
        </div><!--smallImg end-->
    
        <div id="vertical" class="bigImg">
            <img src="mid/01.jpg" width="400" height="400" alt="天戈遥控飞机 AA02801 四通道遥控直升机 中天模型" id="midimg" />
            <div style="display:none;" id="winSelector"></div>
        </div><!--bigImg end-->
        
        <div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></div>
        
    </div><!--preview end-->
    
    <select style="float:left;margin:20px;display:inline;"><option>IE6 select 框遮罩测试</option></select>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    
    // 图片上下滚动
    var count = $("#imageMenu li").length - 3; /* 显示 4 个 li标签内容 */
    var interval = $("#imageMenu li:first").height();
    var curIndex = 0;
    
    $('.scrollbutton').click(function(){
        if( $(this).hasClass('disabled') ) return false;
        
        if ($(this).hasClass('smallImgUp')) --curIndex;
        else ++curIndex;
        
        $('.scrollbutton').removeClass('disabled');
        if (curIndex == 0) $('.smallImgUp').addClass('disabled');
        if (curIndex == count-1) $('.smallImgDown').addClass('disabled');
        
        $("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
    });
    
    // 解决 ie6 select框 问题
    $.fn.decorateIframe = function(options) {
        if ($.browser.msie && $.browser.version < 7) {
            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
            $(this).each(function() {
                var $myThis = $(this);
                //创建一个IFRAME
                var divIframe = $("<iframe />");
                divIframe.attr("id", opts.iframeId);
                divIframe.css("position", "absolute");
                divIframe.css("display", "none");
                divIframe.css("display", "block");
                divIframe.css("z-index", opts.iframeZIndex);
                divIframe.css("border");
                divIframe.css("top", "0");
                divIframe.css("left", "0");
                if (opts.width == 0) {
                    divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                if (opts.height == 0) {
                    divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                divIframe.css("filter", "mask(color=#fff)");
                $myThis.append(divIframe);
            });
        }
    }
    $.fn.decorateIframe.defaults = {
        iframeId: "decorateIframe1",
        iframeZIndex: -1,
        width: 0,
        height: 0
    }
    //放大镜视窗
    $("#bigView").decorateIframe();

//点击到中图
    var midChangeHandler = null;
    
    $("#imageMenu li img").bind("mouseover", function(){
        if ($(this).attr("id") != "onlickImg") {
            midChange($(this).attr("src").replace("small", "mid"));
            $("#imageMenu li").removeAttr("id");
            $(this).parent().attr("id", "onlickImg");
        }
    }).bind("mouseover", function(){
        if ($(this).attr("id") != "onlickImg") {
            window.clearTimeout(midChangeHandler);
            midChange($(this).attr("src").replace("small", "mid"));
            $(this).css({ "border": "1px solid #990000" });
        }
    }).bind("mouseout", function(){
        if($(this).attr("id") != "onlickImg"){
            $(this).removeAttr("style");
            midChangeHandler = window.setTimeout(function(){
                midChange($("#onlickImg img").attr("src").replace("small", "mid"));
            }, 1000);
        }
    });

function midChange(src) {
        $("#midimg").attr("src", src).load(function() {
            changeViewImg();
        });
    }

//大视窗看图
    function mouseover(e) {
        if ($("#winSelector").css("display") == "none") {
            $("#winSelector,#bigView").show();
        }

$("#winSelector").css(fixedPosition(e));
        e.stopPropagation();
    }

function mouseOut(e) {
        if ($("#winSelector").css("display") != "none") {
            $("#winSelector,#bigView").hide();
        }
        e.stopPropagation();
    }

$("#midimg").mouseover(mouseover); //中图事件
    $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

var $divWidth = $("#winSelector").width(); //选择器宽度
    var $divHeight = $("#winSelector").height(); //选择器高度
    var $imgWidth = $("#midimg").width(); //中图宽度
    var $imgHeight = $("#midimg").height(); //中图高度
    var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

function changeViewImg() {
        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
    }

changeViewImg();

$("#bigView").scrollLeft(0).scrollTop(0);
    function fixedPosition(e) {
        if (e == null) {
            return;
        }
        var $imgLeft = $("#midimg").offset().left; //中图左边距
        var $imgTop = $("#midimg").offset().top; //中图上边距
        X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
        Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
        X = X < 0 ? 0 : X;
        Y = Y < 0 ? 0 : Y;
        X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
        Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

if ($viewImgWidth == null) {
            $viewImgWidth = $("#bigView img").outerWidth();
            $viewImgHeight = $("#bigView img").height();
            if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                $viewImgWidth = $viewImgHeight = 800;
            }
            $height = $divHeight * $viewImgHeight / $imgHeight;
            $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
            $("#bigView").height($height);
        }

var scrollX = X * $viewImgWidth / $imgWidth;
        var scrollY = Y * $viewImgHeight / $imgHeight;
        $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
        $("#bigView").css({ "top": 0, "left": $(".preview").offset().left + $(".preview").width() + 15 });

return { left: X, top: Y };
    }

});
</script>
</body>
</html>

jquery 放大图片的更多相关文章

  1. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  2. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  3. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  4. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  5. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  6. 实例讲解如何利用jQuery设置图片居中放大或者缩小

    大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...

  7. jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

    jquery手指触摸滑动放大图片的方法(比较靠谱的方法) <pre><!DOCTYPE html><html lang="zh-cn">< ...

  8. jQuery 实现图片放大两种方式

    jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...

  9. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

随机推荐

  1. mysql-no-install 手动安装

    D:\mysql-5.5.28-win32 1.下载mysql-5.5.15-win32.zip,解压到本地D:\mysql. 2.将my-small.ini另存为my.ini .(根据情况可以选择别 ...

  2. 用Natvis定制C++对象在Visual Studio调试时如何显示

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Natvis定制C++对象在Visual Studio调试时如何显示.

  3. Script Form

    Script Form 是SAP所提供的一款强大的报表设设计工具. 一.Script Form主要工具包括如下: 1)Form Painter:格式绘制器,用于格式的设定.TCoce:SE71. 2) ...

  4. 自定义Dictionary支持线程安全

    本文转载:http://www.cnblogs.com/kiddo/archive/2008/09/25/1299089.html 我们说一个数据结构是线程安全指的是同一时间只有一个线程可以改写它.这 ...

  5. UVa465 - Overflow

    题目地址:点击打开链接 C++代码: #include <cstdlib> #include <cstdio> int main() { char s1[10000],s2[1 ...

  6. spring scheduler相同时间内执行两次的问题

    在网上找了大片文章,有的说是上下文被夹在两次的问题,可我配置scheduler的上下文着实没被夹在多次 之后才在网上找到,虽然还不明白原理,但是还是贴出来分享下

  7. C学习笔记之预处理指令

          一.什么是预处理指令            预处理指令是告诉编译器在编译之前预先处理的一些指令,有宏定义,文件包括,条件编译. 预处理指令一般以 # 号开头,能够出如今文件的不论什么地方, ...

  8. android inflater 用法

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  9. 69 Spring Interview Questions and Answers – The ULTIMATE List--reference

    This is a summary of some of the most important questions concerning the Spring Framework, that you ...

  10. 两种JSON数据类型的解析

    son数据格式解析我自己分为两种: 一种是普通的,一种是带有数组形式的: 普通形式的:服务器端返回的json数据格式如下: {"userbean":{"Uid" ...