效果体验：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. PL/SQL中如何执行DDL、SCL?

    PL/SQL程序中不能直接执行DDL语句.为什么? 假设我们在pl/sql程序中有这样的一条DDL语句—— drop table emp:在第一次解析pl/sql中的“drop table emp;” ...

  2. servlet的生命周期与工作原理、使用！

    概念: Servlet是一个java程序运行在服务器上,处理客户端请求并做粗响应的程序!Servlet是和平台无关的服务器组件,它运行在Servlet容器中,Servlet容器 负责servlet和客 ...

  3. Eclipse升级到4.4.2后界面主题更改

    在win8.1电脑上一直很喜欢eclipse luna sr1a(4.4.1)版本的界面好像是软件自动设置的. 这几天更新到eclipse luna sr2(4.4.2)版本后发现界面大变,怎么也找不 ...

  4. BZOJ 1710: [Usaco2007 Open]Cheappal 廉价回文

    Description 为了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过这个系统时,牛的名字将被自动读入. 每一头牛的电子名字是一个长度为M (1 &l ...

  5. Dialog控件

    代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...

  6. [转载]jquery ajax/post/get 传参数给 mvc的action

    jquery ajax/post/get 传参数给 mvc的action 1.ActionResult Test1     2.View  Test1.aspx 3.ajax page 4.MetaO ...

  7. 团体程序设计天梯赛-练习集L1-008. 求整数段和

    L1-008. 求整数段和 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 杨起帆 给定两个整数A和B,输出从A到B的所有整数以及这些 ...

  8. PHP程序员函数注释规格

    <?php/*** @name 名字* @abstract 申明变量/类/方法* @access 指明这个变量.类.函数/方法的存取权限* @author 函数作者的名字和邮箱地址* @cate ...

  9. 软考类----编码、ASII码等

    淘米2014实习生笔试,今年是淘米第一年招暑期实习生,笔试好大部分考的是软考的题目啊啊啊啊(劳资后悔当年没考软考刷加权),其他是浅而泛的风格,C++,SQL语句,数据结构(哈夫曼树,二叉查找树,栈后缀 ...

  10. hdu 3927 Math Geek

    纯数论题,不解释!!!! 代码如下: #include<stdio.h> int main(){ ,m; scanf("%d",&t); while(t--){ ...