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>
<ahref="demo.jpg"id="demo"style="position:relative;float:left;">
<imgsrc="demosmall.jpg"width="240"height="180">
<imgsrc="demo.jpg"width="960"height="720"style="display:none;">
</a>

/*
EnlargeforjQueryv1.0
AbelYao,2013
*/
(function(e){vari={shadecolor:"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD",fade:true,largewidth:1280,largeheight:960};vart=function(t){t=e.extend({},i,t);e(this).each(function(){vari=e(this).css("position","relative");varh=i.children().first();varr={x:h.width()/t.largewidth,y:h.height()/t.largeheight};varo={shade:{width:t.layerwidth*r.x-2,height:t.layerheight*r.y-2}};vara=e("<div>").css({position:"absolute",left:"0px",top:"0px","background-color":t.shadecolor,border:"1pxsolid"+t.shadeborder,width:o.shade.width,height:o.shade.height,opacity:t.shadeopacity,cursor:t.cursor});a.hide().appendTo(i);vard=e("<img>").css({position:"absolute",display:"block",width:t.largewidth,height:t.largeheight});vars=e("<div>").css({position:"absolute",left:i.width()+5,top:0,"background-color":"#111",overflow:"hidden",width:t.layerwidth,height:t.layerheight,border:"1pxsolid"+t.layerborder});d.attr("src",i.attr("href"));d.appendTo(s);s.hide().appendTo(i);varn={x:o.shade.width/2,y:o.shade.height/2};varl={width:i.innerWidth()-a.outerWidth(),height:i.innerHeight()-a.outerHeight()};varg=function(){a.show();if(t.fade)s.stop().fadeIn(300);elses.show()};varc=function(){a.hide();s.hide()};varf=i.offset();i.mousemove(function(e){vart=e.pageX-f.left;varh=e.pageY-f.top;if(t<0||t>i.innerWidth())returnc();if(h<0||h>i.innerHeight())returnc();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

作者主页：http://www.abelcode.com/

Thanks:http://www.cnblogs.com/web100/p/jquery-big.html

jQuery 图片放大预览插件相关推荐

jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
Axure RP9——【图片放大预览效果】
图片放大预览效果目录 I.实现效果 II.实现步骤 I.实现效果一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
Chrome 扩展程序——Imagus：图片放大预览工具
主要介绍 Imagus 的功能及应用,Imagus 是一款简单实用的图片放大预览工具. 主要功能 Imagus 的功能非常单一,就是在浏览网页时,当鼠标悬停到一张图片后,会自动放大图片,进行预览,这在 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
小程序实现图片放大预览功能
uniapp 微信小程序实现图片放大预览功能实现效果图如下主要实现代码 <view class="text_img"><image :src="i ...
Vue 移动端 previewer实现图片放大预览
简述本文主要讲述,vue在手机移动端如何实现对小图进行放大查看预览.类似于朋友圈的照片查看. 可用工具 1.npm安装,npm i vue-preview -S 2.使用一些Vue的UI组件框架自带 ...
html js 图片放大效果,JavaScript实现图片放大预览效果
代码实现: Document .preview-img { position: relative; height: 398px; } .mask { display: none; position: ...
微信小程序：收藏、客服、分享、加入购物车、图片放大预览
微信小程序:收藏.客服.分享.加入购物车.图片放大预览微信小程序包含功能 ·轮播 ·图片放大预览 ·收藏 ·客服 ·加入购物车在goods_detail下的index.wxml写页面代码 < ...

jQuery 图片放大预览插件

jQuery 图片放大预览插件相关推荐

最新文章

热门文章