您的位置：首页 > Web前端 > JQuery

jQuery插件实例五：手风琴效果[动画效果可配置版]

2014-06-05 10:06 633 查看

昨天写了个jQuery插件实例四：手风琴效果[无动画版]那个是没有动画效果的，且可配置性不高，本篇为有动画效果。对于一些数据做了动态的计算，以实现自适应。

欢迎大家入群258387392相互交流，学习，新群初建，欢迎各位的光临

效果图预览

插件JS

accordionB.js

;
(function ($, window, document, undefined) {
var defaults = {
'isajax': false, //是否从ajax加载数据
'isDom': true, //是否是DOM数据,即直接写在DOM结构中,为默认项
'isConfiguration': false,//是否是配置数据
'imglist': [],//配置数据
'ajaxurl': '',//Ajax()获取数据时的地址
'isanimate':true,//是否有动画效果
'sped':100,//动画速度
'showwidth':252,//当前选中项的宽度
'isClear':true,//当鼠标移出DIV时，是否还原初始显示状态
'firstShow':false//初次加载时，第一项是否展开
};

$.fn.nhsdAccordion = function (options) {
var $parentDiv = $(this);
var $opts = $.extend({}, defaults, options);
var $mouseoverTile = "";
var $a_width = parseInt($parentDiv.width());
if($opts.isanimate==true){
$a_width = $a_width-2;//尽可能的保证样式的正确性
}
var $quantity;//li的数量
var $p_width;//收缩时的平均宽度
var $o_width;//当一个展开时，剩下的项li的平均宽度
var $cli;//记录当前选中项

function initDom() {
$parentDiv.html("");
$p_width = $a_width/$quantity;
$o_width = ($a_width-parseInt($opts.showwidth))/($quantity-1);

var $ul = $('<ul></ul>', { 'class': 'acdul' }).appendTo($parentDiv);
for (var i = 0, j = $opts.imglist.length; i < j; i++) {
var temp = $opts.imglist[i];
var $li;
if($opts.firstShow==true){
if(i==0){
$li = $('<li></li>').css({
width:$opts.showwidth+'px'
}).appendTo($ul);
}else{
$li = $('<li></li>').css({
width:$o_width+'px'
}).appendTo($ul);
}
}
else{
$li = $('<li></li>').css({
width:$p_width+'px'
}).appendTo($ul);
}
var $img = $('<img />', { 'src': temp.src, 'title': temp.title }).appendTo($li);
var $tit = $('<span class="pspan"></span>').html(temp.title).appendTo($li);
}
liEvent();
}

function liEvent() {
$(".acdul li").bind("click mouseover", function () {
$mouseoverTile = $(this).find('img').attr('title');
$(this).find('img').removeAttr('title');
if($opts.isanimate==true){
$(this).siblings('li').stop(true,false).animate({width:$o_width+'px'},$opts.sped);
$(this).stop(true,false).animate({width:$opts.showwidth+'px'},$opts.sped);
}else{
$(this).siblings('li').attr('style','width:'+$o_width+'px');
$(this).attr('style','width'+$opts.showwidth+'px');
}
$(this).find('span').removeClass().addClass('cspan');
$cli = $(this);
}).bind('mouseout', function () {
$(this).find('img').attr('title', $mouseoverTile);
$(this).find('span').removeClass().addClass('pspan')
});

$parentDiv.bind('mouseout',function(){
if($opts.isClear){
if($opts.isanimate==true){
$(this).find('ul li').stop(true,false).animate({width:$p_width+'px'},$opts.sped);
}else{
$(this).find('ul li').css({
width:$p_width+'px'
});
}
}else{
$(this).find('span').removeClass().addClass('pspan');
$cli.find('span').removeClass().addClass('cspan');
}
});
}

function initAjax() {
$.ajax({
type: 'get',
url: $opts.ajaxurl,
cache: false,
dataType: 'json',
beforeSend: function () { },
success: function (d) {
$opts.imglist = d;
$quantity = d.length;
initDom();
},
error: function () { }
});
}

if ($opts.isajax == true) {
initAjax();
} else if ($opts.isConfiguration == true) {
$quantity = $opts.imglist.length;
initDom();
} else if ($opts.isDom == true) {
$quantity = $parentDiv.find('li').length;
$p_width = $a_width/$quantity;
$o_width = ($a_width-parseInt($opts.showwidth))/($quantity-1);
liEvent();
}

return this;//用于保证当前元素还能实现链式编程
}
})(jQuery, window, document);

