文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > php教程 > php手册 > 正文

jQuery+elevateZoom演示多种放大镜效果

php中文网
发布： 2016-06-10 15:11:49
原创
1343人浏览过

elevateZoom 是一个定制性非常高的 jQuery 放大镜插件，可实现电子商务网站中查看大图的效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置，并且支持内缩放，使用放大镜镜头展示大图。
jQuery+elevateZoom演示多种放大镜效果
首先我们看下6种不同放大镜HTML结果：

默认效果

 
jQuery+elevateZoom演示多种放大镜效果 

内置镜头

 
jQuery+elevateZoom演示多种放大镜效果 

镜头聚焦

 
jQuery+elevateZoom演示多种放大镜效果 

淡入/淡出设置

 
jQuery+elevateZoom演示多种放大镜效果 

动画

 
jQuery+elevateZoom演示多种放大镜效果 

鼠标滚动

 
jQuery+elevateZoom演示多种放大镜效果6中不同的放大镜效果代码都很简单，代码都已翻译注释：$('#zoom_01').elevateZoom({});//默认效果 
 
$('#zoom_02').elevateZoom({ //内置镜头 
    zoomType: "inner",//类型：内置镜头 
    cursor: "crosshair", //光标：十字 
    zoomWindowFadeIn: 500,//镜头窗口淡入速度 
    zoomWindowFadeOut: 750 //镜头窗口淡出速度 
}); 
 
$("#zoom_03").elevateZoom({ //镜头聚焦 
    zoomType: "lens",//类型：透镜效果 
    lensShape: "round", //透镜形状：圆形 
    lensSize: 200 //透镜尺寸：长和宽：200px 
}); 
 
$("#zoom_04").elevateZoom({ //淡入/淡出设置 
    zoomWindowFadeIn: 500,//镜头窗口淡入速度 
    zoomWindowFadeOut: 500,//镜头窗口淡出速度 
    lensFadeIn: 500,//透镜淡入速度 
    lensFadeOut: 500//透镜淡出速度 
}); 
 
$("#zoom_05").elevateZoom({ //动画 
    easing: true //是否开启动画效果 
}); 
 
$("#zoom_06").elevateZoom({ //鼠标滚动 
    scrollZoom: true //是否开启鼠标滚动 
});放大镜演示：http://www.sucaihuo.com/js/127.html

AD：真正免费，域名+虚机+企业邮箱=0元

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：ThinkPHP3.2.3开发的核心后台 下一篇：给不想使用CSS框架的一些童靴的选择
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
在python的开发过程中如何进行单链表的实现（代码） 本文介绍了如何实现单链表，希望大家耐心学习。
2018-09-15 09:33:11
10866
如何理解Elasticsearch单机双节点集群部署 这篇文章，我们还是做些基础的学习，在Elasticsearch如何进行CRUD。
2018-09-14 16:03:42
12642
如何理解关于memset函数 本文介绍了如何理解关于memset函数 ，希望大家耐心学习。
2018-09-14 15:27:49
5173
启动页进入时有短暂黑屏或白屏现象的终极解决方案 irontec 推出了一个开源项目 PHP for Android （PFA），把php带到Android平台上。现在我们来介绍一下。
2018-09-14 15:13:15
5251
如何把WebStorm上传代码到Git ​我是一名前端开发工程师。大概1年前开始使用webstorm这个编辑器，今天向大家介绍一下这个软件。
2018-09-14 14:49:20
6082
分布式系统唯一ID生成方案汇总 系统唯一ID是我们在设计一个系统的时候常常会遇见的问题，也常常为这个问题而纠结。生成ID的方法有很多，适应不同的场景、需求以及性能要求。所以有些比较复杂的系统会有多个ID生成的策略。下面就介绍一些常见的ID生成策略。
2018-09-14 13:39:20
5733
如何在远程过程调用（RPC） HTTP请求式 做过Socket编程的人都知道，当我们设计一个通信协议时，“消息头/消息体”的分割方式是很常用的，消息头告诉对方这个消息是干什么的，消息体告诉对方怎么干。
2018-09-14 11:44:18
4361
Visual Studio Code中安装go语言插件 PHP入门之语句，包括if语句、while语句、go语句，供PHP初学者参考。
2018-09-14 11:38:24
5114
详解Sublime Text 2 代码编辑器或者文本编辑器，对于程序员来说，就像剑与战士一样，谁都想拥有一把可以随心驾驭且锋利无比的宝剑，而每一位程序员，同样会去追求最适合自己的强大、灵活的编辑器，相信你和我一样，都不会例外。我用过的编辑器不少，真不少～ 但却没有哪款让我特别心仪的，直到我遇到了 Sublime Text 2 ！如果说“神器”是我能给予一款软件最高的评价，那么我很乐意为它封上这么一个称号。它小巧绿色且速度非常快
2018-06-11 16:24:34
2716
用CSS实现的一张图完成的按钮实例 <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>用CSS实现的一张图完成的导航条</title><style>ul,li{ list-style:non...
2018-05-09 20:23:31
2243
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部