前言
在现在的网页建设中效果是非常常用的。
比如说当你鼠标移动到某个地方的时候出现的提示。
当你鼠标点击的时候一些切换的效果。
我相信每个人都不能没有注意这些特效。
因为有了这些效果才能使我们的网页更加的美观，功能更加的丰富。
掌握效果的使用也是非常基础而且有必要的基础课程。
效果种类
1.显示和隐藏。
2.淡入淡出
3.移动
4.动画
显示和隐藏。
简单介绍
显示和隐藏是最基本的效果了。
而且是随处可见的。例如csdn的首页的
很典型的一个例子。
简单示例
仿照网易邮箱记住密码做的。
主要使用hide和show方法
和html中设置style可见度是一个道理。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$("div").mouseenter(function () {
$("#info").show();
})
$("div").mouseleave(function () {
$("#info").hide();
})
})
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div align="center">
<input type="checkbox" value="一周内免登陆"/><span>一周内免登陆</span>
</div>
<p id="info" align="center" style="display: none">xxxxxxxxxxxxxxxxxx</p>
</body>
</html>浅入浅出
简单介绍
也算是一种显示和隐藏功能，但是可以设置显示和隐藏的速度和透明度。
方法介绍
- fadeIn(speed,callback) 可以设置淡入的时间以及callback函数。
- fadeOut(speed，callback)可以设置淡出时间和callback函数。
- fadeToggle（speed，callback）是上述两个函数的结合体。可以在两种状态之间切换
- fadeTo(speed,opacity,callback) 可以设置时间透明度callback函数。
简单示例
和上述的例子基本相同。
只要替换函数名即可。
1.fadeIn和fadeOut
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$("div").mouseenter(function () {
$("#info").fadeIn(1000);
})
$("div").mouseleave(function () {
$("#info").fadeOut(1000);
})
})
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div align="center">
<input type="checkbox" value="一周内免登陆"/><span>一周内免登陆</span>
</div>
<p id="info" align="center" style="display: none">xxxxxxxxxxxxxxxxxx</p>
</body>
</html>2.fadeToggle
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<style>
.div {
width: 100px;
height: auto;
margin-right: auto;
margin-left: auto;
}
.div .div-top {
height: 100px;
background-color: #049f3a;
}
.div .div-bottom {
background-color: aqua;
height: 200px;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$(".div-top").click(function () {
$(".div-bottom").toggle(1000);
});
});
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div" align="center">
<div class="div-top">点击我测试</div>
<div class="div-bottom"></div>
</div>
</body>
</html>3.dadeto
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<style>
.div {
width: 100px;
height: auto;
margin-right: auto;
margin-left: auto;
}
.div .div-top {
height: 100px;
background-color: #049f3a;
}
.div .div-bottom {
background-color: aqua;
height: 200px;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$(".div-top").click(function () {
$(".div-bottom").fadeTo(1000,0.5);
});
});
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div" align="center">
<div class="div-top">点击我测试</div>
<div class="div-bottom"></div>
</div>
</body>
</html>移动效果
简单介绍
通过移动效果其实和消失移动的功能和和相似。
方法介绍
- slideDown() //向下滑动
- slideUp() //向上滑动
- slideToggle() //向上下滑动的循环
简单示例
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
//$(".panel").slideUp("slow");
//$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>仔细观察</p>
<p>移动过程</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
动画
简单介绍
在原来的效果之上加上对属性的一些操作使得如同动画一般。
主要方法
animate({params},speed,callback) //属性集合，速度和回调函数
简单示例
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>总结
很多效果都需要自己去操作，试着模仿网站中的一些效果。
我相信主要尝试肯定可以成功。
