<!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. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  2. JS-用js的for循环实现九九乘法表以及其他算数题等

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>f ...

  3. C#------获取最后一个"/"字符后面的所有内容

    public ActionResult GetFile(string id) { var path = _db.MailAtchs.Where(p => p.MailID == new Guid ...

  4. Java查找算法——二分查找

    import java.lang.reflect.Array; import java.nio.Buffer; import java.util.Arrays; import java.util.Ra ...

  5. Android学习笔记——download

    该工程的功能是实现从网上的链接下载一个lrc文件和一个mp3文件 以下代码是MainActivity.java中的代码 package com.example.download; import com ...

  6. C++/Python 混合编程 Clion IDE 搭建

    1.Clion IDE 环境 2.TdmGcc C++ 编译器 3.WinPython Python 科学计算环境 4.MySQL SQL 数据库 5.Git GitHub 版本控制 插件

  7. 最近这么火的iOS视频直播

    快速集成iOS基于RTMP的视频推流 http://www.jianshu.com/p/8ea016b2720e iOS视频直播初窥:高仿<喵播APP> http://www.jiansh ...

  8. Linux基础整理-软件的安装与卸载

    redhat/centos/fedora/suse系列: 摘自网址:http://www.runoob.com/linux/linux-yum.html yum( Yellow dog Updater ...

  9. docker和shipyard使用问题

    http://blog.csdn.net/cuisongliu/article/details/49178461 Docker启动如果随服务一起启动? docker run -ti -d --rest ...

  10. iOS项目重命名以及Xcode修改Scheme名称图文详解 (yoowei)

    在iOS开发中,有时候想改一下项目的名字,都会遇到很多麻烦.温馨提醒:记得备份. 看到项目名称,总感觉有点low,所以尝试着要将其更改一下. 项目原结构如下: 更改后的项目结构如下: 下面开始更改操作 ...