本文详细介绍了如何使用HTML、CSS和jQuery来创建网页中的动态效果，包括元素的隐藏和显示、淡入淡出动画以及尺寸变化。此外，还展示了如何通过JavaScript和CSS操作改变元素样式。
<html>
<head>
<title>zz Web</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.redbox{width: 100px;height: 100px;background-color: red;position: absolute;}
.bluebox{width: 100px;height: 100px;float:left;background-color: blue;display: none;}
.yellowbox{width: 100px;height: 100px;float:left;background-color:yellow;display: none;}
</style>
</head>
<body>
<div id ="d"class = "redbox"></div>
<div id ="c"class = "bluebox">Hello</div>
<div id ="b"class = "yellowbox">zz</div>
<button>begin</button>
</body>
</html>
<script>
//常用效果
$("button").click(function(){
$("#d").hide(2000);//隐藏
})
$("button").click(function(){
$("#c").show(2000);//展示
})
$("button").mouseenter(function(){
$("#b").toggle(2000);//切换
})
//然后淡入和滑动也是类似就不演示了
//动画
$("#d").click(function(){
$("#d").animate({
left:'200px', width:'200px',height:'200px'
}).animate({
top:'200px', width:'200px',height:'200px'
}).animate({
left:'0px', width:'200px',height:'200px'
}).animate({
top:'0px', width:'200px',height:'200px'
});
});//注意这个指令是执行一个操作以后，第二个才做是在第一个操作的基础上进行。
//其他几个动画指令也可以连接起来完成此操作
//cs操作
$("#d").click(function(){
$("#d").css("width","500px");
})
</script>
4787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
