效果体验：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. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  2. C# 将datatable 转换json

    public static string DataTableToJson(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder() ...

  3. Google面试题

    今天早上在Quora上看到的一个题目,很不错的!最直观的是枚举n^3,但稍微进步一点的观察是找出3个数,然后最大的减去最小的2倍的结果,然后就有了线性扫一遍就OK. Given three array ...

  4. 【BZOJ 2440】[中山市选2011]完全平方数

    Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数.然而这丝毫不影响他对其他数的热爱. 这天是 ...

  5. Contest2037 - CSU Monthly 2013 Oct (problem F ：ZZY and his little friends)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?cid=2037&pid=5 [题解]: 没想通这题暴力可以过.... [code]: #inclu ...

  6. hibernate一对一双向外键关联

    一对一双向外键关联:双方都持有对方的外键关联关系. 主控方和一对一单向外键关联的情况是一样的,主要的差异表现为,被空方需要添加: @OneToOne(mappedBy="card" ...

  7. 团体程序设计天梯赛-练习集L2-007. 家庭房产

    L2-007. 家庭房产 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定每个人的家庭成员和其自己名下的房产,请你统计出每个 ...

  8. NIO的Selector

    参考自 Java NIO系列教程(六) Selector Java-NIO-Selector java.nio.channels.Selector NIO新功能Top 10(下) 出发点: 如何管理多 ...

  9. hdu 3032 Nim or not Nim? 博弈论

     这题是Lasker’s Nim. Clearly the Sprague-Grundy function for the one-pile game satisfies g(0) = 0 and g( ...

  10. http://jingyan.baidu.com/article/e4511cf33479812b855eaf67.html

    http://jingyan.baidu.com/article/e4511cf33479812b855eaf67.html