你的位置:首页 > 软件开发 > Java > 基于jQuery自适应焦点图特效

基于jQuery自适应焦点图特效

发布时间:2016-01-27 14:00:18
自适应jQuery焦点图特效。这是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等。效果图如下:在线预览 源码下载实现的代码。html代码:<div id="wrap"> < ...

基于jQuery自适应焦点图特效

自适应jQuery焦点图特效。这是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等。效果图如下:

基于jQuery自适应焦点图特效

在线预览    源码下载

实现的代码。

html代码:

<div id="wrap">   <h1>jquery.hiSlider.js 插件使用说明及示例</h1>   <h2>example1: 默认设置</h2>    <ul class="hiSlider hiSlider1">     <li data-title="11111" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/1.jpg" ></li>     <li data-title="22222" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li>     <li data-title="33333" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li>     <li data-title="44444" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li>     <li data-title="55555" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li>   </ul>    <h2>example2: 弹性布局 + 淡入淡出</h2>   <ul class="hiSlider hiSlider2">     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/1.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li>   </ul>    <h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2>   <ul class="hiSlider hiSlider3">     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/1.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li>     <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li>   </ul>    <h2>example4: 改变方向</h2>   <ul class="hiSlider hiSlider4">     <li data-title="11111" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/1.jpg" ></li>     <li data-title="22222" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li>     <li data-title="33333" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li>     <li data-title="44444" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li>     <li data-title="55555" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li>   </ul>   <script src='/images/loading.gif' data-original="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script> </div>

原标题:基于jQuery自适应焦点图特效

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录