<!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. 精通javascript（看书笔记）

    变量的类型检查 //检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断 ...

  2. Docker探索系列2之镜像打包与DockerFile

    preface docker基本入门以后,可以试试打包docker镜像与dockerfile了 docker镜像 docker hub仓库有2类仓库,用户仓库和顶层仓库,用户仓库由docker用户创建 ...

  3. 机器学习笔记—Logistic回归

    本文申明:本系列笔记全部为原创内容,如有转载请申明原地址出处.谢谢 序言:what is logistic regression? Logistics 一词表示adj.逻辑的;[军]后勤学的n.[逻] ...

  4. uC/OS-II应用程序exe

    ECHO OFFECHO *******************************************************************************ECHO *   ...

  5. Java线程：Timer和TimerTask

    Timer和TimerTask可以做为实现线程的第三种方式,前两中方式分别是继承自Thread类和实现Runnable接口. Timer是一种线程设施,用于安排以后在后台线程中执行的任务.可安排任务执 ...

  6. ansible加密命令

    ansible-vault用于配置文件加密,如编写的playbook配置文件中包含敏感信息,不希望其他人随意查看,ansible-valut可加密/解密这个配置文件,刚试了下也可以加密txt文档,猜想 ...

  7. trace enabled

    <system.web> <trace enabled="true" localOnly="true" pageOutput="tr ...

  8. CallerInformation

    http://www.cnblogs.com/henryzhu/archive/2013/01/27/csharp-5-new-callerinformation.html 去年8月,Visual S ...

  9. centos 7.0 编译安装mysql 5.6.22 再次总结 成功编译安装~ 越来越熟练了~

    查找php.ini文件所在位置 [root@localhost /]# find -name php.ini ./usr/etc/php/etc/php.ini mysql官网的安装说明http:// ...

  10. SHIFT后门拿服务器之方法总结

    提权工具如下:cmd.exe Churrasco.exe nc.exe 提权前提:Wscript组件成功开启 如果Wscript组件被关闭,则使用以下方法开启: 源代码: <object run ...