图片高度超过DOM元素节点高度，且父元素添加了overflow:hidden;图片超过高度的部分不会显示，通过鼠标悬浮图片，图片向上滚动的方式显示被截取的部分。 HTML代码： <div class="scroll"> <img src="图片URL地址" alt="长图片"/> </div> CSS代码： .scroll {padding-bottom:50%; overflow:hidden;} .scroll img {display: block; position: absolute; left:0; ...
新旧两张图片效果的不同对比，实现效果通过拖拽按钮对比相同位置的差异。 HTML代码： <div class="compare"> <div class="pic before" style="background-image:url(before.jpg);"></div> <div class="pic after" style="background-image:url(after.jpg);"></div> <div class="drag"> <div...
在修改网页的焦点图效果：当前焦点是视频的时候，暂停焦点图的自动轮播，当视频播放完成后再启用焦点图的自动轮播。查看代码发现该焦点图使用的是 SuperSlide.js 插件，这是一款存在时间挺长的 jquery 焦点图插件，但多年的更新，插件的参数还是不够丰富全面，一些效果实现起来会比较麻烦。不过庆幸的是 SuperSlide.js 插件有提供 startFun 和 endFun 函数。 温馨提示：以下代码适用于 SuperSlide 2.1+版本。 实现代码： HTML代码 <div class="slides"> <...
IE9及IE9以下浏览器不支持placeholder属性，对IE9的placeholder兼容性处理方法通常是把placeholder的属性值放在value属性中，但这样不利于判断值是否为空，兼容性比较好一个方法是用一个元素覆盖在输入框上面代替placeholder，点击时再隐藏。 HTML代码 <div class="input"> <label class="placeholder" for="inpName"><i class="rq">Name</i></label> <i...
使用load()方法可以判断图片是否加载完成，但每次只判断一张图片，如果是判断多张图片是否加载完成，那么就需要写多几行代码。下面代码在jquery 2.2.4版本测试可用。 参考代码： function imgLoad(){ $.ajaxSetup ({ cache: false });//兼容IE var _img = $('.getimg img'); var _imgNum = _img.length; if(_imgNum > 0){ _img.on('load',function() { ...
jquery响应式轮播图插件owl.carousel.js功能完善，参数丰富，可以改造成多种网页前端显示效果。比如常见的商城网站产品图片展示效果。 引用插件文件和样式文件 <link rel="stylesheet" type="text/css" href="owl.carousel.min.css" media="screen"/> <script src="owl.carousel.min.js"></script> HTML代码： <!--by neirong.org--> &...
通过拖拉进度条改变指定数值。 HTML代码 <div class="data"> ( <i data="20">0.7</i> 元 ) </div> <div class="drag"> <div class="line"> <div class="v"></div> <div class="star"></div> </div> </div> CSS代码 .d...
新闻自动向上滚动效果，鼠标悬停在新闻上时，停止滚动，鼠标离开则恢复滚动状态。方法是通过setInterval()和clearInterval()两个函数实现。 HTML代码 <div class="express"> <ul> <li><a href="#" title="滚动新闻标题一">滚动新闻标题一</a></li> <li><a href="#" title="滚动新闻标题一">滚动新闻标题二</a></li> <l...
bxSlider.js是一款jquery轮播图插件，可以实现图片并排轮播切换；zoomsl.js是一款jQuery图片放大镜效果插件，可以实现鼠标悬停放大显示图片细节；两个插件结合就可以实现类似于淘宝商品页页的产品轮播和放大显示效果。 bxSlider Github：https://github.com/stevenwanderski/bxslider-4 zoomsl下载：免费可商业商品图片放大镜jquery插件zoomsl.js 实现代码 引用插件： PS：自行前往官网或Github下载jQuery库、...
五图并列，中间图片放大展示的jQuery图片滚动插件，点击产品图片，或者点击左右箭头，或者拖动顶部的滚动条，产品图片就会放大显示，并且可以左右滚动。产品图片下面即是产品的名称和简略的描述，有利于SEO。 使用方法： 1、在head引入下面的css代码： <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:none;} body{font:12px/180% Arial, He...
常见的网站单行新闻公告上翻播放的效果。 jQuery代码： function b(){ t = parseInt(x.css('top')); y.css('top','19px'); x.animate({top: t - 19 + 'px'},'slow'); //19为每个li的高度 if(Math.abs(t) == h-19){ //19为每个li的高度 y.animate({top:'0px'},'slow'); z=x; x=y; y=z; } setTimeout(b,3000);//...
原理比较简单：将要滚动显示的区域的CSS的override设为hidden，宽度设成一个比较大的值，如4000px,然后每次点击上一页或下一页的 按钮时，计算当前页数，如果已经到了最后一页，则回到第一页，滚动是通过控制div的left属性实现的，需要两个div，外面的div的 position设为retative，里面的DIV的position设为absolute。 HTML代码： <div id="product"> <h2><span class="arrow">arrow</span>产品展...