利用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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 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 小乘法表实现代码
2009/07/16 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS实现购物车特效
2017/02/02 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
详解python中的json和字典dict
2018/06/22 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
Ref与out有什么不同
2012/11/24 面试题
预备党员入党思想汇报
2014/01/04 职场文书
建议书标准格式
2014/03/12 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
2019公司管理制度
2019/04/19 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers