Maison > Article > interface Web > Comment imiter l'effet coulissant de Tencent Weibo en utilisant jQuery pour signaler la météo quotidienne
Cet article présente principalement la méthode jQuery consistant à imiter l'effet coulissant de Tencent Weibo pour signaler la météo quotidienne, impliquant des événements de souris jQuery et des compétences opérationnelles de style CSS. Les amis dans le besoin peuvent s'y référer
Il s'agit d'un. imitation Code météo quotidien pour l'effet coulissant Tencent Weibo. Placez la souris dessus et le contenu météo glissera de gauche à droite, comme si vous ouvriez un tiroir. L'effet d'animation est fluide. Bien sûr, jQuery est indispensable. version 1.6.2 du plugin jQuery pour obtenir cette fonctionnalité.
<!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> <p class="weather"> <p class="weather_main"> <strong><a>深圳</a></strong> </p><!--weather_main--> <p class="alert"> <p>如果云知道,多想凉风来做伴~</p> <p><a>提醒好友</a></p> </p> </p><!--weather box--> </body> </html>
【Recommandations du didacticiel associées】
1 Tutoriel vidéo JavaScript
2. Manuel3.
Tutoriel bootstrap