向下滑动显示slideDown()和向上滑动隐藏slideUp()是jquery内置的常用方法，现在再自定义增加一组向右滑动显示slideRight()和向左滑动隐藏的方法slideLeft()，其实也是一个简单的jquery插件。 代码如下： jQuery.fn.slideLeft = function( speed, callback ) { this.animate({ width : "hide", paddingLeft : "hide", paddingRight : "hide...
在修改网页的焦点图效果：当前焦点是视频的时候，暂停焦点图的自动轮播，当视频播放完成后再启用焦点图的自动轮播。查看代码发现该焦点图使用的是 SuperSlide.js 插件，这是一款存在时间挺长的 jquery 焦点图插件，但多年的更新，插件的参数还是不够丰富全面，一些效果实现起来会比较麻烦。不过庆幸的是 SuperSlide.js 插件有提供 startFun 和 endFun 函数。 温馨提示：以下代码适用于 SuperSlide 2.1+版本。 实现代码： HTML代码 <div class="slides"> <...
淘宝网宝贝详情里的图片，点击后可以弹窗预览，且支持触摸放大缩小，体验非常好，viewer.js插件就是款可以实现类似效果、功能完善的图片预览js插件，有纯js版本和jQuery版本。 viewer.js插件可以实现点击图片弹窗显示，PC端支持鼠标键盘移动、放大缩小，移动端支持触摸移动缩放等，还支持旋转（类似微博图片的旋转）、水平/垂直翻转、全屏幻灯片、缩略图、标题以及多种自定义事件等，另外还提供了多种回调函数。 viewer.js插件下载 纯JS版本：https://github.com/fengyuanchen/viewerj...
animate.css 动画库搭配 wow.js 插件能实现当浏览器滚动到对应网页元素时出现动态加载效果，但只能执行一次，即再次滚动到该元素位置时不会再执行对应的动画加载效果，而要实现每次上下滚动都会执行动画加载效果，就还需要对 wow.js 插件的源代码进行修改，目前已经有人这样做了，下面是君度网络公司修改过后的 wow.js 插件代码，使用该代码可以实现每次滚动到对应元素都会执行动画效果。 完整代码 (function() { var MutationObserver, Util, WeakMap, getComputedStyle, getCompu...
在响应式网页开发中 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插件的slide横向滑块不能设置自动轮播，如果要使slide自动轮播可以使用fullpage插件的moveSlideRight()方法或moveSlideLeft()配合js的setInterval()实现。 代码 setInterval(function(){ $.fn.fullpage.moveSlideRight(); },5000); 或 setInterval(function(){ $.fn.fullpage.方法或moveSlideLeft(); },5000); 如果还想实现鼠标悬停...
使用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 ...
mousewheel.js是一个delta规范化、跨浏览器监听鼠标上下滚动的jquery插件，支持IE6+、Firefox、Chrome、Safari浏览器。 通过mousewheel.js插件可以判断鼠标滚轮是向上还是向下滚动、往左还是往右滚动，插件支持mousewheel和unmousewheel，通俗地理解即启用插件功能和关闭插件功能的意思。 插件Github主页：https://github.com/jquery/jquery-mousewheel 使用插件功能： 方式一：使用on调用 // using on $('#el...
clipboardjs插件可以实现点击文本复制到剪贴板的效果，常见的应用有点击复制链接。clipboardjs插件小巧简单，压缩后仅有11KB大小，且没有过多的配置，不依赖Flash以及任何臃肿的框架，且兼容性好，基本支持目前主流的PC端和手机端浏览器，如IE9+、Chrome 42+、Edge 12+、Firefox 41+、Opera 29+、Safari10+ 插件官方： 1、插件下载 https://github.com/zenorocha/clipboard.js/releases 2、使用示例： 示例一 ...
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插件兼容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的错误，完整错误如下： 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、在...