浅入jquery-各种简单的效果[three]

xiaoxiao2026-02-18 15

前言

在现在的网页建设中效果是非常常用的。比如说当你鼠标移动到某个地方的时候出现的提示。当你鼠标点击的时候一些切换的效果。我相信每个人都不能没有注意这些特效。因为有了这些效果才能使我们的网页更加的美观，功能更加的丰富。掌握效果的使用也是非常基础而且有必要的基础课程。

效果种类

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>

总结

很多效果都需要自己去操作，试着模仿网站中的一些效果。我相信主要尝试肯定可以成功。