效果体验：http://runjs.cn/detail/dvygyp5t

demo下载

<!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></title>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

</head>

<body>

<div id="div1">

    <div class="small_pic">

        <span class="mark"></span>

        <span class="float_layer"></span>

        <img src="http://www.helloweba.com/demo/cloud-zoom/images/smallimage.jpg" />

    </div>

    <div class="big_pic">

        <img src="http://www.helloweba.com/demo/cloud-zoom/images/bigimage00.jpg"/>

    </div>

<script type="text/javascript">

$(function(){

    $(".mark").hover(function(){

        $(".float_layer,.big_pic").show();

    },function(){

        $(".float_layer,.big_pic").hide();

    })

    $(".mark").mousemove(function(ev){

        var e = ev || event;

        var left = e.clientX - $("#div1").offset().left-$(".small_pic").offset().left-$(".float_layer").width()/;

        var top = e.clientY - $("#div1").offset().top-$(".small_pic").offset().top-$(".float_layer").height()/;

        var sDistanceX = $(".mark").outerWidth()-$(".float_layer").outerWidth();

        var sDistanceY = $(".mark").outerHeight()-$(".float_layer").outerHeight();

        if(left<){

            left = ;

        }

        else if(left > sDistanceX){

            left = sDistanceX ;

        }

        if(top<){

            top=;

        }

        else if(top > sDistanceY){

            top = sDistanceY;

        }

        $(".float_layer").css({'left':left,"top":top});

        var scoreX = left/sDistanceX;

        var scoreY = top/sDistanceY;

        var  bDistanceX = $(".big_pic img").outerWidth() - $(".big_pic").outerWidth();

        var  bDistanceY = $(".big_pic img").outerHeight() - $(".big_pic").outerHeight();

        $(".big_pic img").css({left:(-scoreX*bDistanceX),top:(-scoreY*bDistanceY)});

    })

})

</script>

</body>

</html>

jquery放大镜的更多相关文章

  1. 电商网站jQuery放大镜代码

    分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...

  2. Jquery放大镜插件---imgzoom.js(原创)

    Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...

  3. jquery放大镜效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  4. jquery放大镜插件与样式

    这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...

  5. jQuery放大镜插件jqzoom使用

    源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...

  6. jQuery放大镜插件

    (function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...

  7. jquery放大镜非常漂亮噢

    这个放大镜的代码挺简单滴效果也不错. <script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // ...

  8. jquery zoom jquery放大镜特效

    这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问: http://www.mind-projects.i ...

  9. 自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)

    废话不多说,先看效果图,和上一章节用的是同一个小图片: 这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多 插件代码: ; (fun ...

随机推荐

  1. 详解Google-ProtoBuf中结构化数据的编码

    本文的主要内容是google protobuf中序列化数据时用到的编码规则,但是,介绍具体的编码规则之前,我觉得有必要先简单介绍一下google protobuf.因此,本文首先会介绍一些google ...

  2. custom activities

    Useful Sharepoint Designer Custom Workflow Activities http://spdactivities.codeplex.com/ http://stac ...

  3. iOS本地动态验证码生成-b

    用于ios本地动态生成验证码,效果如下: demo.gif 导入CoreGraphics.framework用于绘制图形 封装UIView,便捷使用,代码如下: AuthcodeView.h #imp ...

  4. （转）关于linux中内核编程中结构体的赋值操作（结构体指定初始化）

    网址:http://blog.chinaunix.net/uid-24807808-id-3219820.html 在看linux源码的时候,经常会看到类似于下面的结构体赋值的代码: struct d ...

  5. coolcarousel 图片轮播缩放问题

    var myurl; var mydata; var mytype = "POST"; var jsonType = "json"; var htmlType ...

  6. C#实现IDispose模式

    .net的GC机制有两个问题:首先GC并不能释放所有资源,它更不能释放非托管资源.其次,GC也不是实时的,所有GC存在不确定性.为了解决这个问题.NET提供了析构函数 public class Dis ...

  7. bzoj 2744: [HEOI2012]朋友圈 二分图匹配

    2744: [HEOI2012]朋友圈 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 612  Solved: 174[Submit][Status] ...

  8. Python SyntaxError: Non-ASCII character '\xe5'

    error: SyntaxError: Non-ASCII character '\xe5' in file D:\worklife\workshop\myCrawler\src\mainDriver ...

  9. C++11 FAQ中文版--转

    更新至英文版October 3, 2012 译者前言: 经过C++标准委员会的不懈努力,最新的ISO C++标准C++11,也即是原来的C++0x,已经正式发布了.让我们欢迎C++11! 今天获得St ...

  10. Tomcat 部署Undeployment Failure

    Tomcat 部署Undeployment Failure - yongjava的日志 - 网易博客 http://blog.163.com/qiangyongbin2000@126/blog/sta ...