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="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>

<li data-title="22222" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>

<li data-title="33333" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li>

<li data-title="44444" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>

<li data-title="55555" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></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="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li>

</ul>

<h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2>

<ul class="hiSlider hiSliderHovertree3">

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何问起"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>

<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li>

</ul>

<h2>example4: 改变方向</h2>

<ul class="hiSlider hiSliderHovertree4">

<li data-title="11111" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>

<li data-title="22222" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>

<li data-title="33333" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何问起"></li>

<li data-title="44444" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>

<li data-title="55555" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></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="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

<script src="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焦点图特效的更多相关文章

  1. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  2. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  3. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  4. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  5. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  6. 超酷实用的jQuery焦点图赏析及源码

    焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天我们要分享一些超酷而且实用的jQuery ...

  7. 分享8个常用的jQuery焦点图插件

    现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...

  8. 8款超绚丽的jQuery焦点图动画

    随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...

  9. 西山居首页jQuery焦点图代码

    西山居首页jQuery焦点图代码是一款带文字描述,左右箭头,索引按钮,自动轮播切换的jQuery特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style ...

随机推荐

  1. Unity依赖注入使用详解

    写在前面 构造器注入 Dependency属性注入 InjectionMethod方法注入 非泛型注入 标识键 ContainerControlledLifetimeManager单例 Unity注册 ...

  2. RBAC模型速记

    RBAC Model core concept: user,role,permission,operation,resource user has many roles, assign role to ...

  3. 借助 Lucene.Net 构建站内搜索引擎（上）

    前言:最近翻开了之前老杨(杨中科)的Lucene.Net站内搜索项目的教学视频,于是作为老杨脑残粉的我又跟着复习了一遍,学习途中做了一些笔记也就成了接下来您看到的这篇博文,仅仅是我的个人笔记,大神请呵 ...

  4. Silverlight和WPF中DataContractJsonSerializer对时间的处理差异

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com Silverlight脱胎于WPF,他们的行为不完全并不完全相同,DataContractJsonSerializ ...

  5. [转]GC简介

    [转]GC简介 原文链接:http://www.cnblogs.com/cposture/p/4845189.html 原文写得太好了,这里转一下. 1 GC机制 1.1 对象 从计算机的角度,装有数 ...

  6. Html5绘制时钟

    最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: <script type="text/ja ...

  7. EMC学习之电磁辐射

    我们在接触新鲜事物的时候,通常习惯用自己熟悉的知识去解释自己不熟悉的事物.EMC知识更多的涉及到微波和射频,对于像我这种专注于信号完整性而 对EMC知识知之甚少的菜鸟来说,最初也只能用SI的一些基础知 ...

  8. UITest 单元测试常用的断言

    XCTFail(format…) 生成一个失败的测试: XCTFail(@"Fail"); XCTAssertNil(a1, format...) 为空判断, a1 为空时通过,反 ...

  9. 《Spark快速大数据分析》—— 第五章 数据读取和保存

    由于Spark是在Hadoop家族之上发展出来的,因此底层为了兼容hadoop,支持了多种的数据格式.如S3.HDFS.Cassandra.HBase,有了这些数据的组织形式,数据的来源和存储都可以多 ...

  10. int and string

    int转string一.#include <sstream> int n = 0; std::stringstream ss; std::string str; ss<<n; ...