强大的自适应jQuery焦点图特效
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焦点图特效的更多相关文章
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
- 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器
基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- 超酷实用的jQuery焦点图赏析及源码
焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天我们要分享一些超酷而且实用的jQuery ...
- 分享8个常用的jQuery焦点图插件
现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...
- 8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
- 西山居首页jQuery焦点图代码
西山居首页jQuery焦点图代码是一款带文字描述,左右箭头,索引按钮,自动轮播切换的jQuery特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style ...
随机推荐
- SecureCRT使用技巧
原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 修改SecureCRT颜色配置 option->Global options –> Termina ...
- QParserGenerator的文法文件介绍
在沉默了数月之后,博主心血来潮想继续介绍QParserGenerator,在这里我们将不再继续介绍任何有关于LALR(1)的算法(那东西只会把你的脑子变成一团浆糊),让我们来看一下QParserGen ...
- 3dmax模型制作备忘录
md2导出: http://thegreystudios.com/blog/?p=278 http://wenku.baidu.com/view/4d5652e2524de518964b7d89.ht ...
- 基础才是重中之重~Emit动态构建方法(参数和返回值）
回到目录 对于Emit我们知道它的可以动态构建程序集,类型,方法,属性等,或者说只要手动使用C#创建的东西使用Emit也都可以动态创建它们,Emit由于它的特别之处,所以在很多领域得到了广泛的应用,像 ...
- [oracle]逗号(或分号等)间隔的列,按这一列劈分后转多行
今天遇到个需求,要匹配两个表, 但是关联的字段,在另一个表中是放在一个字段中用分号分割的 怎么全部匹配呢? 后来在网上搜到了, 记录下 SELECT cp.ES_EXTNUMBER, cp.ES_AG ...
- CSS3新特性,绘制常见图形
前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...
- SQL Server ErrorLog
SQL Server 使用ErrorLog记录SQL Server启动和运行过程中的信息,具体信息参考:<SQLSERVER errorlog讲解>.通常来说,ErrorLog是指SQL ...
- Sql Server系列：Select基本语句
1 T-SQL中SELECT语法结构 <SELECT statement> ::= [WITH <common_table_expression> [,...n]] <q ...
- 数据访问模式：Identity Map（标识映射）模式
1.Identity Map模式简介 Identity Map(标识映射)模式是通过将所有已加载对象放在一个映射中确保所有对象只被加载一次,并且在引用这些对象时使用该映射来查找对象.在处理数据并发访问 ...
- 【Win10应用开发】自适应磁贴中的分组
老周在上一篇文章中介绍过了自适应磁贴的基本结构,以及给大家演示了一些例子. 本文老周给大伙伴们说说自适应磁贴的另一个特点——分组呈现. 当磁贴的内容被分组后,每个组中的内容就会被视为一个整体.比如某磁 ...