CSS样式

accordionB.css

/* CSS Document */

/*手风琴效果CSS*/
.accordionDiv {
/*    width: 658px;*/
/*    width: 400px;*/
width: 500px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
top: 50px;
}

.acdul {
position: absolute;
}

.acdul li {
display: inline-block;
float: left;
cursor: pointer;
position: relative;
overflow: hidden;
font-size: 20px;
font-weight: bold;
}

.pspan{
color: #ffffff;
height: 100%;
}
.cspan{
color: red;
height: 100%;
}

.acdul img {
float: left;
position: relative;
display: inline-block;
}

.acdul span {
float: left;
position: absolute;
display: block;
width: 22px;
margin: 5px 0 0 5px;
z-index: 100;
}

.redspan{
color:red;
}

.laselirevise{

}

HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" http-equiv="Content-Type" content="charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../CSS/global.css"/>
<link rel="stylesheet" type="text/css" href="../CSS/accordionB.css"/>
<script type="text/javascript" src="../Script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../Script/accordionB.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataimglist = [
{
'title':'手风琴效果图一',
'src':'../Images/accordion/1.png',
'href':'http://www.cnblogs.com/nhsd/'
}, {
'title': '手风琴效果图二',
'src': '../Images/accordion/2.png',
'href':'http://www.cnblogs.com/nhsd/'
}, {
'title': '手风琴效果图三',
'src': '../Images/accordion/3.png',
'href':'http://www.cnblogs.com/nhsd/'
}, {
'title': '手风琴效果图四',
'src': '../Images/accordion/4.png',
'href':'http://www.cnblogs.com/nhsd/'
}, {
'title': '手风琴效果图五',
'src': '../Images/accordion/5.png',
'href':'http://www.cnblogs.com/nhsd/'
}, {
'title': '手风琴效果图六',
'src': '../Images/accordion/6.png',
'href':'http://www.cnblogs.com/nhsd/'
}
];

$("#accordionDiv").nhsdAccordion({
'imglist': dataimglist, 'interval': 'slow','isConfiguration':true
});
//上面是把数据写在配置项中
//这是直接写在DOM结构中
//$("#accordionDiv").nhsdAccordion({});
//下面是从Ajax()中获取数据的形式,ajaxur后跟的是获取数据源地址
//$("#accordionDiv").nhsdAccordion({'ajaxur':'/plug/accordiionB/'});
});
</script>
</head>
<body>
<div>
<div id="accordionDiv" class="accordionDiv">
<ul class="acdul">
<li style="width: 83px;">
<img src="../Images/accordion/1.png" title="手风琴效果图一">
<span class="pspan">手风琴效果图一</span>
</li>
<li style="width: 83px;">
<img src="../Images/accordion/2.png" title="手风琴效果图二">
<span class="pspan">手风琴效果图二</span>
</li>
<li style="width: 83px;">
<img src="../Images/accordion/3.png" title="手风琴效果图三">
<span class="pspan">手风琴效果图三</span>
</li>
<li style="width: 83px;">
<img src="../Images/accordion/4.png" title="手风琴效果图四">
<span class="pspan">手风琴效果图四</span>
</li>
<li style="width: 83px;">
<img src="../Images/accordion/5.png" title="手风琴效果图五">
<span class="pspan">手风琴效果图五</span>
</li>
<li style="width: 83px;">
<img src="../Images/accordion/6.png" title="手风琴效果图六">
<span class="pspan">手风琴效果图六</span>
</li>
</ul>
</div>
</div>
</body>
</html>

另global.css

* {
margin: 0;
padding: 0;
}

html, body {
color: #000;
background: #fff;
}

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
list-style: none;
}

div {
display: block;
}

a {
text-decoration: none;
color: #333;
}

a:hover {
color: #14a0cd;
text-decoration: underline;
}

img {
border: none;
line-height: 0;
margin: 0;
padding: 0;
vertical-align: bottom;
}

table {
border-collapse: collapse;
}
/*td {
padding: 3px;
}*/
input {
padding: 1px;
vertical-align: middle;
line-height: normal;
}

a:link, a:visited {
text-decoration: none;
color: #1F376D;
}

a:hover, a:active {
text-decoration: underline;
color: #BD0A01;
border: none;
}

ul {
clear: both;
overflow: hidden;
width: 100%;
}

ul, li {
list-style: none;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航