龙行博客

龙行博客,致力于个人经验分享源码分享,随笔文章
现在位置:首页 > 编程语言 > web前端 > jquery实现图片放大镜效果

jquery实现图片放大镜效果

龙行    web前端    2018-11-22    75    1评论    本文已被百度收录点击查看详情

分享一个jquery制作的图片放大镜效果,这种常用的一般在电商商品详情展示页用的比较多,通过放大图片让消费者更能清晰查看商品细节,增加用户体验度,通过原图放大不会造成图片失真,找到这个demo分享给大家:


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


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


图片放大镜

jquery操作代码

$(function(){           
       $(".jqzoom").jqueryzoom({
            xzoom:400,
            yzoom:400,
            offset:10,
            position:"right",
            preload:1,
            lens:1
        });
    })
然后页面底部引入js

下面是完整demo拿去捣鼓吧

下载地址:  https://share.weiyun.com/5BImDtm 

密码: 

此处内容已隐藏,评论后刷新即可查看!


评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/105.html
  • 上篇文章:阿里云邮件推送邮件发信功能php实现demo
  • 下篇文章:tp5+plupload多图片上传功能,可以实时预览图片
  • jquery
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
萧瑟
萧瑟2018-11-24 21:04回复
#1
很不错的教程,学习了。
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部