<!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
- 大小: 1.9 KB
分享到:
相关推荐
jQuery 3D 文字三维旋转效果代码 jQuery 3D 文字三维旋转效果代码
jquery文字旋转放大特效,jquery,文字特效,文字旋转,变换字距.
一款依赖jquery 实现旋转木马3D文字效果的例子。
jquery实现图片翻牌旋转特效是一款当鼠标悬浮到图片上的时候,图片与文字间进行翻转切换。
jQuery可拖拽3D万花筒旋转特效是一款通过jQuery跟CSS3 transform来实现在用户鼠标按下时,万花筒图片可以跟随鼠标进行3D旋转动画展示。
本文实例讲述了jquery实现可旋转可拖拽的文字效果代码。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta ...
jquery文字旋转放大特效,jquery,文字特效,文字旋转,变换字距.
jquery 旋转木马3D文字效果.rarjquery 旋转木马3D文字效果.rarjquery 旋转木马3D文字效果.rarjquery 旋转木马3D文字效果.rarjquery 旋转木马3D文字效果.rarjquery 旋转木马3D文字效果.rar
需要先引用基础jquery类库 然后在引用这个 最后 //演示1 //旋转45angle $(document.body).click(function () { //方式1 $('.divOne').rotate(45); //方式2 $('.divOne').rotate({ angle: 45 }); }); ? ...
96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品大图展示 98. 很帅的jQuery鼠标移动预览图展示+简介内容展示特效代码 99. 打包jQuery实用3个焦点图切换自动切换特效的...
96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品大图展示 98. 很帅的jQuery鼠标移动预览图展示+简介内容展示特效代码 99. 打包jQuery实用3个焦点图切换自动切换特效的...
基于jQuery的类似旋转木马的3D分享按钮效果的实现代码 基于jquery的利用z-index实现的多图层叠展示效果的代码 基于jquery的模拟windows8风格的菜单效果 基于jquery的实现的各种图片边界特效 基于jQuery的实现的适用...
jquery+css3实现图片圆形旋转点击可显说明文字效果.zip
JQuery全屏3D旋转木马焦点图,带左右箭头,带图片文字说明,带图片放大功能,图片放大后可用键盘切换,兼容所有主流浏览器。