利用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扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
js常用DOM方法详解
Feb 04 Javascript
canvas时钟效果
Feb 16 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
Python学习笔记_数据排序方法
2014/05/22 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Django中create和save方法的不同
2019/08/13 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python 变量的创建过程详解
2019/09/02 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
独生子女证明范本
2015/06/19 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
基于Python实现西西成语接龙小助手
2022/08/05 Golang