网页动画出入方式用jquery怎么写

来源：互联网发布：python 判断进程状态编辑：程序博客网时间：2024/06/09 15:00

问题？网页动画出入方式用jquery怎么写

1.原理：jquery框架做，基础属性animate属性。

jquery基础包和其他jquery插件包下载：点击打开下载链接

插件使用：插件导入，然后是另外一个文件中index的网页文件，打开可以看到这样的一个首页，把标注的部分，复制放入一下例子代码中就可以了。

例子：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style type="text/css">div{width: 100px;height: 100px;background-color: blue;position: absolute;left: 100px;}.box0{top: 100px;}.box1{top: 250px;}.box2{top: 400px;}.box3{top: 550px;}.box4{top: 700px;}.box5{top: 850px;}</style><script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery.easie.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">$(document).ready(function(){$(".box0").animate({"left": 1000},3000);$(".box1").animate({"left": 1000},3000,"linear");/*linear表示动画匀速运动，所以如果做这个的话，我们就需要用这样的一种形式。另外我们也可以使用jquery.easie.js插件的形式来做。看以下例子，但是记住要导"插件"哟！*/$(".box2").animate({"left": 1000},3000,"easieEaseInOut");$(".box3").animate({"left": 1000},3000,"easieEaseInQuad");$(".box4").animate({"left": 1000},3000,"easieEaseInOutQuint");$(".box5").animate({"left": 1000},3000,"easieEaseOutCubic");});</script></head><body><div class="box0"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></body></html>

在网页中试试看，什么效果？

0 0