利用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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
Javascript动画效果(1)
Oct 11 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 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
PHP学习之PHP表达式
2006/10/09 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
基于vue.js组件实现分页效果
2018/12/29 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python得到windows自启动列表的方法
2018/10/14 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
.net面试题
2015/12/22 面试题
春节活动策划方案
2014/01/24 职场文书
优秀公益广告词大全
2014/03/19 职场文书
研究生导师推荐信
2014/09/06 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
用Python生成会跳舞的美女
2022/01/18 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
nginx之内存池的实现
2022/06/28 Servers