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

最新推荐文章于 2023-02-04 00:14:13 发布

黯雅悸动

最新推荐文章于 2023-02-04 00:14:13 发布

阅读量1.1k

点赞数

分类专栏： --------《前端开发》文章标签：动画 jquery插件 jquery的动画方式框架 jquery包下载

本文链接：https://blog.csdn.net/Mr_li13/article/details/50621169

版权

--------《前端开发》专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题？网页动画出入方式用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

收藏

觉得还不错? 一键收藏
0
评论
网页动画出入方式用jquery怎么写

问题？网页动画出入方式用jquery怎么写1.原理：jquery框架做，基础属性animate属性。jquery基础包和其他jquery插件包下载：插件使用：插件导入，然后是另外一个文件中index的网页文件，打开可以看到这样的一个首页，把标注的部分，复制放入一下例子代码中就可以了。例子： div{ width: 100px
复制链接

扫一扫

专栏目录