利用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+JS构建的图片查看器
Jul 22 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
原生js实现弹窗消息动画
Nov 20 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JavaScript中的私有成员
2006/09/18 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python 的 with 语句详解
2014/06/13 Python
python求绝对值的三种方法小结
2019/12/04 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python GUI计算器的实现
2020/10/09 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
大学军训通讯稿
2014/01/13 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
教师求职自荐信范文
2015/03/04 职场文书
六一亲子活动感想
2015/08/07 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang