利用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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
layui 表格的属性的显示转换方法
Aug 14 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 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
德生S2000电路分析
2021/03/02 无线电
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
python开发简易版在线音乐播放器
2017/03/03 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
Java语言的优势
2015/01/10 面试题
运动会闭幕式解说词
2014/02/21 职场文书
项目经理聘任书
2014/03/29 职场文书
法人代表授权委托书
2014/04/08 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
初中生物教学反思
2016/02/20 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL