Swiper.js使用creativeEffect创意切换实现3D圆弧轮播效果
Swiper.js默认插件提供了多种切换效果，其中creativeEffect创意切换效果参数多，可自定义性强，可以实现多种3D视觉的轮播切换，比如圆弧旋转木马轮播效果。HTML代码：<div class="arclist">
<div class="swiper">
...
HTML+SVG地图标注点动态线条扩散效果的笨方法
平面地图标注点线条连接效果。常用于公司的子公司或办事处在地图上标注点的效果，线条由总公司的标注点动态发散至各子公司或公事处，实现关联性的效果。HTML代码：<section id="global">
<div class="box" data-aos="fade-up">...
最常用的web html前端切换多语言网站的下拉菜单样式
有多个不同语言的网站，在右上角添加各语言网站的入口，最常用的前端样式就是下拉菜单。效果如下：HTML代码：<div id="language">
<span>中文</span>
<ul>
...
网页常用侧边栏悬浮客服小工具代码
随着网页滚动始终固定在侧边的客服小工具，用于显示在线咨询、联系电话、微信公众号、返回顶部等信息。HTML+CSS结合jQuery代码，可以实现鼠标悬浮或点击显示电话号码、二维码图片等。
代码效果：
HTML代码：
<div id="widget">
<ul>
<li>
<a class="p...
jquery鼠标悬浮元素时图片向上滚动的代码
图片高度超过DOM元素节点高度，且父元素添加了overflow:hidden;图片超过高度的部分不会显示，通过鼠标悬浮图片，图片向上滚动的方式显示被截取的部分。
HTML代码：
<div class="scroll">
<img src="图片URL地址" alt="长图片"/>
</div>
CSS代码：
.scroll {padding-bottom:5...
jquery左右拖拽对比前后效果图片的代码
新旧两张图片效果的不同对比，实现效果通过拖拽按钮对比相同位置的差异。
HTML代码：
<div class="compare">
<div class="pic before" style="background-image:url(before.jpg);"></div>
<div class="pic after" style="backgro...
SuperSlide.js插件实现当video视频播放完后再切换下一张
在修改网页的焦点图效果：当前焦点是视频的时候，暂停焦点图的自动轮播，当视频播放完成后再启用焦点图的自动轮播。查看代码发现该焦点图使用的是 SuperSlide.js 插件，这是一款存在时间挺长的 jquery 焦点图插件，但多年的更新，插件的参数还是不够丰富全面，一些效果实现起来会比较麻烦。不过庆幸的是 SuperSlide.js 插件有提供 startFun 和 endFun 函数。
温馨提示：以下代码适用于 Sup...
针对IE9不支持placeholder的兼容处理方法代码
IE9及IE9以下浏览器不支持placeholder属性，对IE9的placeholder兼容性处理方法通常是把placeholder的属性值放在value属性中，但这样不利于判断值是否为空，兼容性比较好一个方法是用一个元素覆盖在输入框上面代替placeholder，点击时再隐藏。
HTML代码
<div class="input">
<label class="placeh...
jquery判断多张图片是否加载完成代码(兼容IE)
使用load()方法可以判断图片是否加载完成，但每次只判断一张图片，如果是判断多张图片是否加载完成，那么就需要写多几行代码。下面代码在jquery 2.2.4版本测试可用。
参考代码：
function imgLoad(){
$.ajaxSetup ({ cache: false });//兼容IE
var _img = $('.getimg img');
var _imgNum =...
jquery插件owl.carousel.js实现商城产品图片展示效果
jquery响应式轮播图插件owl.carousel.js功能完善，参数丰富，可以改造成多种网页前端显示效果。比如常见的商城网站产品图片展示效果。
引用插件文件和样式文件
<link rel="stylesheet" type="text/css" href="owl.carousel.min.css" media="screen"/>
<script src="owl.ca...
简单jquery代码实现拖拉进度条数值效果
通过拖拉进度条改变指定数值。
HTML代码
<div class="data">
( <i data="20">0.7</i> 元 )
</div>
<div class="drag">
<div class="line">
<div class="v"></div>
&l...
jquery向上滚动新闻鼠标悬停效果实现代码
新闻自动向上滚动效果，鼠标悬停在新闻上时，停止滚动，鼠标离开则恢复滚动状态。方法是通过setInterval()和clearInterval()两个函数实现。
HTML代码
<div class="express">
<ul>
<li><a href="#" title="滚动新闻标题一">滚动新闻标题一</a></li>
&...
