学习 JavaScript 记录一下
<html><head> <title> ttt </title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> div#con { border: 1px solid #54a70d; width: 400px; font-size: 16px; text-algin: left; height: 300px; } ul.hot li { list-style: none; border: 1px solid #da3a08; padding: 3px 5px; float: left; cursor: pointer; } li#hot_t { border-bottom-width: 0px; } div.hot { clear: both; display: none; padding-top: 20px; } div.topic { display: block; } div#top { position: relative; top: 50px; left: 200px; z-index: 10; width: 200px; height: 200px; background-color: red; } div#top button { margin-left: 50px; } </style></head><body><script type="text/javascript"> var left = 200; var top = 40; var i = 0; function dong() { document.getElementById('top').style.left = (left + Math.sin(i) * 10) + 'px'; i = i + 20; var set = setTimeout('dong();', 30); if (i % 180 == 0) { clearTimeout(set); i = 0; } } $(document).ready(function() { $("#hot_v").mouseover( function() { $("div.video").show(); $("#hot_v").css("border-bottom-width", "0"); $("div.topic").hide(); $("#hot_t").css("border-bottom-width", "1px"); $("div.pra").hide(); $("#hot_p").css("border-bottom-width", "1px"); } ); $("#hot_t").mouseover( function() { $("div.video").hide(); $("#hot_v").css("border-bottom-width", "1px"); $("div.topic").show(); $("#hot_t").css("border-bottom-width", "0px"); $("div.pra").hide(); $("#hot_p").css("border-bottom-width", "1px"); } ); $("#hot_p").mouseover( function() { $("div.video").hide(); $("#hot_v").css("border-bottom-width", "1px"); $("div.topic").hide(); $("#hot_t").css("border-bottom-width", "1px"); $("div.pra").show(); $("#hot_p").css("border-bottom-width", "0"); } ); });</script><div id="con"> <ul class="hot"> <li id="hot_t">hot topic</li> <li id="hot_v">hot video</li> <li id="hot_p">hot practice</li> </ul> <div class="topic hot"> topictopictopi ctopictopictopic topictopictopicto pictopictopic topictopictopict opictopictopic topictopictopic topictopictopic </div> <div class="video hot"> video videovideovid eovideovideovideo </div> <div class="pra hot"> pra pra pra pra pra pra pra pra </div></div><div style="position:absolute;"> <div id="top"> <button type="button" >点我一下</button> </div></div></body></html>
页:
[1]