用jQuery实现的一种网页内容呈现方式
<!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实现的一种网页内容呈现方式的更多相关文章
- jquery 事件委托三种事件绑定方式.bind(),.live(),.delegate()
http://www.ituring.com.cn/article/467# http://www.cnblogs.com/lvdabao/archive/2013/08/30/3290603.htm ...
- jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- jquery插件的两种形式
这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细. 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队 ...
- jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...
- javascript笔记——jQuery插件开发的几种方式
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.e ...
- (转载)MVC + JQUERY + AJAX的几种方式
MVC + JQUERY + AJAX的几种方式 // 传过去一个简单值,获取一个简单值 $.ajax({ type: "GET", url: ...
- jQuery代码优化的9种方法
前面的话 本文将详细介绍jQuery代码优化的9种方法 用对选择器 在jQuery中,可以用多种选择器,选择同一个网页元素.每种选择器的性能是不一样的,应该了解它们的性能差异 1.最快的选择器:id选 ...
随机推荐
- Python ValueError: IO operation on closed file
ValueError IO operation on closed file表示处理了已经被关闭的数据,在python 中 with语句的上下文会帮助处理,也就是说,当python的处理代码不对齐的时 ...
- Python 培训之MySql
1. Install 1.1 install mysql sudo apt-get install lamp-server^ (tip: Set password) 1.2 install MySQ ...
- 重新注册iis的.NET Framework版本
说一个简单的方法,在VS2012.win7 sp1下亲测可用. 在开始菜单中找到VS 2012开发人员命令提示,然后执行命令:aspnet_regiis.exe -i 运行完成后截图如下:
- spring boot properties
[转载] 代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境的配置都不一样,同时要方便各种角色如运维,接口测试, 功能测试,全链路测试的配置,hardcode 肯定不 ...
- Linux环境VNC服务安装、配置与使用
前言:作为一名DBA,在创建Oracle数据库的过程中一般要使用dbca和netca图像化进行建库和创建监听(如果使用脚本建库另说),如果您身体好估计可以在瑟瑟发抖的机房中完成数据库的创建过程,由于本 ...
- JavaWeb学习笔记——JavaEE基础知识
- ecshop 默认图处理
function get_banner_path($img) { $img = empty($img) ? C('no_picture') : $img; return $img;}
- MongoDB学习笔记(索引)(转)
一.索引基础: MongoDB的索引几乎与传统的关系型数据库一模一样,这其中也包括一些基本的优化技巧.下面是创建索引的命令: > db.test.ensureIndex({" ...
- [c#]RabbitMQ的简单使用
摘要 Message Queue消息队列,简称MQ,是一种应用程序对应用程序的通信方法,应用程序通过读写出入队列的消息来通信,而无需专用连接来链接它们.消息传递指的是程序之间通过在消息中发送数据进行通 ...
- 【8-17】HTML测试
Source : http://www.w3school.com.cn/html HTML 测验 结果:9/20 您的回答: 1.HTML 指的是? 您的回答:超文本标记语言(Hyper Text M ...