<!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. JavaWeb学习总结-01 JavaWeb开发入门

    一 基本概念 1 Web开发的相关知识 Web,表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面): ...

  2. ecshop 远程图片本地化

    define('IN_ECS', true); require(dirname(__FILE__) . '/includes/init.php'); $smarty->assign('siteD ...

  3. MVC页面重定向'页面跳转

    MVC页面重定向,主要有以下几种形式: 1.Response.Redirect();方法 using System; using System.Collections.Generic; using S ...

  4. git如何放弃所有本地修改？

    问题描述: 本地做了一些修改,我用git rebase说有冲突.我现在想把本地的请求都干掉,可能有的已经commit过了(没有push过),完全同步成远程版本,应该用什么命令? 使用命令: git r ...

  5. 【转】CSS3的REM设置字体大小

    rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...

  6. 访问cv::Mat中的数据时遇到的指针类型问题

    在用Opencv的时候由于下图原本的图像尺寸是1111*1111,要进行resize,代码如下: cv::Mat img = cv::imread("//Users//apple//td3/ ...

  7. JQuery------获取<input type="file">中的文件内容

    html <div class="File">添加附件</div><input id="upfile" name="up ...

  8. JQuery------如何判断当前点击的是否是哪个类

    $(document).ready(function () { $("html").click(function (e) { if (e.target == $(".ad ...

  9. windows7-PowerDesigner 15.1 的安装图解

    下载 PowerDesigner 15.1 的安装文件和破解文件 破解文件下载地址:http://pan.baidu.com/share/link?shareid=177873&uk=3626 ...

  10. [webgrid] – header - (How to Add custom html to Header in WebGrid)

    How to Add custom html to Header in WebGrid MyEvernote Link Posted on March 30, 2013by mtryambake Ho ...