您的位置：首页 > Web前端 > JQuery

jQuery基础-div层的移动

2016-03-25 16:37 309 查看

目标效果：

页面中有一个Button，还有一个div层，点击Button可以让div层向右再向下再向左最后向上运动，并且层的透明度逐渐变浅再逐渐加深。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.8.0.min.js"></script>
<meta charset="utf-8" />
<script>
$(document).ready(function () {
$("#bt").click(function () {                  //$("")中，控件直接写控件名，如Button，锁定Button为$("Button")，代表锁定全部的Button；id前边加#，如id为bt，锁定id为bt的控件为$("#bt")；class样式前边加.,如class样式为one，锁定应用one的class样式的控件为$(".one")。
$("div").animate({ left: '+=500px', opacity: '0.5' }, 500, fnDown);    //animate方法代表移动方向与距离，opacity代表透明度，500为500毫秒运动完，fnDown为运动结束调用fnDown方法
});
function fnDown() {
$("div").animate({ top: '+=500', opacity: '0' }, 500, fnLeft);
};
function fnLeft() {
$("div").animate({ left: '-=500', opacity: '0.5' }, 500, fnUp);
};
function fnUp() {
$("div").animate({ top: '-=500', opacity: '1' }, 500);
};
})
</script>
<style>
div {
width:100px;
height:100px;
background-color:blue;
position:absolute;
top:30px;
left:8px;
}
</style>
</head>
<body>
<input type="button" id="bt" value="click"/>
<div></div>
</body>
</html>

在页面开头要导入相应的jQuery的库。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航