`
speed_guo
  • 浏览: 314402 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论
阅读更多

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

展开前:

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

 

展开后:

 

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>

 

分享到:
评论

相关推荐

    jquery点击div层图片爆炸碎裂效果

    标题中的“jquery点击div层图片爆炸碎裂效果”是指一种基于jQuery实现的前端交互特效,当用户点击一个div元素(通常包含图片)时,图片会模拟出爆炸并碎裂的效果,给用户带来视觉冲击和互动体验。这个效果常用于游戏...

    jQuery 实现两个div颜色互换的动画

    本教程将深入探讨如何利用jQuery实现两个div元素颜色的互换动画效果。 首先,我们需要了解div是HTML中的一个块级元素,常用于构建网页布局。在CSS中,我们可以为div设置背景颜色来改变其视觉效果。jQuery的animate...

    JQuery实现DIV其他动画效果的简单实例

    - jQuery动画方法对所有支持的元素都有效,但通常在div元素上使用时效果最佳。 - 动画持续时间可以自定义,但需根据页面的性能和用户体验进行权衡,避免动画过长或过短影响用户的操作。 以上知识点涵盖了JQuery实现...

    jquery 拖拽动态添加div 保存拖拽后的效果

    本篇文章将聚焦于一个特定的应用场景:使用jQuery实现拖拽功能来动态添加div,并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先,我们需要理解jQuery UI中的Draggable...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    Jquery Sortable实现div拖动排序效果

    本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...

    jQuery文字切换动画效果

    在这个名为"jQuery文字切换动画效果"的项目中,我们重点关注的是如何利用jQuery来创建吸引人的文本动态展示,特别是对于网站口号或广告语的呈现。 首先,`index.html`是网页的主文件,它包含了页面的基本结构和元素...

    Jquery跟随滚动条移动的div动画效果

    "Jquery跟随滚动条移动的div动画效果"就是一个典型的例子,它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效,而且这个div在移动过程中保持平滑,避免了闪烁现象,提升了用户体验。 首先,...

    jquery插件弹出div

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。"jquery插件弹出div"是一个基于jQuery的插件,用于创建弹出式对话框或者模态框,通常用于显示警告、确认消息或者...

    JQUERY弹出模式DIV

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了JavaScript代码的编写,尤其是在处理DOM操作、事件处理和动画效果等方面。"JQUERY弹出模式DIV"是指使用jQuery来实现一种常见用户界面设计——...

    jQuery Easing div切换效果的例子

    在本文中,我们将深入探讨jQuery Easing插件及其在实现div切换效果中的应用。jQuery Easing是一个非常实用的工具,它扩展了jQuery的核心动画功能,提供了丰富的缓动函数,使得过渡效果更加平滑、动态,为网页增添...

    jQuery鼠标上下拖动div排序代码

    通过以上步骤,我们就成功实现了jQuery鼠标上下拖动div排序的功能,同时也添加了按钮操作的提示效果。这个例子展示了jQuery在增强网页交互性方面的强大能力,结合其他库,我们可以创建更加丰富和灵活的用户界面。在...

    第十课 jquery动画效果2

    在前端开发中,jQuery 是一个非常流行的 JavaScript 库,它为开发者提供了许多便捷的功能,其中包括丰富的动画效果。在本篇中,我们将详细讨论 jQuery 的动画效果,主要关注淡入淡出、滑动以及自定义动画。 一、...

    第十课 jquery动画效果1

    - 动画队列是jQuery动画的另一个特性,多个`animate()`调用会按照添加的顺序依次执行,形成类似队列的执行流程。 jQuery 的动画效果使得开发者能够轻松地创建丰富的用户体验,通过控制元素的视觉变化吸引用户注意...

    jquery动画背景图片

    本主题聚焦于“jQuery 动画背景图片”,这是一个常见的技术,用于增强网站视觉效果和用户体验。jQuery 提供了一系列的动画方法,可以用来改变背景图片,包括淡入淡出、滑动等效果,为网页增添动态魅力。 首先,我们...

    JQuery-DIV弹窗

    在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画效果等方面。"JQuery-DIV弹窗"是指利用jQuery实现的一种弹出窗口效果,通常用于显示通知...

    鼠标悬停div边框动画 jquery 6个动画类型

    在网页设计中,动态效果可以增加...总之,通过jQuery实现的鼠标悬停div边框动画为网页增加了丰富的动态效果,提升了用户体验。理解并掌握这些动画的实现方式,对于任何希望提升网页互动性的开发者来说都是宝贵的技能。

    jquery模拟ajax关闭div窗口效果

    本主题将深入探讨如何使用jQuery模拟AJAX关闭div窗口的效果。这种效果常见于弹窗对话框、提示框或者模态窗口的关闭,提供一种无刷新的用户体验。 首先,我们需要了解基本的HTML结构。一个简单的div窗口可能包含以下...

    非常酷的jquery动画立体滚动效果.rar

    在本资源"非常酷的jquery动画立体滚动效果.rar"中,我们将会探讨如何利用jQuery实现一个引人注目的立体滚动效果,这种效果常用于网站的滑动展示或导航菜单,为用户提供独特的视觉体验。 首先,让我们了解jQuery的...

Global site tag (gtag.js) - Google Analytics