第一个 设置一个初始的div，宽高均为100，页面中部居中，背景演示为黑色 。div上方有5个控制按钮，分别为变宽、变高、变色、隐藏、重置。分别对应为变宽为宽度+100，变高为高度+100，变色为背景演示转换为红色，隐藏为整体div消失，重置转换为初始状态。
第二个 作一个循环滚动的导航链接，设计一个链接到外部地址的多链接，设置导航链接从左至右进行滚动循环，当鼠标悬停在链接上时，链接停止滚动，鼠标移出链接，则链接继续进行循环
第二个 作一个循环滚动的导航链接，设计一个链接到外部地址的多链接，设置导航链接从左至右进行滚动循环，当鼠标悬停在链接上时，链接停止滚动，鼠标移出链接，则链接继续进行循环
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
var num = 0;
$("#bt button").click(function() {
var id = $(this).html() ;
if (id == '变宽') {
$(".dir").width(200)
} else if (id == '变高') {
$(".dir").height(200)
} else if (id == '变色') {
$(".dir").css("background-color", "#F00")
} else if (id == '隐藏') {
$(".dir").hide()
}
else {
$(".dir").width(100), $(".dir").height(100) ,$(".dir").css("background-color", "#000");
$(".dir").show()
}
});function goLeft() {
if (num == -750) {
num = 0
}
num -= 1;
$(".scroll").css({
left: num
})
}
var timer = setInterval(goLeft, 20);
$(".box").hover(function() {
clearInterval(timer)
}, function() {
timer = setInterval(goLeft, 20)
})
})
</script>
<style type="text/css">
div {display: block;}
ul li{ margin:0px;clear: both; padding:0px;outline: 0;list-style:none; float:left}
.box{margin:auto; width:600px; height:30px; line-height:30px; margin-top:50px; border:#F60 1px solid; padding:5px; position:relative; overflow:hidden}
.box ul{ margin:0px;}
.scroll {width:600px;position:absolute;left:0px;top:0px;}
.scroll a{width:100px;float:left;line-height:40px;text-align:center;}
</style>
</head><body><div id="bt" style="width:600px; height:60px; margin:auto; line-height:60px; text-align:center">
<button>变宽</button> <button>变高</button>
<button>变色</button> <button>隐藏</button>
<button>重置</button>
</div>
<div class="dir" style="color:#fff; margin:auto; background:#000; width:100px; height:100px; text-align:center; line-height:100px;">初始的div</div>
<div class="box">
<ul class="scroll">
<a href="http://www.baidud.com" target="_blank">链接1</a>
<a href="http://www.baidud.com" target="_blank">链接2</a>
<a href="http://www.baidud.com" target="_blank">链接3</a>
<a href="http://www.baidud.com" target="_blank">链接4</a>
<a href="http://www.baidud.com" target="_blank">链接5</a>
<a href="http://www.baidud.com" target="_blank">链接6</a>
<a href="http://www.baidud.com" target="_blank">链接7</a>
</ul>
</div></body>
</html>