码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 页面隐藏折叠效果

时间:2017-06-05 11:31:18      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:mode   style   over   anim   电动机   移动   发动机   asp   需要   

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JS/jquery-1.7.2.min.js"></script>
<style type="text/css">
#d1 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: red;
overflow: hidden;
}

#d2 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: yellow;
overflow: hidden;
}

#d3 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="d1">
配置方面,新车配备了真皮座椅、全景天窗、大尺寸液晶显示屏、全景影像、遥控驾驶、PM2.5绿净系统、ATS全地形模式、移动电站等配置。
动力方面,新车将继续沿用现款的2.0T涡轮增压发动机与两个电动机组成的混合动力系统,最大输出功率为205马力。传动系统与发动机匹配的是6速双离合变速箱。其0-100km/h加速时间为4.9秒。值得一提的是,新车兼具混动(HEV)和纯电(EV)两种模式,纯电续航里程为80公里。(文/汽车之家 陈硕)
</div>
<div id="d2">
路测得分:100

特斯拉 Model S P85D 于年中进行了重新设计,这款运动型4门5座电动车搭载了90千瓦时的电池组,号称续航里程可达294英里。另外,还有85千瓦时的配置可供消费者选择,经过测试,完成5小时充电之后的续航里程可以达到220英里。Model S P85D的性能非常卓越,加速之快令人震惊,操作起来也非常顺畅,舒适感油然而生。类似于ipad的中央控制中心功能虽然其全,但也会让驾驶员产生分心。此外,Model S P85D同时也配有全轮驱动和主动安全系统。但Model S P85D也有一些缺点,包括难以进入的车厢,可视性及续航里程受到限制,尤其是在寒冷的天气情况下。
</div>

<div id="d3">
路测得分:99

在豪华型轿车当中,宝马7系一直不敌奔驰S级轿车,但现款7系轿车无论是驾驶的稳定性、动力系统的顺畅感,操作便利性、内饰的豪华性都大大超乎人们的意料。基本款740i搭载的是3.0升6缸涡轮增压引擎,而最具代表性的750i则搭载的是4.4升V8涡轮增压引擎,最大功率可达445hp,采用的是全轮驱动系统。750i的车厢十分静谧,在细节设计和座椅的舒适性上是其他车型难以匹敌的。此外,内饰的质量也让人眼前一亮,内置木饰、皮革、铝制设计等使这款车型的现代感尽显。
</div>
<div></div>
</form>
</body>
</html>
<script type="text/javascript">
//这里为什么要这么写?
//获取auto高度的时候会执行一遍auto高度变化的代码,变成页面加载完成后页面中的div高度为auto高度,
//这里需要在后面让他再变回默认高度就可以了, 也不会出现闪屏的问题.
var autoHeight1 = $("#d1").css(‘height‘, ‘auto‘).height();
var height1 = $("#d1").css(‘height‘, ‘50‘).height()

$("#d1").toggle(
function () { $("#d1").animate({ height: autoHeight1 }, 500); },
function () { $("#d1").animate({ height: "50" }, 500); });
var autoHeight2 = $("#d2").css(‘height‘, ‘auto‘).height();
var height1 = $("#d2").css(‘height‘, ‘50‘).height()
$("#d2").toggle(
function () { $("#d2").animate({ height: autoHeight2 }, 500); },
function () { $("#d2").animate({ height: "50" }, 500); });
var autoHeight3 = $("#d3").css(‘height‘, ‘auto‘).height();
var height1 = $("#d3").css(‘height‘, ‘50‘).height()
$("#d3").toggle(
function () { $("#d3").animate({ height: autoHeight3 }, 500); },
function () { $("#d3").animate({ height: "50" }, 500); });

</script>

jQuery 页面隐藏折叠效果

标签:mode   style   over   anim   电动机   移动   发动机   asp   需要   

原文地址:http://www.cnblogs.com/zhangxin4477/p/6943919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!