这个放大镜的代码挺简单滴效果也不错。

  1. <script>
  2. //QQ:496928838 微凉
  3. $(function(){
  4. $("#demo").enlarge(
  5. {
  6. // 鼠标遮罩层样式
  7. shadecolor: "#FFD24D",
  8. shadeborder: "#FF8000",
  9. shadeopacity: 0.4,
  10. cursor: "move",
  11. // 大图外层样式
  12. layerwidth: 480,
  13. layerheight: 360,
  14. layerborder: "#DDD",
  15. fade: true,
  16. // 大图尺寸
  17. largewidth: 960,
  18. largeheight: 720
  19. });
  20. });
  21. </script>
  22. <a href="demo.jpg" id="demo" style="position: relative;float: left;">
  23. <img src="demosmall.jpg" width="240" height="180">
  24. <img src="demo.jpg" width="960" height="720" style="display: none;">
  25. </a>

  1. /*
  2. Enlarge for jQuery v1.0
  3. Abel Yao, 2013
  4. */
  5. (function(e){var i={shadecolor:"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD",fade:true,largewidth:1280,largeheight:960};var t=function(t){t=e.extend({},i,t);e(this).each(function(){var i=e(this).css("position","relative");var h=i.children().first();var r={x:h.width()/t.largewidth,y:h.height()/t.largeheight};var o={shade:{width:t.layerwidth*r.x-2,height:t.layerheight*r.y-2}};var a=e("<div>").css({position:"absolute",left:"0px",top:"0px","background-color":t.shadecolor,border:"1px solid "+t.shadeborder,width:o.shade.width,height:o.shade.height,opacity:t.shadeopacity,cursor:t.cursor});a.hide().appendTo(i);var d=e("<img>").css({position:"absolute",display:"block",width:t.largewidth,height:t.largeheight});var s=e("<div>").css({position:"absolute",left:i.width()+5,top:0,"background-color":"#111",overflow:"hidden",width:t.layerwidth,height:t.layerheight,border:"1px solid "+t.layerborder});d.attr("src",i.attr("href"));d.appendTo(s);s.hide().appendTo(i);var n={x:o.shade.width/2,y:o.shade.height/2};var l={width:i.innerWidth()-a.outerWidth(),height:i.innerHeight()-a.outerHeight()};var g=function(){a.show();if(t.fade)s.stop().fadeIn(300);else s.show()};var c=function(){a.hide();s.hide()};var f=i.offset();i.mousemove(function(e){var t=e.pageX-f.left;var h=e.pageY-f.top;if(t<0||t>i.innerWidth())return c();if(h<0||h>i.innerHeight())return c();t=t-n.x;h=h-n.y;if(t<0)t=0;if(h<0)h=0;if(t>l.width)t=l.width;if(h>l.height)h=l.height;a.css({left:t,top:h});d.css({left:0-t/r.x,top:0-h/r.y})}).mouseenter(g).mouseleave(c)})};e.fn.extend({enlarge:t})})(jQuery);

下载地址:http://files.cnblogs.com/web100/%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7%E9%95%9C.zip

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 zoom jquery放大镜特效

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

  8. jquery放大镜

    效果体验:http://runjs.cn/detail/dvygyp5t demo下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

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

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

随机推荐

  1. python 删除文件/夹

    原文 : http://www.cnblogs.com/SophiaTang/archive/2012/01/16/2323467.html import os 删除文件: os.remove() 删 ...

  2. java web程序启动加载 ContextLoaderListener

    浅析ContextLoaderListener 大家可能对下面这段代码再熟悉不过了 <context-param> <param-name>contextConfigLocat ...

  3. [LeetCode] 23. Merge k Sorted Lists ☆☆

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 解 ...

  4. Eclipse中 如何实现 多行同时编辑

    在编辑的时候按下 SHIFT + ALT +A 之后  鼠标变为 + 号   选择要同时编辑几行  即可编辑(现在eclipse好像只能是编辑一块地方  不能像vs那样 任何地方可以同时编辑  这点很 ...

  5. 4.redis设计与实现--跳跃表

    1.跳跃表由两个结构体构成: 2.总结:

  6. NOIP模拟赛9

    T1U3348 A2-回文数 https://www.luogu.org/problem/show?pid=U3348 考场上钻了牛角尖了,然后0分 #include<cstdio> #i ...

  7. 《HTML5编程之旅》系列二:Communication 技术初探

     本文主要探讨用于构建实时跨源通信的两个模块:跨文档消息通信(Cross Document Messaging)和XMLHttpRequestLevel2.通过这两个模块,我们可以构建不同域间进行安全 ...

  8. 【CodeForces】915 D. Almost Acyclic Graph 拓扑排序找环

    [题目]D. Almost Acyclic Graph [题意]给定n个点的有向图(无重边),问能否删除一条边使得全图无环.n<=500,m<=10^5. [算法]拓扑排序 [题解]找到一 ...

  9. Ice Cream Tower Gym - 101194D (贪心 + 二分 )

    题目链接 : https://cn.vjudge.net/problem/Gym-101194D 题目大意 : 给你n个冰激凌球,让你用这些冰激凌球去垒冰激凌,要求是下面的这一个必须是他上面一个的两倍 ...

  10. C - Contest Setting Gym - 101982C dp 补题

    题目链接:https://vjudge.net/contest/273260#problem/C 学习了一下别人的思路,首先去重,然后离散化. dp数组开二维,每一次更新,状态转移方程,dp[ i ] ...