利用javascript实现的三种图片放大镜效果实例(附源码)


Posted in Javascript onJanuary 23, 2017

本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端;大家可以直接下载源码进行学习参考,下面来一起学习学习吧。

实现效果如下

利用javascript实现的三种图片放大镜效果实例(附源码)

效果一

利用javascript实现的三种图片放大镜效果实例(附源码)

效果二

利用javascript实现的三种图片放大镜效果实例(附源码)

效果三

调用代码如下

//前面是ID或者Class,后面有init里面参数分别有1,2,3代表三种不同的效果: 
zoom(‘#item').init(); //这里写0,或者不写都可以,默认0 
zoom(‘#item').init(1); //效果2 
zoom(‘#item').init(2); //效果3 
 
//另外还有一个参数,就是选择器后面写上true的话,就是给所有选择的元素添加放大镜效果,不写的话只有第一个有 
zoom(‘#item',true).init();

样式就通过css来定义,没有写进js里面。

源码下载:点击这里

总结

以上就是这篇文章的全部内容了,希望对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
Vue的Options用法说明
Aug 14 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 #Javascript
js选项卡的制作方法
Jan 23 #Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 #Javascript
详解javascript中对数据格式化的思考
Jan 23 #Javascript
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 #Javascript
You might like
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
php实现webservice实例
2014/11/06 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python饼状图的绘制实例
2019/01/15 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
小学课改工作总结
2015/08/13 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
MySQL创建管理HASH分区
2022/04/13 MySQL
i7 6700处理器相当于i5几代
2022/04/19 数码科技
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android