强大的自适应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)
blank

相关推荐

  • pythoncharm注释快捷键_多行注释以什么开头

    pythoncharm注释快捷键_多行注释以什么开头PyCharm多行注释快捷键为Ctrl+/。

  • js 给元素添加自定义属性

    js 给元素添加自定义属性给元素添加自定义属性obj.setAttribute(‘attr_name’,’attr_value’);//例如obj.setAttribute(‘class’,’snow-container’)给元素添加class属性的三种方法document.getElementsByTagName(‘body’)[0].className=’snow-container’;//设置为新的…

  • 编程打开控制面板及各项

    编程打开控制面板及各项程序打组件服务C:\WINDOWS\system32\Com\comexp.msc注销程序路径C:\WINDOWS\system32\logoff.exe智能ABC的用户词库位置C:\DocumentsandSettings\用户名\ApplicationData\Microsoft\IME\winabc造字程序的路径C:\WINDOWS\system32\eudcedit.exe语言栏显示…

  • webgame开发中常用的一些类

    webgame开发中常用的一些类这个只是自己在开发游戏过程中所总结出来的,仅供参考。1、加载队列QueueLoader,游戏一定是有很多的资源需要加载,这个类可以让资源以顺序进行加载;2、ZIP解压工具类nochump类,这里有之前写过的例子–>使用as工具包解压zip文件。这里还有另外一个Zip处理类ZipArchive3、声音管理类SoundManager,游戏一般都有很多音乐需要管理:…

  • DetailsView使用DropDownList1

    DetailsView使用DropDownList1 DetailsView使用DropDownList1类型”>012300112233在插入(DetailsView1_ItemInserting)或更新(DetailsView1_ItemUpdating)事件中加入代码:stringstr=((DropDownList)DetailsView1.Rows[3].Cells[1].FindControl(“DropDownList1”

  • android账号与同步之同步实现

    android账号与同步之同步实现

发表回复

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

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