利用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 相关文章推荐
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Python2.x与Python3.x的区别
2016/01/14 Python
Python中字符串的格式化方法小结
2016/05/03 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
门卫岗位职责
2013/11/15 职场文书
毕业生就业自荐书
2013/12/15 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
导游词之上海豫园
2019/10/24 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python