快捷導(dǎo)航

jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法

更新時(shí)間：2015年05月11日 12:26:41 投稿：shichen2014

這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法,涉及jQuery鼠標(biāo)事件及css樣式操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法。分享給大家供大家參考。具體分析如下：

這是仿騰訊微博滑出效果的每日天氣代碼，鼠標(biāo)放上去，天氣內(nèi)容將從左向右滑出來(lái)，像開(kāi)抽屜一樣，本動(dòng)畫(huà)效果流暢，當(dāng)然少不了jQuery的功勞，本代碼使用了1.6.2版本的jQuery插件來(lái)實(shí)現(xiàn)這一功能。

<!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 type="text/css">
.weather{
 width:500px;height:100px;margin:0 auto;
 position:relative;color:#fff;text-align:center;
 overflow:hidden;
}
.weather_main{
 width:99px;border-right:solid 1px #fff;
 float:left;background:#F03;text-align:center;
 position:relative;z-index:2;
}
.weather_main strong{
 line-height:100px;
}
.weather_main strong a{
 border-bottom:solid 2px #fff;cursor:pointer;
}
.alert{
 width:400px;height:100px;position:absolute;
 left:-400px;top:0;background:#F03;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(".weather_main").hover(function(){
   $(".alert").animate({left:"100px"},1000);
   return false;
  },function(){
   $(".alert").animate({left:"-400px"},1000);
   return false;
   })
 })
</script>
</head>
<body>
 <div class="weather">
  <div class="weather_main">
   <strong><a>深圳</a></strong>
  </div><!--weather_main-->
  <div class="alert">
   <p>如果云知道，多想涼風(fēng)來(lái)做伴~</p>
 <p><a>提醒好友</a></p>
  </div>
 </div><!--weather box-->
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果
在網(wǎng)頁(yè)上經(jīng)常可以看到有背景圖片可以自動(dòng)淡入淡入切換的效果，非常漂亮，實(shí)用性也非常高，今天小編給大家分享基于jquery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
jquery 圖片上一張下一張鏈接效果（續(xù)篇）
很久沒(méi)寫(xiě)文章了，這段時(shí)間一直在做類(lèi)似鮮果的一個(gè)應(yīng)用和數(shù)據(jù)采集，還有就是對(duì)企業(yè)和個(gè)人成長(zhǎng)的思考。
2010-04-04
用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
這篇文章主要介紹了用jQuery實(shí)現(xiàn)的智能隱藏、帶滑動(dòng)效果的返回頂部代碼,非常實(shí)用,需要的朋友可以參考下
2014-03-03
jquery多瀏覽器捕捉回車(chē)事件代碼
最近我們網(wǎng)站做一個(gè)合作項(xiàng)目要求在頁(yè)面中捕捉回車(chē)事件，經(jīng)過(guò)好多測(cè)試找到這個(gè)
2010-06-06
讀jQuery之四（優(yōu)雅的迭代）
前面提到j(luò)Query庫(kù)如何通過(guò)其中的jQuery.extend及jQuery.fn.extend去擴(kuò)展自身的。第三篇給zChain.js添加了常用選擇器，但目前為止zChain.js仍然做不了任何事情。
2011-06-06
jquery動(dòng)態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
需要設(shè)置寬度為整個(gè)瀏覽器寬度的div，當(dāng)然我們可以使用相對(duì)布局的方式做到這一點(diǎn)，下面是具體實(shí)現(xiàn)，大家可以參考下
2014-06-06
使用jQuery5分鐘快速搞定雙色表格的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇使用jQuery5分鐘快速搞定雙色表格的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
jquery使用append(content)方法注意事項(xiàng)分享
append(content)函數(shù)的功能向每個(gè)匹配的元素內(nèi)部追加內(nèi)容，在使用方法上需要引起大家的注意，詳細(xì)看下面示例
2014-01-01
jQuery分組選擇器用法實(shí)例
這篇文章主要介紹了jQuery分組選擇器用法,以實(shí)例形式分析了分組選擇器的功能與具體用法技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能示例【代碼解釋】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能,結(jié)合完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的輪播圖相關(guān)功能實(shí)現(xiàn)、樣式設(shè)置與注意事項(xiàng),需要的朋友可以參考下
2023-05-05