jquery手风琴效果插件下载-jQuery手风琴图片相册特效插件下载正式版-IT猫扑网

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", "#000");

$(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>

<title>无标题文档</title>

$(function(){

$("#accordion").accordion();

});

</script>

</head>

<body>

</ul>

</body>

</html>

更多>>软件截图

上一张下一张(1 / 1)

查看详细截图

推荐软件

其他版本下载

精品推荐jquery特效插件jQuery插件

更多 (7个) >>jquery特效插件jquery插件有哪些？jquery插件有什么用？IT猫扑网小编为大家准备了jquery特效插件合集，内含有jQuery万花筒动画插件、jQuery鼠标滑过特效插件、jQuery折叠特效插件、QuikQuak音频特效插件、jquery轮播图动画特效插件

CSS3/jQuery3D万花筒旋转动画特效插件104KB / 中文 / 0
jQuery仿腾讯视频鼠标滑过图片特效插件340KB / 中文 / 0
jQuery折叠动画特效插件458KB / 中文 / 0
jQuery仿旅游网站侧边栏菜单特效插件83KB / 中文 / 0
jQuery图片图集幻灯片特效插件1.1M / 中文 / 0
jquery图片轮播插件unslider2.3M / 中文 / 0

更多 (31个) >>jQuery插件jquery插件大全是IT猫扑小编为大家整理的jquery插件合集，包含了多种jquery特效插件下载，其中大家常用的jquery分页插件、jquery缩略图插件、jquery幻灯片插件、jquery万年历插件、jquery侧边栏插件等等都有，后面小