利用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 :first选择器使用介绍
Aug 09 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
使用node.js搭建服务器
May 20 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
非常好的js代码
2006/06/27 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python分割和拼接字符串
2013/11/01 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python获取url的返回信息方法
2018/12/17 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
餐饮加盟计划书
2014/01/10 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
英语演讲开场白
2015/05/29 职场文书
漂亮妈妈观后感
2015/06/08 职场文书