<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟文字飞入的效果</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<script>
//创建元素移动的效果
function createMove(startLeftPosition, startTopPosition) {
//元素移动的终止位置以及样式
var tar = {
left: startLeftPosition,
top: startTopPosition,
width: "20px",
height: "20px",
opacity: 1
};
//创建移动的元素
$(document.body).append("<label id='c1'>11</label>");
//为创建的元素添加样式
$("#c1").css({
width: "60px",
height: "60px",
backgroundColor: "red",
position: "absolute",
opacity: 0.4
})
//为创建的元素添加动画
$("#c1").animate(tar, 1000,"linear",function() {
$(this).removeAttr("class").css({
width: "20px",
height: "20px",
backgroundColor: "blue",
position: "absolute"
});
startShake(this,startLeftPosition);
});
}
//设置抖动的效果
function startShake(element,startLeftPosition) {
var a = true;
var count=0;
var countShake = setInterval(function() {
element.style.left = (a ? startLeftPosition-5: startLeftPosition+5) + 'px';
a = !a;
count++;
if (count == 15){
clearInterval(countShake);
}
}, 40);
}
createMove(900,500);
</script>
</body>
</html>
jquery实现文字飞入到某一位置后抖动之后停止
猜你喜欢
转载自blog.csdn.net/qq_26941173/article/details/78965942
今日推荐
周排行