效果体验：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. 1021.Deepest Root (并查集+DFS树的深度)

    A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...

  2. ThinkPHP的缓存 F方法

    一般使用文件方式的缓存就能够满足要求,而thinkphp还提供了一个专门用于文件方式的快速缓存方法f方法. 由于采用的是php返回方式,所以其效率较s方法较高. f方法具有如下特点: 1.简单数据缓存 ...

  3. android.support.v7.app.AppCompatActivity

    1.Android Studio (api 23) 新建项目的时候 Activity public class MainActivity extends AppCompatActivity 2.系统默 ...

  4. 导入 Mysql 示例数据库 employees

    Mysql也有跟Oracle的scott与employees相似的数据库,这样就免除了每次都要自己建表并插入数据了. Mysql提供的供练习使用的数据库employees,下面地址:https://l ...

  5. sort +awk+uniq 统计文件中出现次数最多的前10个单词

    实例cat logt.log|sort -s -t '-' -k1n |awk '{print $1;}'|uniq -c|sort -k1nr|head -100 统计文件中出现次数最多的前10个单 ...

  6. 【CSLA】Component-based,Scalable,LogicalArchitecture

    我能说我没看懂吗 ? http://www.cnblogs.com/lonely7345/archive/2010/02/06/1665171.html

  7. VC++创建、调用dll的方法步骤

    文章来源:http://www.cnblogs.com/houkai/archive/2013/06/05/3119513.html 代码复用是提高软件开发效率的重要途径.一般而言,只要某部分代码具有 ...

  8. cmp比较指令对标志寄存器的影响

    比如: mov ax,x mov bx,y cmp ax,bx cmp ax,bx的逻辑含义是比较ax,bx中的值.如果执行后: ZF=1则AX=BX ZF=0则AX!=BX CF=1则AX<B ...

  9. 从零开始运维之旅：如何监控你的 Windows？

    小弟乃刚刚踏入运维圈的资深小白一枚,正所谓完事开头难,公司里怕我把生产系统搞坏就让我先在测试环境上先练练手.巧的是测试环境又是我熟悉的 Windows 环境,心中窃喜啊.但问题随之而来,运维从何下手呢 ...

  10. python top project of 2013

    Hi Pythonistas! 测试和调试 Testing & Debugging 框架及Web Frameworks & Web 并发 Concurrency 任务调度 Job Sc ...