效果体验：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. 简单的SQL Server在线查看和执行系统

    在大的公司里面,往往数据库和表都非常的多,一张表的字段也是会有几十个.如果这么多的表和字段没有说明注释的话,查看起来会一头雾水,新来的或者别的部门的同事看到表和字段会完全不知道是干嘛的,只能靠名称来猜 ...

  2. HTML可编辑下拉框

    <div style="position:relative;">   <select style="width:120px;" onchang ...

  3. 单链表反转的递归实现（Reversing a Linked List in Java, recursively）

    转自Reversing a Linked List in Java, recursively There's code in one reply that spells it out, but you ...

  4. source code analyzer 功能强大的C/C++源代码分析软件 Celerity CRACK 破解版

    特色 迅捷是一个功能强大的C/C++源代码分析软件.可以处理数百万行的源程序代码.支持标准及K&R风格的C/C++.对每一个打开的源代码工程,通过建立一个包含丰富交叉引用关系的数据库,显示其所 ...

  5. linux pts/0的含义

    pts是所谓的伪终端或虚拟终端,具体表现就是你打开一个终端,这个终端就叫pts/0,如果你再打开一个终端,这个新的终端就叫pts /1.比如用who命令查询当前登录的用户,可以看到每个用户的TTY设备 ...

  6. 安卓从业者应该关注：Android 6.0的运行时权限

    Android 6.0,代号棉花糖,自发布伊始,其主要的特征运行时权限就很受关注.因为这一特征不仅改善了用户对于应用的使用体验,还使得应用开发者在实践开发中需要做出改变. 没有深入了解运行时权限的开发 ...

  7. POJ2524——Ubiquitous Religions

    Ubiquitous Religions Description There are so many different religions in the world today that it is ...

  8. 如何引用传递String Boolean 等,并改变他们的值

    如何引用传递String Boolean 等,并改变他们的值 采用list, 在存入位置改变list的值 如 list.add(true); list.remove(0); list.add(fals ...

  9. 压力测试的轻量级具体做法 Apache ab

    http://www.cnblogs.com/luminji/archive/2011/09/02/2163525.html

  10. CCS使用TIPS

    2013-06-20 09:37:49 CCS使用TIPS: 代码编写: CCS中通过Using CodeSense方便写代码,跟VC助手类似,具体使用方法在ccs的help中搜索using visu ...