一款简单的jQuery手风琴效果,手风琴的特效算是介绍得比较多的了,这一款的效果比较唯美,当然啦,你也可以自由更换图片、文字和按钮等,总的来说切换效果还是挺棒的,喜欢的童鞋请收下吧。
页面的head部分,需引入CSS样式文件和jQuery库,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
页面的body部分,div容器里嵌套了多个div和li标签,代码如下:
<div class="xinxi_solution_main">
<div class="xinxi_solution_bg">
<div class="main_mobile">
<ul>
<li class="one on">
<div class="left"></div>
<div class="left_top">
<i>工业类</i><img src="images/button1.png" alt="工业">
</div>
<div class="right">
<dl>
<a title="食品加工行业解决方案" target="_blank" href="#">
食品加工行业解决方案</a>
<a title="汽车零部件行业解决方案" target="_blank" href="#">
汽车零部件行业解决方案</a>
<a title="家具生产行业解决方案 " target="_blank" href="#">
家具生产行业解决方案 </a>
<a title="智能生产制造解决方案" target="_blank" href="#">
智能生产制造解决方案</a>
<a title="食品加工行业解决方案" target="_blank" href="#">
食品加工行业解决方案</a>
</dl>
</div>
</li>
<li class="one">
<div class="left"></div>
<div class="left_top">
<i>商贸类</i><img src="images/button1.png" alt="工业">
</div>
<div class="right">
<dl style="margin-top: -120px;">
<a title="手机通讯行业解决方案" target="_blank" href="#">
手机通讯行业解决方案</a>
<a title="五金配件行业解决方案" target="_blank" href="#">
五金配件行业解决方案</a>
<a title="家电卖场行业解决方案" target="_blank" href="#">
家电卖场行业解决方案</a>
</dl>
</div>
</li>
<li class="one">
<div class="left"></div>
<div class="left_top">
<i>服务类</i><img src="images/button1.png" alt="工业">
</div>
<div class="right">
<dl>
<a title="餐饮行业解决方案" target="_blank" href="#">
餐饮行业解决方案</a>
<a title="会员解决方案" target="_blank" href="#">
会员解决方案</a>
</dl>
</div>
</li>
<li class="one">
<div class="left"></div>
<div class="left_top">
<i>售后服务</i><img src="images/button1.png" alt="工业">
</div>
<div class="right">
<dl>
<a title="软件服务支持" target="_blank" href="#">
软件服务支持</a>
</dl>
</div>
</li>
</ul>
</div>
</div>
</div>
页面的底部,需设置好切换的特效和样式变化等的响应,代码如下:
<script type="text/javascript">
$(function() {
$('.xinxi_solution_main ul li:eq(0)').addClass('on');
$('.xinxi_solution_main ul li:eq(1)').addClass('b2');
$('.xinxi_solution_main ul li:eq(2)').addClass('b3');
$('.xinxi_solution_main ul li:eq(3)').addClass('b4');
$('.xinxi_solution_main ul li:eq(4)').addClass('b5');
$('.xinxi_solution_main ul li:eq(5)').addClass('b6');
$('.xinxi_solution_main ul li:gt(3)').hide();
//当三级分类大于7个的是,成两排显示
$('.xinxi_solution_main ul li').each(function() {
var len = $(this).find('.right dl a').length;
if (len > 6) {
$(this).find('.right dl a').addClass('yichu');
}
});
//解决方案效果
$('.xinxi_solution_main ul li').each(function() {
var left_h = $(this).find('.left_top').height();
$(this).find('.left_top').css({
'top': '50%',
'margin-top': -left_h / 2
});
var dl_h = $(this).find('.right dl').height();
$(this).find('.right dl').css({
'margin-top': -dl_h / 2
});
});
$('.xinxi_solution_main ul li').click(function() {
$(this).addClass('on').siblings().removeClass('on');
});
$('.xinxi_solution_main_mobile ul li:first-child').addClass('on');
$('.xinxi_solution_main_mobile ul li').click(function() {
$(this).addClass('on').siblings().removeClass('on');
});
$(".solu-category .solu-description").each(function() {
var maxwidth = 60;
if ($(this).text().length > maxwidth) {
$(this).text($(this).text().substring(0, maxwidth));
$(this).html($(this).html() + '...');
}
});
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791