<!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 http-equiv="content-type" content="text/html;charset=utf-8" />

<title>一种网页内容呈现方式</title>

<style>

.box-now{cursor:pointer;background-color:#eee;}

.qfbd{width:400px;height:auto;border:1px solid #333;}

.box{height:34px;overflow:hidden;clear:both;border:1px solid #999;}

.box .tit{height: 33px;line-height: 33px;text-align: left;border:1px solid #ccc;}

.box .pt{}

.box .pt:after{content:".";display:block;visibility:hidden;height:0px;clear:both;}

</style>

<script src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script>

<script type="text/javascript">

jQuery(function(jq){

    var cls = "box-now";

    var rd = jq('#sdyd-frag');

    var divs = rd.find('.box');

    var dur = 600,

    h = {min:34, max:193};

    divs.mouseover(function(el){

        el = jq(this);

        divs.not(el).removeClass(cls).stop().animate({'height':h.min},dur,'linear');

        el.stop().animate({'height':h.max},dur,'linear');

        el.addClass(cls);

    });

    divs.css({'height':h.min}).eq(0).css({'height':h.max});

    divs.eq(0).addClass(cls);

});

</script>

</head>

<body>

<div id="sdyd-frag" class="qfbd">

    <div class="box">

        <div class="tit">标题一</div>

        <div class="pt">内容一</div>

    </div>

    <div class="box">

        <div class="tit">标题二</div>

        <div class="pt">内容二</div>

    </div>

    <div class="box">

        <div class="tit">标题三</div>

        <div class="pt">内容三</div>

    </div>

    <div class="box">

        <div class="tit">标题四</div>

        <div class="pt">内容四</div>

    </div>

    <div class="box">

        <div class="tit">标题五</div>

        <div class="pt">内容五</div>

    </div>

    <div class="box">

        <div class="tit">标题六</div>

        <div class="pt">内容六</div>

    </div>

</div>

</body>

</html>

用jQuery实现的一种网页内容呈现方式的更多相关文章

  1. jquery 事件委托三种事件绑定方式.bind(),.live(),.delegate()

    http://www.ituring.com.cn/article/467# http://www.cnblogs.com/lvdabao/archive/2013/08/30/3290603.htm ...

  2. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  3. jquery插件的两种形式

    这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...

  4. jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...

  5. jQuery插件开发的五种形态[转]

    这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细. 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队 ...

  6. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

  7. javascript笔记——jQuery插件开发的几种方式

    jQuery插件开发分为两种: 1 类级别  类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.e ...

  8. (转载)MVC + JQUERY + AJAX的几种方式

    MVC + JQUERY + AJAX的几种方式 // 传过去一个简单值,获取一个简单值 $.ajax({            type: "GET",         url: ...

  9. jQuery代码优化的9种方法

    前面的话 本文将详细介绍jQuery代码优化的9种方法 用对选择器 在jQuery中,可以用多种选择器,选择同一个网页元素.每种选择器的性能是不一样的,应该了解它们的性能差异 1.最快的选择器:id选 ...

随机推荐

  1. centos 搭建git服务器

    centos 6搭建git服务器 安装 rpm -ivh http://mirrors.aliyun.com/epel/epel-release-latest-6.noarch.rpm yum ins ...

  2. linux第一面

    随着Linux应用的扩展许多朋友开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起.作为一个 Linux系统管理员,我看了许多有关Linux的文档和书籍,并为学习 ...

  3. [NOIP2014] 解方程&加强版 (bzoj3751 & vijos1915)

    大概有$O(m)$,$O(n\sqrt{nm})$,$O(n\sqrt{m})$的3个算法,其中后2个可以过加强版.代码是算法3,注意bzoj的数据卡掉了小于20000的质数. #include< ...

  4. GridView数据格式化

    一.动态生成列的格式化 此种GridView中的列是动态生成的,格式化可以通过RowDataBound事件进行.如下边代码,对第十列的值进行格式化. protected void gvUserList ...

  5. Java排序算法——表插入排序

    //================================================= // File Name : ListInsertSort_demo //----------- ...

  6. SQL 使用小记

    1. case语句 示例 select id, name, case user_role then "管理员" then "未注册用户" then " ...

  7. js创建和获取cookie

    创建cookie document.cookie='like=1'; //创建 cookie键名和值 var str = document.cookie; 获取cookie 读取cookiefunct ...

  8. js基本数据类型和typeof

    JavaScript数据类型是非常简洁的,它只定义了6中基本数据类型 null:空.无.表示不存在,当为对象的属性赋值为null,表示删除该属性 undefined:未定义.当声明变量却没有赋值时会显 ...

  9. 百度编辑器修改，不让它自动替换html标签

    在ueditor.all.js中找到 UE.plugins['defaultfilter'] = function () 注释或删掉这块代码. 注:ueditor.all.min.js 中也一样,格式 ...

  10. Nginx重新编译添加模块

    原文链接:http://www.linuxidc.com/Linux/2013-06/86438.htm 找到安装nginx的源码根目录,如果没有的话下载新的源码 http://nginx.org t ...