jquery动画效果之div -

speed_guo

浏览: 310980 次
性别:
来自: 湖北

最近访客更多访客>>

bfs198

sh1818

lauyuhim

lghjbxc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery动画效果之div

jQuery 电子商务配置管理 JavaScript 数据挖掘

QQ订阅箱，在健康新闻版块，有一个功能，就是当点击标题时会动态的展现新闻内容，再次点击时会收起内容，只显示简单介绍。今天就模仿该功能练习了下jquery的用法，实现在功能如下：

展开前：

jquery动画效果-div - dilegencehe - dilegencehe的博客-静、净、尽

展开后：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
   <style type="text/css">
      .div_head{
      color:#9F5F9F;
      
   }
  #div_panel .all_content{
     display:none;
     overflow: hidden;
     visibility: visible; 
   }
   </style>

 <script type="text/javascript">
    $(document).ready(function(){

/*
//鼠标移到标题上时展开，移出时收起。
     $("#div_panel .div_head").mouseover(function(){
       $(this).next(".all_content").show();
  });
  $("#div_panel .div_head").mouseout(function(){
          $(this).next(".all_content").hide();  
  });
 
*/  

/*当点击标题时展开或收起内容
   $("#div_panel .div_head").click(function(){
   var all_content = $(this).next("div.all_content");
   if(all_content.is(":visible")){  //使用jquery中的is()方法来完成
               all_content.hide();
    }else{
               all_content.show();
    }
   });
*/
   
/*合成事件--hover()方法和toggle()方法*/
/*hover()方法模拟光标悬停事件：hover(enter,leave)
  $("#div_panel .div_head").hover(function(){
      $(this).next("div .all_content").show();
  },function(){
      $(this).next("div .all_content").hide();
  });
*/

/*toggle()方法模块鼠标连续单击事件：toggle(fn1,fn2,...,fnN); */
  $("#div_panel .div_head").toggle(function(){
         $(this).next(".part_content").hide();
    $(this).next(".part_content").next(".all_content").show();
  },function(){
         $(this).next(".part_content").show();
   $(this).next(".part_content").next(".all_content").hide();
  });

 

 });       
 
 </script>

 </HEAD>

 <BODY>
 <div id="div_panel">
   <h3 class="div_head">网店管家产品介绍（点击展开）：</h3>
     <div class="part_content">
         &nbsp;&nbsp;&nbsp;&nbsp;随着独生子女的大量出现，“小皇帝”“小公主”也就成了日渐显现的社会问题和家庭问题。近来有些托幼园采用家庭化分班制以来，父母从孩子的转变中看到了建立长幼关系对孩子成长所起的重要作用...。
     </div>
     <div class="all_content">
         &nbsp;&nbsp;&nbsp;&nbsp;随着独生子女的大量出现，“小皇帝”“小公主”也就成了日渐显现的社会问题和家庭问题。近来有些托幼园采用家庭化分班制以来，父母从孩子的转变中看到了建立长幼关系对孩子成长所起的重要作用。   <br /><br/>                 
      &nbsp;&nbsp;&nbsp;&nbsp;适用用户：B2C商户、ebay、淘宝等(查看淘宝典型用户)C2C店主以及其它以邮购为主要销售形式的商家。免费下载
    
    《网店管家》是一款面向B2C、C2C商家，专注于电子商务订单管理的软件；系统以提供高效的订单处理手段为目标，提供了一套包括：采购、销售、仓储、客户关系、账款、售后服务等全面管理功能的综合业务管理系统。基本涵盖了电子商务企业和个人从业者，在业务运营过程中面临的管理需求。
    
    近两年，商家不但在数量上快速成长，个体的规模也今非昔比；越来越多的电子商务商家以企业或团队的形式出现。对于电子商务企业管理者来说，提高协同工作效率；保护敏感资料；深层挖掘业务数据等变得尤为重要，而这些都不是销售平台所能提供的。借助《网店管家》，用户可以很好地解决上述问题。《网店管家》采取流程化管理，将任务按照岗位设置分解，所有操作员的权限和视图都可以灵活配置。另外还提供了详尽、强大的统计分析功能。
    </div>
    
</div>
 </BODY>
</HTML>

分享到：