jquery实现的字体旋转

minn84

浏览: 199190 次
性别:
来自: 广州

最近访客更多访客>>

fatcatman

linforwin

njison

springcloud关注者

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

jQuery XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="keywords" content="div，菜单，网站导航,jquery动画,留言板,css,jquery个人网站"> <meta http-equiv="description" content="个人网站，技术网集中营">
<title>个人作品,友情链接</title>
<style type="text/css">

#donghua{
color: #cccccc;
left:150px;
top:250px;
position: absolute;
width:550px;
height: 150px;
}

#donghua a{
font: monospace;
text-decoration: none;
color:#660033;
cursor: default;
}
#box1{
float: left;
position: relative;
font-size: 18px;
top: 60px;
left:250px;
}
#box2{
float: left;
position: relative;
font-size: 18px;
top: 60px;
left:280px;
}
#box3{
float: left;
position: relative;
font-size: 18px;
top: 100px;
left:240px;
}
#box4{
float: left;
position: relative;
font-size: 18px;
top: 85px;
left:270px;
}
#box5{
float: left;
position: relative;
font-size: 18px;
top: 35px;
left:250px;
}
#box6{
float: left;
position: relative;
font-size: 18px;
top: 10px;
left:180px;
}
#box7{
float: left;
position: relative;
font-size: 18px;
top: 35px;
left:115px;
}
#box8{
float: left;
position: relative;
font-size: 18px;
top: 80px;
left:95px;
}

#menupanel dl{
text-align:left;
}
</style>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){
donghua();

});

function donghua1()
{

$("#box3").animate({opacity: "0.5", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.3",top:"-=45"}, 1200).
animate({opacity: "0.2",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.5",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.9",top:"+=45"}, 1200).
animate({opacity: "0.7",left:"+=60",top:"+=20"}, 1200,function(){

});
$("#box4").animate({opacity: "0.2",top:"-=45"}, 1200).
animate({opacity: "0.5",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.3",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.7",top:"+=45"}, 1200).
animate({opacity: "0.9",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.6", left: "+=50",top:"-=20"}, 1200);

$("#box5").
animate({opacity: "0.2",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.5",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.7",top:"+=45"}, 1200).
animate({opacity: "0.9",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.7", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.6",top:"-=45"}, 1200);

$("#box6").
animate({opacity: "0.5",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.4",top:"+=45"}, 1200).
animate({opacity: "0.2",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.6", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.9",top:"-=45"}, 1200).
animate({opacity: "0.7",left:"-=55",top:"-=25"}, 1200);

$("#box7").
animate({opacity: "0.1",top:"+=45"}, 1200).
animate({opacity: "0.3",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.5", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.7",top:"-=45"}, 1200).
animate({opacity: "0.6",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.9",left:"-=55",top:"+=25"}, 1200);
$("#box8").
animate({opacity: "0.5",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.1", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.7",top:"-=45"}, 1200).
animate({opacity: "0.3",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.9",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.6",top:"+=45"}, 1200,function(){
donghua1();
});

}

function donghua2()
{
$("#box1").
animate({opacity: "0.1",left:"+=25",top:"-=20"}, 1200).
animate({opacity: "0.4",left:"+=25",top:"+=20"}, 1200).
animate({opacity: "0.8",left:"-=25",top:"+=20"}, 1200).
animate({opacity: "1",left:"-=25",top:"-=20"}, 1200);
$("#box2").
animate({opacity: "0.4",left:"-=25",top:"+=20"}, 1200).
animate({opacity: "0.1",left:"-=25",top:"-=20"}, 1200).
animate({opacity: "0.8",left:"+=25",top:"-=20"}, 1200).
animate({opacity: "1",left:"+=25",top:"+=20"}, 1200,function(){
donghua2();
});
}
function donghua()
{
donghua1();
donghua2();

}

</script>
</head>

<body id="bd" onselectstart="return false;" oncontextmenu="return false;">

    <div id="donghua">
        <div id="box1"><a >欢</a></div>
        <div id="box2"><a >迎</a></div>
        <div id="box3"><a >我</a></div>
        <div id="box4"><a >的</a></div>
        <div id="box5"><a >个</a></div>
        <div id="box6"><a >人</a></div>
        <div id="box7"><a >网</a></div>
        <div id="box8"><a >站</a></div>
    </div>

</body>
</html>

记得引入：jquery.js