Jquery手风琴效果

  • h3_676892
    了解作者
  • 340.2KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 04:08
    上传日期
Jquery手风琴效果、Jquery手风琴、手风琴效果。基于jquery库实现的手风琴湿的图片+文字切换的效果,可以很好的兼容各个主流浏览器,是前端程序汪出家旅行,编码杀猪的利器,好吧,其实都是胡扯的,就是一个html的手风琴效果源码,为了凑够资源描述的50个字,我也是抠尽了猪脑了
Jquery手风琴效果.zip
  • css
  • common.css
    0B
  • style.css
    2.7KB
  • images
  • pic3.png
    48.1KB
  • pic6.png
    31.2KB
  • pic1.png
    56.3KB
  • button1.png
    1.2KB
  • pic5.png
    56.3KB
  • pic2.png
    50KB
  • pic4.png
    58.3KB
  • index.html
    5.8KB
  • js
  • jquery.min.js
    93.5KB
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的jQuery手风琴效果</title> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <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> </div> <div class="right"> <dl> <a title="食品加工行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 食品加工行业解决方案</a> <a title="汽车零部件行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 汽车零部件行业解决方案</a> <a title="家具生产行业解决方案 " target="_blank" href="#" rel='nofollow' onclick='return false;'> 家具生产行业解决方案 </a> <a title="智能生产制造解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 智能生产制造解决方案</a> <a title="食品加工行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 食品加工行业解决方案</a> </dl> </div> </li> <li class="one"> <div class="left"></div> <div class="left_top"> <i>商贸类</i> </div> <div class="right"> <dl style="margin-top: -120px;"> <a title="手机通讯行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 手机通讯行业解决方案</a> <a title="五金配件行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 五金配件行业解决方案</a> <a title="家电卖场行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 家电卖场行业解决方案</a> </dl> </div> </li> <li class="one"> <div class="left"></div> <div class="left_top"> <i>服务类</i> </div> <div class="right"> <dl> <a title="餐饮行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 餐饮行业解决方案</a> <a title="会员解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 会员解决方案</a> </dl> </div> </li> <li class="one"> <div class="left"></div> <div class="left_top"> <i>售后服务</i> </div> <div class="right"> <dl> <a title="软件服务支持" target="_blank" href="#" rel='nofollow' onclick='return false;'> 软件服务支持</a> </dl> </div> </li> </ul> </div> </div> </div> </body> <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> </html>
评论
    相关推荐