<%@ 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; 300px; background-color: red; overflow: hidden; } #d2 { line-height: 50px; height: 50px; 300px; background-color: yellow; overflow: hidden; } #d3 { line-height: 50px; height: 50px; 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>
升级简化版:
$("#d1").toggle( function () { var autoHeight1 = $("#d1").css('height', 'auto').height(); $("#d1").css('height', '50').height(); $("#d1").animate({ height: autoHeight1 }, 500); }, function () { $("#d1").animate({ height: "50" }, 500); }); $("#d2").toggle( function () { var autoHeight2 = $("#d2").css('height', 'auto').height(); $("#d2").css('height', '50').height(); $("#d2").animate({ height: autoHeight2 }, 500); }, function () { $("#d2").animate({ height: "50" }, 500); }); $("#d3").toggle( function () { var autoHeight3 = $("#d3").css('height', 'auto').height(); $("#d3").css('height', '50').height(); $("#d3").animate({ height: autoHeight3 }, 500); }, function () { $("#d3").animate({ height: "50" }, 500); });