强大的自适应jQuery焦点图特效

jQuery焦点图切换自适应效果自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等。今天我们要来分享一款很灵活的jQuery焦点图

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

强大的自适应jQuery焦点图特效此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

jQuery焦点图切换自适应效果

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

今天我们要来分享一款很灵活的jQuery焦点图插件,和以前介绍的jQuery焦点图动画类似,它也提供左右切换按钮,同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。

体验效果:http://hovertree.com/texiao/jquery/17/

强大的自适应jQuery焦点图特效

代码如下:

<!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="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/29405073-d93c-4718-a26c-8856cb9e0adf-1639931087306.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="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/29405073-d93c-4718-a26c-8856cb9e0adf-1639931087306.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="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/29405073-d93c-4718-a26c-8856cb9e0adf-1639931087306.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="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/29405073-d93c-4718-a26c-8856cb9e0adf-1639931087306.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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120686.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • frp内网穿透设置_frp内网穿透原理

    frp内网穿透设置_frp内网穿透原理十分钟教你配置frp实现内网穿透一、frp的作用利用处于内网或防火墙后的机器,对外网环境提供http或https服务。 对于http,https服务支持基于域名的虚拟主机,支持自定义域名绑定,使多个域名可以共用一个80端口。 利用处于内网或防火墙后的机器,对外网环境提供tcp和udp服务,例如在家里通过ssh访问处于公司内网环境内的主机。二、配置说明1、…

  • Android开发指南-三维图形

    Android开发指南-三维图形

  • idea 2022 mac 激活码(JetBrains全家桶)[通俗易懂]

    (idea 2022 mac 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 数据库三大范式通俗解释[通俗易懂]

    数据库三大范式通俗解释[通俗易懂]一范式就是属性不可分割。属性是什么?就是表中的字段。不可分割的意思就按字面理解就是最小单位,不能再分成更小单位了。这个字段只能是一个值,不能被拆分成多个字段,否则的话,它就是可分割的,就不符合一范式。不过能不能分割并没有绝对的答案,看需求,也就是看你的设计目标而定。举例:学生信息组成学生信息表,有姓名、年龄、性别、学号等信息组成。姓名不可拆分吧?所以可以作为该表的一个字段。但我要说这…

    2022年10月27日
  • 404notfound软件下载_浏览器打开网址404

    404notfound软件下载_浏览器打开网址404当网上的那些修改程序池的方法,无法解决此问题时,可以尝试修改以下的参数:1.控制面板–&amp;gt;程序–&amp;gt;启用或关闭Windows功能–&amp;gt;InternetInformationServices–&amp;gt;Web管理工具–&amp;gt;子项全部勾选上.2.InternetInformationServices–&amp;gt;应用程序开发功能–&amp;gt;子项全部勾选上.重

  • nginx的四个基本功能

    nginx的四个基本功能

    2021年10月29日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号