当前位置:首页 > 日记 > 正文

利用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里面。

源码下载:点击这里

总结

以上就是这篇文章的全部内容了,希望对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

JS实现的模仿QQ头像资料卡显示与隐

JS实现的模仿QQ头像资料卡显示与隐

显示,头像,效果,资料卡,电脑软件,本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考,具体如下:我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当…

jquery精度计算代码 jquery指定精

jquery精度计算代码 jquery指定精

精度,计算,小数位,精确,代码,本文实例为大家分享了jquery指定精确小数位的具体代码,供大家参考,具体内容如下/*** 将标签的值格式化* id 标签id* min 最小值* max 最大值*/function toFloat(id,min,max){ var htmlVal = $("#"+id).html(); …

怎么找出来被隐藏了的QQ查找被隐藏

怎么找出来被隐藏了的QQ查找被隐藏

方法,查找,电脑软件,QQ,strong,  有时候明明登录了QQ,但是却找不到QQ图标在哪里,这是因为被隐藏的原因。那么怎么把QQ找出来呢?下面小编告诉你查找被隐藏的QQ方法,希望对你有所帮助!找出来被隐藏了的QQ的方法首先要登录自己的QQ账号然后查看…

如何巧用Excel公式计算个人所得税

如何巧用Excel公式计算个人所得税

计算,个人所得税,巧用,公式,电脑软件,  个人所得税的计算看起来比较复杂,似乎不用VBA宏编程而只用公式来计算是一件不可能的事。其实,Excel提供的函数公式不但可以计算个人所得税,而且还有很大的灵活。以下是小编为您带来的关于巧用Excel公…

WPS演示怎么设置自动切换幻灯片WPS

WPS演示怎么设置自动切换幻灯片WPS

方法,设置,幻灯片,演示,设置自动,  WPS演示课件是应用最广泛的多媒体教学资源,它能够有效的将文字、图形、音频、视频、动画等多种元素融合在一起;很多情况下都是点击鼠标才会切换到下一张幻灯片,这样很不好,有些场合需要自动切换,那么如何…

jQuery Chosen通用初始化

jQuery Chosen通用初始化

初始化,通用,电脑软件,jQuery,Chosen,一直在用Chosen这个js插件,其目的就是美化下拉框。github地址:https://harvesthq.github.io/chosen/no_results_text:"xxxxx"无搜索结果时显示的文本allow_single_deselect:true 是否允许取消选择disable…

jquery中$.fn和滚动效果实现的必备

jquery中$.fn和滚动效果实现的必备

知识,滚动效果,电脑软件,jquery,fn,前言图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery、IIFE、setInterval等基础以及$.fn用法:jquery中$.fn用法$.fn是jquery的命名空间,如果对jq…

怎样在WPS表格中制作下拉列表

怎样在WPS表格中制作下拉列表

下拉列表,表格,电脑软件,WPS,  通过数据有效性来制作下拉列表,这样就可以不用手动输入。只需要用鼠标点击就可以选择你需要的内容输入到单元格里了哦,很方便的操作。以下是小编为您带来的关于WPS表格中制作下拉列表,希望对您有所帮助。WPS表…

微信小程序 setData的使用方法详解

微信小程序 setData的使用方法详解

使用方法,详解,程序,电脑软件,微信小,微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题。如下:官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的:Page({ data: { array: [{text: 'init …

js中new一个对象的过程

js中new一个对象的过程

一个对象,过程,电脑软件,js,使用new关键字调用函数(new ClassA(…))的具体步骤:1. 创建空对象{}2. 使用新对象,调用函数,函数中的this被指向新实例对象: {}.构造函数(); 3. 设置新对象的constructor属性为构造函数的名称,设置新…

excel 排名公式的使用方法excel 排

excel 排名公式的使用方法excel 排

公式,使用方法,电脑软件,excel,strong,  Excel中的排名公式具体该如何使用呢?接下来是小编为大家带来的excel 排名公式的使用方法,供大家参考。excel 排名公式的使用方法排名公式使用步骤1:按公式为成绩排名,虽然大家知道RANK能用来排名,但是…

wps中怎么快速复制表格相同内容

wps中怎么快速复制表格相同内容

方法,表格,快速,内容,电脑软件,  表格的编制是办公室里几乎每天都在使用的,同一表格中相同内容的文字要出现在不同行列中,也许你习惯于采用复制、粘贴的方式也处理,其实小编有更加简单快捷的方法,下面小编马上就告诉大家wps中快速复制表格相…