jquery放大镜非常漂亮噢
这个放大镜的代码挺简单滴效果也不错。
- <script>
- //QQ:496928838 微凉
- $(function(){
- $("#demo").enlarge(
- {
- // 鼠标遮罩层样式
- shadecolor: "#FFD24D",
- shadeborder: "#FF8000",
- shadeopacity: 0.4,
- cursor: "move",
- // 大图外层样式
- layerwidth: 480,
- layerheight: 360,
- layerborder: "#DDD",
- fade: true,
- // 大图尺寸
- largewidth: 960,
- largeheight: 720
- });
- });
- </script>
- <a href="demo.jpg" id="demo" style="position: relative;float: left;">
- <img src="demosmall.jpg" width="240" height="180">
- <img src="demo.jpg" width="960" height="720" style="display: none;">
- </a>
- /*
- Enlarge for jQuery v1.0
- Abel Yao, 2013
- */
- (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放大镜非常漂亮噢的更多相关文章
- 电商网站jQuery放大镜代码
分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...
- Jquery放大镜插件---imgzoom.js(原创)
Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...
- jquery放大镜效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- jquery放大镜插件与样式
这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...
- jQuery放大镜插件jqzoom使用
源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...
- jQuery放大镜插件
(function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...
- jquery zoom jquery放大镜特效
这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问: http://www.mind-projects.i ...
- jquery放大镜
效果体验:http://runjs.cn/detail/dvygyp5t demo下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- 自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)
废话不多说,先看效果图,和上一章节用的是同一个小图片: 这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多 插件代码: ; (fun ...
随机推荐
- python 删除文件/夹
原文 : http://www.cnblogs.com/SophiaTang/archive/2012/01/16/2323467.html import os 删除文件: os.remove() 删 ...
- java web程序启动加载 ContextLoaderListener
浅析ContextLoaderListener 大家可能对下面这段代码再熟悉不过了 <context-param> <param-name>contextConfigLocat ...
- [LeetCode] 23. Merge k Sorted Lists ☆☆
Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 解 ...
- Eclipse中 如何实现 多行同时编辑
在编辑的时候按下 SHIFT + ALT +A 之后 鼠标变为 + 号 选择要同时编辑几行 即可编辑(现在eclipse好像只能是编辑一块地方 不能像vs那样 任何地方可以同时编辑 这点很 ...
- 4.redis设计与实现--跳跃表
1.跳跃表由两个结构体构成: 2.总结:
- NOIP模拟赛9
T1U3348 A2-回文数 https://www.luogu.org/problem/show?pid=U3348 考场上钻了牛角尖了,然后0分 #include<cstdio> #i ...
- 《HTML5编程之旅》系列二:Communication 技术初探
本文主要探讨用于构建实时跨源通信的两个模块:跨文档消息通信(Cross Document Messaging)和XMLHttpRequestLevel2.通过这两个模块,我们可以构建不同域间进行安全 ...
- 【CodeForces】915 D. Almost Acyclic Graph 拓扑排序找环
[题目]D. Almost Acyclic Graph [题意]给定n个点的有向图(无重边),问能否删除一条边使得全图无环.n<=500,m<=10^5. [算法]拓扑排序 [题解]找到一 ...
- Ice Cream Tower Gym - 101194D (贪心 + 二分 )
题目链接 : https://cn.vjudge.net/problem/Gym-101194D 题目大意 : 给你n个冰激凌球,让你用这些冰激凌球去垒冰激凌,要求是下面的这一个必须是他上面一个的两倍 ...
- C - Contest Setting Gym - 101982C dp 补题
题目链接:https://vjudge.net/contest/273260#problem/C 学习了一下别人的思路,首先去重,然后离散化. dp数组开二维,每一次更新,状态转移方程,dp[ i ] ...