分享一个基于Jquery的图片放大镜效果

...

最近看见群里有人询问关于博客图片不能放大的效果该怎么办,因为emlog官方的插件并不好使,然后很多主题并没有这个功能,今天刚好看见了这篇文章就分享出来了。

图片放大镜效果一般都使用在商城的产品最终展示页面,通过放大商品的局部,让消费者更加直观的查看商品信息。而通常我们看到的放大镜是在缩略图的上使用放大镜,而加载的图像是原图。这样的放大效果没有失真并且更清晰。而这和物理意义上的放大镜相差甚远。生活上我们使用的放大镜通过是对原物进行放大观看,放大后的效果是失真的。一直需要一个这种接近真实意义的放大镜效果。在网上找到这个基于Jquery的放大镜效果分享一下。

首先是引入Jquery文件jquery-1.2.6.min.js和CSS样式表。其次在需要放大的图片上添加属性jqimg,属性值和src值一致,也就是在原图上放大的

1
<img src="images/img01.jpg" jqimg="images/img01.jpg" width="350" height="350">

然后在后面添加Jquery操作代码

1
2
3
4
5
6
7
8
9
10
$(function(){          
       $(".jqzoom").jqueryzoom({
            xzoom:400,
            yzoom:400,
            offset:10,
            position:"right",
            preload:1,
            lens:1
        });
    })

 

最后在页面底部引入操控功能代码zzjs.js

具体需要的样式可以自行在样式表中修改,放大尺寸比例可以在操作代码里面自行调整。

最后附上完整的文件压缩包Jquery放大镜.rar



本文标签:

版权声明:分享一个基于Jquery的图片放大镜效果》该篇文章出自【岳泽以博客】,如果您有任何复制、转载行为请注明原文地址!

作者:岳泽以博客

普通的的一位Web爱好者。

返回列表
上一篇:
下一篇:

发表评论

快捷回复:

评论列表 (已有11条评论)
小帮子侯爵2020-04-10 15:06回复
我记得,31岁那年找工作,在广州一个ERP软件公司面试,那个HR一见我就问“为什么你要做软件,做软件没钱途,我当时即感觉无语,后来他们出了一份试顾让我做笔试,我全部都答出来,我之前的确是网上下载了很多笔试试,做完之间后才到处投间历的,
小精灵侯爵2020-04-09 14:16回复
我记得,31岁那年找 C#.NET 的工作,在广州一个ERP  软件公司面试,那个H.R 一见我就问“为什么你要做软件?做软件没钱途的.."我当时即感觉非常无语...


后来他出了一份试卷让我做笔试,我全部都答出来了,我之前的确是网上下载了很多笔试试卷,做完之后才到处海投简历的

我做完了,也基本答对了
可是他不信
又给老子出一份卷子
卧槽!!!!!
我当时就气死了
笔一甩就走人了
编程浪子侯爵2020-04-07 16:27回复
找工作很困难,找不到合适的工作呀,现在不知道做什么好!
超过级学员侯爵2020-04-06 16:55回复
变开金刚雷诈王中在霜降 !
超过级学员侯爵2020-04-06 16:54回复
在霜基地枯载地械夺苛夺村工夺!
超过级学员侯爵2020-04-06 16:53回复
厅地基地区地要在地在线革厅地厅工作队!