实现效果：

实现原理：

给关闭按钮绑定点击事件，点击以后触发动画效果。利用jQuery的有生命的方法，先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将显示属性值设为没有，使得关闭按钮消失。

实现代码：

！DOCTYPE htmlhtmlhead标题仿360开机效果/title meta charset=' utf-8 ' style type=' text/CSS ' * { padd : 0；保证金： 0；} .盒子{宽度： 320像素位置：固定；底部： 0；右： 0；箱形阴影： 1px 1px 10px # 2d 2d} # close { position : absolute top : 0；右： 0；宽度： 30px高度： 20pxcursor:指针；背景-颜色：红色；颜色：粉色；字体粗细：粗体；文本对齐：中心；} .高清{宽度： 320像素重量： 300像素背景-颜色： # 03c 03 c；color : # ffffont-size : 70px；线高： 300像素；文本对齐：中心；} .bd {横向： 320px高度： 100像素；背景-color : # fffc 00；font-size : 30px线高： 100像素；文本对齐：中心；}/style/head dydiv class=' box ' span id=' close ' x/span div class=' HD ' id=' t ' 1分12秒div class=' bd ' id=' b '天气：晴天/div/div！-引入jQuery -脚本类型=' text/JAVAScript ' src=' http :/jquery 1。0 .0 .1 .js '/script脚本类型=' text/JavaScript '窗口。onload=function(){ var close=document。getelementbyid(' close ')；var box=close . parentnodevar b=document。getelementbyid(' b ')；//给关闭按钮绑定点击事件很接近。onclick=function(){ animate(b，{'height':0}，function(){ animate(box，{ ' width ' :0 })；});很接近。风格。显示='无'；} }/脚本/正文/HTMl:JS实现时间倒计时

脚本类型=' text/JavaScript ' var maxtime=1350057600//截止到的日期var now=parseInt((新日期()。getTime())/1000)；//获取当前的日期var cha _ time=最大时间-现在；//中间所差的时间下面方法把相差的时间组合成倒计时的字符串，然后放到页面相应位置实现，实时刷新

功能倒计时(){ if(cha _ time=0){ var day=math。楼层(cha _ time/3600/24)；var hour=数学。楼层((cha _ time/3600)$)；定义变量分钟=数学。floor((cha _ time/60)`)；定义变量秒=数学。楼层(cha _ time `)；msg='离结束还有'日'天小时小时分钟分'秒'秒；$('.ws_sg_con_big，ws _ SG _ con _ small’).查找(' dd ').html(msg)；-cha _ time；} else{ clearInterval(计时器);警报('时间到，结束！');} } timer=setInterval('倒计时()',1000);/script总结

以上所述是小编给大家介绍的javascript jQuery实现360开机时间显示效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！