天气显示的动画。其中用到了css3 transition 动画基础。W3C标准规定:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”
transition语法:
transition:[<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>]
transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。详细用法:
变化的属性transition-property : none | all | [<元素属性名IDENT>][','<IDENT>]* ;
动画时间transition-duration : <time> [,time]*;
动画执行的方式:transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;
动画延迟:transition-delay : <time> [,time]* ;
HTML代码:
动画部分的相关CSS代码:
jQuery事件处理代码:
transition语法:
transition:[<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>]
transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。详细用法:
变化的属性transition-property : none | all | [<元素属性名IDENT>][','<IDENT>]* ;
动画时间transition-duration : <time> [,time]*;
动画执行的方式:transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;
动画延迟:transition-delay : <time> [,time]* ;
CSS3 transform的属性包括:旋转角度rotate() / 倾斜角度skew() / 放缩倍数scale() / 位移大小translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
HTML代码:
<div id="user">
<ul>
<li class="weather">
<a href="javascript:void()"><span>天气预报</span><br />
<p class="bold">今日天气(北京):</p>
<p class="dtl"><{$wt.today.t}> <{$wt.today.text}> <{$wt.today.wind}> <{$wt.today.wg}></p>
<p class="bold">明日天气(北京):</p>
<p class="dtl"><{$wt.next.t}> <{$wt.next.text}> <{$wt.next.wind}> <{$wt.next.wg}></p>
</a>
</li>
<li class="name"><font color="white">欢迎您,尊敬的<{if $smarty.const.ADMINLEVEL eq 1}>超级管理员<{elseif $smarty.const.ADMINLEVEL eq 2}>普通管理员<{elseif $smarty.const.ADMINLEVEL eq 9}>CP管理员<{/if}>:<{$smarty.const.TRUENAME}>(<{$smarty.const.USERNAME}>)</font></li>
<li class="msg"><a href="?c=member&a=msglist" target="main-frame" id="adminmsg" >信息<{if $msgstatus > 0}>共<font color="red"><b><{$msgstatus}>条</b></font><{/if}></a></li>
<li class="set"><a href="">设置</a></li>
<li class="exit"><a href="?c=login&a=logout" target="_top"><{$lang.signout}></a></li>
</ul>
</div>
动画部分的相关CSS代码:
<style media="all" type="text/css">
.weather{position:relative;}
.weather a{position:absolute;color:#fff;z-index:999;width:55px;right:15px;overflow:hidden;border-right:1px solid #f3f3f3;height:12px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;}
.weather a.hov{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(-100px,50px);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(-100px,50px)}
.weather a.zoom1{height:auto;width:200px;background-color:#2676A7;padding:5px;}
.weather a.zoom2{height:12px;width:55px;background:none;padding:0;}
.weather a p{padding:2px 0;color:#fff;}
.weather a.zoom1 span{font-weight:900;background:#fff;color:#333;border-radius:0 10px 10px 0;padding:5px 10px;display:inline-block;}
.weather a .bold{font-weight:900;font-size:10px;}
.weather a .dtl{color:#f3f3f3;font-size:8px;}
</style>
jQuery事件处理代码:
$(".weather a").click(function(){
$(this).removeClass().addClass("hov").addClass("zoom1").show();;
//$(this).css({"height":"auto","width":"200px","z-index":"999","background-color":"#2676A7","padding":"5px"}).show();
setTimeout(function(){$(".weather a").removeClass().addClass("zoom2");}, 6000);
});
PHP数据处理代码:
public function frame()
{
//$w = get_weather();
$cache = &cache_server();
$w = $cache->get('mw_login_welcome');
if(!$w)
{
$w = get_weather();
$cache->set('mw_login_welcome',$w,3600);
}
//$datalist = mod_pmsys::getmenudata();
$first_menu_list = mod_nmenu::get_user_firstmenu();
pm_tpl::assign('datalist',$first_menu_list);
pm_tpl::assign('wt',$w);
pm_tpl::display('index');
exit();
}
相关函数:
function get_weather()
{
$ret = gethttp('http://m.weather.com.cn/data/101010100.html');
$wdata = json_decode($ret,1);
$wdata = $wdata['weatherinfo'];
$w = array();
$w['today'] = array('t' => $wdata['temp1'],'text' => $wdata['weather1'],'wind' => $wdata['wind1'],'wg' => $wdata['fl1']);
$w['next'] = array('t' => $wdata['temp2'],'text' => $wdata['weather2'],'wind' => $wdata['wind2'],'wg' => $wdata['fl2']);
return $w;
}
function gethttp($url)
{
$ctx = stream_context_create(
array(
'http' => array(
'timeout' => 5 //设置一个超时时间,单位为秒
)
)
);
$r = file_get_contents($url, 0, $ctx);
unset($ctx);
return $r;
}
到此为止。主要目的记录一下这些属性的用法。