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>
&...
jQuery插件bxSlider+zoomsl实现商城商品图片轮播放大镜效果
bxSlider.js是一款jquery轮播图插件，可以实现图片并排轮播切换；zoomsl.js是一款jQuery图片放大镜效果插件，可以实现鼠标悬停放大显示图片细节；两个插件结合就可以实现类似于淘宝商品页页的产品轮播和放大显示效果。
bxSlider Github：https://github.com/stevenwanderski/bxslider-4
zoomsl下载：免费可商业商品图片放大镜jqu...
