利用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 jscroll模拟html元素滚动条
Dec 18 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
多种方式实现js图片预览
Dec 12 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
学习php笔记 字符串处理
2010/10/19 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
js 编写规范
2010/03/03 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python中的json总结
2018/10/11 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
新闻专业学生的自我评价
2014/02/13 职场文书
班级文化建设标语
2014/06/23 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
公司承诺书格式范文
2015/04/28 职场文书
干部培训简讯
2015/07/20 职场文书
总结Python变量的相关知识
2021/06/28 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS