jQuery手风琴图片相册特效插件
正式版 发表评论
- 软件类别：编程辅助
- 软件大小：427.00 KB
- 更新时间：2017-04-11 12:37
- 软件版本：正式版
- 软件语言：中文
- 软件等级：
- 官方网址：暂无
评分：
好评：0
差评：0
软件介绍
jQuery手风琴效果插件是一款能够将界面显示成手风琴样式的jQuery插件，安装之后就可以使用啦，大气美观，有需要的就来IT猫扑下载吧！
jQuery手风琴图片相册特效插件介绍
jQuery手风琴图片相册特效插件，这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效。
该手风琴图片相册在鼠标滑过时，相应的图片会水平展开，而图片的说明文字则会垂直滑动上来，形成一些视觉差的感觉。
使用方法
在页面中引入样式文件main.css和jquery、jquery.easing.min.js文件，以及轮播图js文件main.js。
css样式
代码如下:
/* CSS Document */
body {
margin: 0 auto;
padding: 0 auto;
font-size: 9pt;
font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
}
.accordion {
padding-left: 0px;
}
.accordion li {
border-top: 1px solid #000;
list-style-type: none;
}
.titlemenu {
width: 100%;
height: 30px;
background-color: #F2F2F2;
padding: 5px 0px;
text-align: left;
cursor: pointer;
}
.titlemenu img {
position: relative;
left: 20px;
top: 5px;
}
.titlemenu span {
display: inline-block;
position: relative;
left: 40px;
}
.submenu {
text-align: left;
width: 100%;
padding-left: 0px;
}
.submenu li {
list-style-type: none;
width: 100%;
}
.submenu li img {
position: relative;
left: 20px;
top: 5px;
}
.submenu li a {
position: relative;
left: 40px;
top: 5px;
text-decoration: none;
}
.submenu li span {
display: inline-block;
height: 30px;
padding: 5px 0px;
}
.hover {
background-color: #4A5B79;
}
自定义js
代码如下:
(function ($) {
piano = function () {
_menu ='[{&title&:&一级目录&,&img&:&images/cog.png&,&submenu&:[{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&}]},{&title&:&一级目录&,&img&:&images/cog.png&,&submenu&:[{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&id&:&4&,&title&:&二级目录&,&img&:&images/monitor_window_3d.png&}]}]';
return ep = {
init: function (obj) {
_menu = eval('(' + _menu + ')');
var li =&&;
$.each(_menu, function (index, element) {
li += '<li><div class=&titlemenu&><img src=' + element.img + ' width=&16& height=&16& alt=&&/><span>' + element.title + '</span></div>';
if(element.submenu!=null)
{
li+='<ul class=&submenu&>';
$.each(element.submenu, function (ind, ele) {
li += '<li><img src=' + ele.img + ' width=&16& height=&16& alt=&&/><span><a href=&#&>' + ele.title + '</a></span></li>';
});
li+='</ul>';
}
li+='</li>';
});
obj.append(li);
}
}
}
$.fn.accordion = function (options) {
var pia = new piano();
pia.init($(this));
return this.each(function () {
var accs = $(this).children('li');
accs.each(reset);
accs.click(onClick);
var menu_li = $(&.submenu&).children(&li&);
menu_li.each(function (index, element) {
$(this).mousemove(function (e) {
$(this).siblings().removeClass(&hover&);
$(this).find(&a&).css(&color&, &#fff&);
$(this).siblings().find(&a&).css(&color&, �&);
$(this).addClass(&hover&);
});
});
});
}
function onClick() {
$(this).siblings('li').find(&ul&).each(hide);
$(this).find(&ul&).slideDown('normal');
return false;
}
function hide() {
$(this).slideUp('normal');
}
function reset() {
$(this).find(&ul&).hide();
}
})(jQuery);
html调用方式
代码如下:
<!doctype html>
<html>
<head>
<meta charset=&utf-8&>
<title>无标题文档</title>
<script src=&jquery-1.8.0.min.js&></script>
<link rel=&stylesheet& type=&text/css& href=&style.css&>
<script src=&accordion.js&></script>
<script type=&text/javascript&>
$(function(){
$(&#accordion&).accordion();
});
</script>
</head>
<body>
<ul id=&accordion& class=&accordion& style=&width:200px;height:500px;&>
</ul>
</body>
</html>
多平台下载
Pc版jQuery手风琴图片相册特效插件 正式版
猜你喜欢
jquery特效插件jQuery插件
jquery特效插件
jquery特效插件是属于jquery插件中其中的一种，适用于jQuery页面，非常方便实用，本专题为大家准备了jquery特效插件大全，为你推荐有jQuery折叠特效插件、QuikQuak音频特效插件、jQuery万花筒动画插件、jQuery鼠标滑过特效插件、jquery轮播图动画特效插件等jquery特效插件效果，喜欢的朋友快来IT猫扑下载吧！...
jQuery插件
jquery插件有哪些?jquery插件有有很多！诸如jquery分页插件、jquery侧边栏插件等都是jquery常用插件，非常实用，IT猫扑小编会长期更新jquery插件库免费下载，有需要的快来看看吧！...
JSCompress(JS脚本代码压缩)
GCViewer(GC日志分析工具)本类最新
Trae电脑版2.10.0
微软.NET Frameworkv4.7.2.0 官方完整版
大漠插件中文汉化模块源码免费版
ApiPost(api调试)v7.0.2 官方版
x64dbg调试工具v2022.08.08 绿色汉化版
Spire.Doc for Javav2.7.3 免费版
SDK Platform Tools for windowsv33.0.1 官方最新版
Postman安装包64位版v9.15.2 官方版
.net程序反编译软件中文版(DotNet Helper)v2.2 绿色版
.net混淆器汉化版(dotNET Reactor)v5.9.8.0 绿色版
.NET代码保护工具.NET Reactorv5.9.8.0 中文汉化版
开源脱壳工具.Net Reactor Slayerv3.0.0.0 中文免费版
鲸鱼无线模块编程PC电脑版v1.0.3 官方最新版
x64dbg辅助管理器v2022.02.25 汉化优化安装版
JDK绿色免安装版附JAVA环境变量一键配置v1.8.0.151 官方版
相关软件
密室逃脱23迷失俱乐部游戏v700.00.04密室逃脱23迷失俱乐部手游是一款口碑极佳的密室游戏，这次还增加了泰坦尼克号上的剧情，每一个场景都是需要极力思考的，喜欢这一个类型的可以再去挑战一下，各种难度的模式，欢迎你来IT猫扑下载。密室逃脱23攻略攻略1、进入第
- jQuery EasyUI1.7.0 官方API中文版
jQueryEasyUIapi是一款基于jQuery界面而开发的图形界面程序,本程序能够快速的针对开发者进行快速开发,节省开发时间,有需要的用户快来IT猫扑下载吧!easyui中文手册介绍jQueryEasyUI是一款基于jQuery开源环境下使用的U
.NET版本检测工具(.NET Version Detector)v17R1b 绿色版.NETVersionDetector是小巧简单的.NET检测工具，当你玩游戏时经常会报错安装.NET程序，安装这个程序就可以帮助用户得到解决，使用.NET版本检测工具可以快速检测.NET框架，自动检测并完成安装，欢迎有需要的用户来IT猫扑下载！关
jquery-1.8.2.min.jsjquery-1.8.2.min.js是开发html5必不可少的，改款版本修复了之前版本的bug和性能衰退等问题，现本站提供最新版本的版本，有需要的朋友快来IT猫扑下载吧。jquery-1.8.2.min.js应用介绍jquery-1.8.2.min.js，是jquery最新的版
下载排行
- 1jstl-1.2.jar包
编程辅助 / 378.00 KB - 2SDK Platform Tools for windows
编程辅助 / 6.04 MB - 3Android Studio 3.4中文补丁
编程辅助 / 83.25 MB - 4易语言vc98linker
编程辅助 / 10.80 MB - 5fastreport中文版(报表控件)
编程辅助 / 2.30 MB - 6fpwin pro7中文手册
编程辅助 / 1.68 MB - 7VOFA+软件32位/64位
编程辅助 / 48.90 MB - 8postman接口测试linux版
编程辅助 / 153.13 MB - 9Device Tree设备堆栈查看工具
编程辅助 / 1.88 MB - 10Visual Assist X(vc编程辅助工具)
编程辅助 / 40.90 MB
网友评论
查看所有0条评论