自适应jQuery焦点图特效
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
济南做网站公司：
<a href="/hvtart/bjae/yqhu1ug9.htm">原文</ a> <a href="">首页</a> <a href="w /">特效</a> <a href="/menu/jquery/">jQuery</a> <h2>example2: 弹性布局 + 淡入淡出</h2> <ul class="hiSlider hiSliderHovertree2"> <li><img src="/jquery/17/images/1.jpg" al t="11111"></li> <li><img src="/jquery/17/images/2.jpg" al t="22222"></li> <li><img src="/jquery/17/images/3.jpg" al t="33333"></li> <li><img src="/jquery/17/images/4.jpg" al t="44444"></li> <li><img src="/jquery/17/images/5.jpg" al t="55555"></li> </ul>
济南做网站公司：
} li{ list-style: none; } li img{ display: block; margin: 0 auto; } #wrap{ width: 80%; min-width: 300px; margin: 10px auto 80px; background: #fefefe; } .hiSlider{ overflow: hidden; height: 280px; width: 500px; background: #eee; } .hiSlider-item{ float: left;
<script src="/jquery/jquery-1.11.3.min.js "></script> <script src="/jquery/17/js/jquery.hiSlider. min.js"></script> <script> $('.hiSliderHovertree1').hiSlider(); $('.hiSliderHover'+'tree2').hiSlider({ isFlexible: true, mode: 'fade', isSupportTouch: false,
</body> </html>
济南做网站公司：
需引入 default.css，jquery.hiSlider.min.css 两个 css 文件。
<h2>example4: 改变方向</h2> <ul class="hiSlider hiSliderHovertree4"> <li data-title="11111"><img src="/jquery/ 17/images/1.jpg" alt="11111"></li> <li data-title="22222"><img src="/jquery/ 17/images/2.jpg" alt="22222"></li> <li data-title="33333"><img src="/jquery/ 17/images/3.jpg" alt="33333 何问起"></li> <li data-title="44444"><img src="/jquery/ 17/images/4.jpg" alt="44444"></li>
<h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2> <ul class="hiSlider hiSliderHovertree3">
济南做网站公司：
<li><img src="/jquery/17/images/1.jpg" al t="11111"></li> <li><img src="/jquery/17/images/2.jpg" al t="22222"></li> <li><img src="/jquery/17/images/3.jpg" al t="33333 何问起"></li> <li><img src="/jquery/17/images/4.jpg" al t="44444"></li> <li><img src="/jquery/17/images/5.jpg" al t="55555"></li> </ul>
济南做网站公司：
今天我们来分享一款很灵活的 jQuery 焦点图插件，和以前介绍的 jQuery 焦点 图动画类似，它也提供左右切换按钮，同时在图片上悬浮自定义图片切换按钮。 切换动画包括上下左右切入动画以及淡入淡出动画。这款 jQuery 焦点图最大的 特点是支持移动端触摸功能。 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1 "> <meta name="viewport" content="width=device-width, initial-scale =1.0"> <title>jQuery 焦点图切换自适应效果</title> <base target="_blank" /> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font: 14px/2 'Microsoft YaHei', 'Arial';
济南做网站公司：
<li data-title="55555"><img src="/jquery/ 17/images/5.jpg" alt="55555"></li> </ul> <div style="text-align:center;margin:50px 0; font:normal 14px/24 px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、 世界之窗. 不支持 IE8 及以下浏览器。</p> <p>来源：<a href="" target="_blank">何问起</a></ p> </div> </div>
济南做网站公司：
ቤተ መጻሕፍቲ ባይዱ
} </style>
</head> <body> <div id="wrap"> <h1>jquery.hiSlider.js 插件使用说明及示例</h1> <h2>example1: 默认设置</h2>
<ul class="hiSlider hiSliderHovertree1"> <li data-title="11111"><img src="/jquery/ 17/images/1.jpg" alt="11111"></li> <li data-title="22222"><img src="/jquery/ 17/images/2.jpg" alt="22222"></li> <li data-title="33333"><img src="/jquery/ 17/images/3.jpg" alt="33333"></li> <li data-title="44444"><img src="/jquery/ 17/images/4.jpg" alt="44444"></li> <li data-title="55555"><img src="/jquery/ 17/images/5.jpg" alt="55555"></li> </ul>
济南做网站公司：
isShowTitle: false, isShowPage: false, titleAttr: function(curIdx){ return $('img', this).attr('alt'); } }); $('.hiSliderHov'+'ertree3').hiSlider({ isFlexible: true, isSupportTouch: true, titleAttr: function(curIdx){ return $('img', this).attr('alt'); } }); $('.hiSliderHover'+'tree4').hiSlider({ startSlide: 2, direction: 'top' }); </script>