菜单

jQuery自定义向右滑动显示隐藏效果的方法slideLeft(),slideRight()

向下滑动显示slideDown()和向上滑动隐藏slideUp()是jquery内置的常用方法,现在再自定义增加一组向右滑动显示slideRight()和向左滑动隐藏的方法slideLeft(),其实也是一个简单的jquery插件。 代码如下: jQuery.fn.slideLeft = function( speed, callback ) { this.animate({ width : "hide", paddingLeft : "hide", paddingRight : "hide...

SuperSlide.js插件实现当video视频播放完后再切换下一张

在修改网页的焦点图效果:当前焦点是视频的时候,暂停焦点图的自动轮播,当视频播放完成后再启用焦点图的自动轮播。查看代码发现该焦点图使用的是 SuperSlide.js 插件,这是一款存在时间挺长的 jquery 焦点图插件,但多年的更新,插件的参数还是不够丰富全面,一些效果实现起来会比较麻烦。不过庆幸的是 SuperSlide.js 插件有提供 startFun 和 endFun 函数。 温馨提示:以下代码适用于 SuperSlide 2.1+版本。 实现代码: HTML代码 <div class="slides"> <...

支持移动端图片放大缩小旋转的图片预览js插件viewer.js

支持移动端图片放大缩小旋转的图片预览js插件viewer.js

淘宝网宝贝详情里的图片,点击后可以弹窗预览,且支持触摸放大缩小,体验非常好,viewer.js插件就是款可以实现类似效果、功能完善的图片预览js插件,有纯js版本和jQuery版本。 viewer.js插件可以实现点击图片弹窗显示,PC端支持鼠标键盘移动、放大缩小,移动端支持触摸移动缩放等,还支持旋转(类似微博图片的旋转)、水平/垂直翻转、全屏幻灯片、缩略图、标题以及多种自定义事件等,另外还提供了多种回调函数。 viewer.js插件下载 纯JS版本:https://github.com/fengyuanchen/viewerj...

wow.js实现上下滚动页面时重复执行动画的效果

animate.css 动画库搭配 wow.js 插件能实现当浏览器滚动到对应网页元素时出现动态加载效果,但只能执行一次,即再次滚动到该元素位置时不会再执行对应的动画加载效果,而要实现每次上下滚动都会执行动画加载效果,就还需要对 wow.js 插件的源代码进行修改,目前已经有人这样做了,下面是君度网络公司修改过后的 wow.js 插件代码,使用该代码可以实现每次滚动到对应元素都会执行动画效果。 完整代码 (function() { var MutationObserver, Util, WeakMap, getComputedStyle, getCompu...

实现IE10/IE11支持object-fit属性的插件bideo.js

实现IE10/IE11支持object-fit属性的插件bideo.js

在响应式网页开发中 object-fit 属性是极为常用的一个css属性,遗憾的是IE浏览器全系列都不支持 object-fit 属性,但是可以借助bideo.js插件实现 IE10 和 IE11 对 object-fit 的支持。 PS:不支持 IE9 和 Edge 插件下载:https://github.com/rishabhp/bideo.js 插件使用 HTML代码: <!-- 引入插件 --> <script src="bideo.js"></script> <!...

实现fullpage.js插件横向滑块slide自动轮播效果

实现fullpage.js插件横向滑块slide自动轮播效果

fullpage插件的slide横向滑块不能设置自动轮播,如果要使slide自动轮播可以使用fullpage插件的moveSlideRight()方法或moveSlideLeft()配合js的setInterval()实现。 代码 setInterval(function(){ $.fn.fullpage.moveSlideRight(); },5000); 或 setInterval(function(){ $.fn.fullpage.方法或moveSlideLeft(); },5000); 如果还想实现鼠标悬停...

jquery实现淘宝APP收货地址地区联动选择效果(优化版)

jquery实现淘宝APP收货地址地区联动选择效果(优化版)

使用jQuery模仿淘宝移动端APP中,添加收货地址时选择所在地区的省、市、区、县街道四级联动的选择效果。 效果如下图: 原插件:https://www.jq22.com/jquery-info21567 下面是把代码优化过后的版本。 1、把下面代码保存为areaSelect.js文件: var first_char; var listArr = []; var provinceArr = []; var province = ''; var city = ''; var county = ''; var ...

jquery判断鼠标上下滚动插件jquery.mousewheel.js

mousewheel.js是一个delta规范化、跨浏览器监听鼠标上下滚动的jquery插件,支持IE6+、Firefox、Chrome、Safari浏览器。 通过mousewheel.js插件可以判断鼠标滚轮是向上还是向下滚动、往左还是往右滚动,插件支持mousewheel和unmousewheel,通俗地理解即启用插件功能和关闭插件功能的意思。 插件Github主页:https://github.com/jquery/jquery-mousewheel 使用插件功能: 方式一:使用on调用 // using on $('#el...

点击复制链接jQuery插件clipboardjs

clipboardjs插件可以实现点击文本复制到剪贴板的效果,常见的应用有点击复制链接。clipboardjs插件小巧简单,压缩后仅有11KB大小,且没有过多的配置,不依赖Flash以及任何臃肿的框架,且兼容性好,基本支持目前主流的PC端和手机端浏览器,如IE9+、Chrome 42+、Edge 12+、Firefox 41+、Opera 29+、Safari10+ 插件官方: 1、插件下载 https://github.com/zenorocha/clipboard.js/releases 2、使用示例: 示例一 ...

jquery插件owl.carousel.js实现时间轴切换效果的发展历程

jquery插件owl.carousel.js实现时间轴切换效果的发展历程

owl carousel是款响应式的轮播图插件,功能完善,参数丰富,使用该插件可以实现各种轮播切换效果,比如时间轴型的公司发展历程。效果如下: 下面代码基于jquery-3.3.1和Owl Carousel v2.3.4版本实现,插件文件可以在GitHub下载。 Github主页:https://github.com/OwlCarousel2/OwlCarousel2 1、引入插件文件: <link rel="stylesheet" type="text/css" href="owl.carousel.min.css" m...

免费可商业商品图片放大镜jquery插件zoomsl.js

免费可商业商品图片放大镜jquery插件zoomsl.js

俄罗斯的一款商品图片放大镜jquery插件,类似于淘宝商品在鼠标悬停上去,右侧显示细节放大镜窗口。zoomsl插件兼容IE8+、Chrome 1+、Firefox 2+、safari 2+浏览器。商业许可及个人许可均免费。 插件下载:jquery.zoomsl.plugin.zip 插件教程 基础应用 HTML代码结构: <img class="my-foto" src="/images/image1-small.jpg" data-large="/images/image1-big.jpg" title="...

jquery.form.js错误$.handleError is not a function的解决方法

使用jquery.form.js插件,提交表单的时间,提示错误$.handleError is not a function的错误,完整错误如下: TypeError: $.handleError is not a function jquery.form.js:339:7 错误原因: $.handleError存在于jQuery-1.4.2之前的版本中,jQuery-1.4.2之后的版本废弃了$.handleError 解决方法: 1、把jquery.js库换成1.4.2之前的版本。(不推荐该方法) 2、在...