利用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 相关文章推荐
javascript算法学习(直接插入排序)
Apr 12 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
原生js+ajax分页组件
Jan 30 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
档案接收函
2014/01/13 职场文书
国际贸易求职信
2014/07/05 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书