<!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. IOS基础之 (设计模式)

    一 工厂方法 工厂方法方便我们快速创建类的实例的方法.通过工厂方法,可以让调用过程更加清晰. Person.h #import <Foundation/Foundation.h> @int ...

  2. 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求

    我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...

  3. hihoCoder1284机会渺茫(唯一分解定理 + 约分)

    题目链接 #1284 : 机会渺茫 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在追求一名学数学的女生小Z.小Z其实是想拒绝他的,但是找不到好的说辞,于是提出 ...

  4. 通过System.getProperties()获取系统参数

    Properties props=System.getProperties(); //系统属性    System.out.println("Java的运行环境版本:"+props ...

  5. uC/OS-II邮箱(mbox)块

    /*************************************************************************************************** ...

  6. qt5.4

    rm -f libQt5Qml.so.5.4.0 libQt5Qml.so libQt5Qml.so.5 libQt5Qml.so.5.4g++ -Wl,-O1,--sort-common,--as- ...

  7. Ajax Post 类实例

    以前总是ajax请求是这样的 data:"a=1&b=2&c=3..." 而Controller也总是这样的 Action(int a,int b,int c) 很 ...

  8. easyUI文本框textbox笔记

    知识点: 1.图标位置 Icon Align属性,有left和right两个: 2.textbox的setvalue方法,getvalue方法. <div style="margin: ...

  9. matlab————矩阵输出到txt

    matlab如何输出矩阵到txt并指定数的精度 (2013-11-20 16:50:43)转载▼ 标签: matlab 输出数据 假设你的数据矩阵为a; [m n] = size(a); [filen ...

  10. JavaWeb学习笔记——DAO设计模式