jQuery焦点图切换自适应效果
自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等。
今天我们要来分享一款很灵活的jQuery焦点图插件,和以前介绍的jQuery焦点图动画类似,它也提供左右切换按钮,同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。
体验效果:http://hovertree.com/texiao/jquery/17/
代码如下:
<!doctype html><html lang="zh"><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" /><link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/17/css/default.css"><link rel="stylesheet" href="http://hovertree.com/texiao/jquery/17/css/jquery.hiSlider.min.css"><style type="text/css">*{margin: 0;padding: 0;}body{font: 14px/2 'Microsoft YaHei', 'Arial';}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;}</style></head><body><div id="wrap"><h1>jquery.hiSlider.js 插件使用说明及示例</h1><h2>example1: 默认设置</h2><ul class="hiSlider hiSliderHovertree1"><li data-title="11111" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/1.jpg" ></li><li data-title="22222" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/2.jpg" ></li><li data-title="33333" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/3.jpg" ></li><li data-title="44444" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/4.jpg" ></li><li data-title="55555" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/5.jpg" ></li></ul><a href="http://hovertree.com/hvtart/bjae/yqhu1ug9.htm">原文</a><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a><a href="http://hovertree.com/menu/jquery/">jQuery</a> <h2>example2: 弹性布局 + 淡入淡出</h2><ul class="hiSlider hiSliderHovertree2"><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/1.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/2.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/3.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/4.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/5.jpg" ></li></ul><h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2><ul class="hiSlider hiSliderHovertree3"><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/1.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/2.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/3.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/4.jpg" ></li><li class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/5.jpg" ></li></ul><h2>example4: 改变方向</h2><ul class="hiSlider hiSliderHovertree4"><li data-title="11111" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/1.jpg" ></li><li data-title="22222" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/2.jpg" ></li><li data-title="33333" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/3.jpg" ></li><li data-title="44444" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/4.jpg" ></li><li data-title="55555" class="hiSlider-item"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/images/5.jpg" ></li></ul><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p><p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a></p></div></div><script src='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script><script src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/17/js/jquery.hiSlider.min.js"></script><script>$('.hiSliderHovertree1').hiSlider();$('.hiSliderHover'+'tree2').hiSlider({isFlexible: true,mode: 'fade',isSupportTouch: false,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></body></html>
更多内容: http://www.cnblogs.com/roucheng/p/texiao.html
原标题:强大的自适应jQuery焦点图特效
关键词:jquery