利用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
Feb 25 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
RequireJs的使用详解
Feb 19 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
用PHP实现多级树型菜单
2006/10/09 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
利用js对象弹出一个层
2008/03/26 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
python的变量与赋值详细分析
2017/11/08 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
标记环介质访问控制协议
2016/03/27 面试题
合作意向书模板
2014/03/31 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
迎国庆横幅标语
2014/10/08 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android