jquery的动画效果
程序员文章站
2022-05-02 20:06:28
...
- 这个实现的效果是从上往下翻图片。翻到底，从下往上翻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础动画</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/01.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>直隐直现的轮播图</h1>
</body>
</html>
<script>
var i = 0; //定义帧数的变量
var len = $("img").length - 1; //判断执行方向
setInterval(function(){
if(i++%(2*len) < len){
$("img:visible").slideUp().next().slideDown();
}else{
$("img:visible").slideUp().prev().slideDown();
}
},1000);
</script>
- 字母滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字幕滚动实例</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/02.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>美句欣赏</h1>
<ul>
<li>I love three things in this world. Sun, moon and you. Sun for morning, moon for night , and you forever</li>
<li>There are no trails of the wings in the sky, while the birds has flied away.</li>
<li>Every hour of lost time is a chance of future misfortune.</li>
<li>Learn from yesterday,live for today,hope for to morrow</li>
<li>You know my loneliness is only kept for you, my sweet songs are only sung for you.</li>
</ul>
</body>
</html>
<script>
$("li:last").hide();
setInterval(function(){
$("li:first").slideUp(1000,"linear",function(){
$(this).appendTo("ul");
}).parent().find("li:last").slideDown(1000,"linear");
},1020);
</script>
- 小广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>富web应用</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/03.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="advertisement">
<h3>欢迎您，加入兄弟会！</h3>
<div>
<h4>**成蝶，放飞你的梦想</h4><br>
<p>在这里无兄弟不编程，让学习成为一种习惯，破茧成蝶，在大师们帮助下让您的IT梦扬帆起航！！！</p>
</dl>
</div>
</div>
</body>
</html>
<script>
var screenHeight = $(window).height(); //获取窗口的高度
$("#advertisement").css({ //对小广告进行初始化
position:"fixed",
width:'0px',
height:'160px',
right:0,
top:screenHeight - 165,
}).animate({ //出现小广告的内容部分
width:"306px",
},3000).animate({ //出现小广告的标题部分
top:screenHeight - 205,
height:"200px"
},3000).find("h3").delay(3000).animate({
height:"40px"
},3000);
</script>