<!--html-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>主站</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="lib/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="lib/index.js" type="text/javascript"></script>
<script type="text/javascript">
var time1 = setInterval("lianimated1()", 0);
var time2 = setInterval("lianimated2()", 0);
$(function () {
time1=cleananimated(time1,"ul.content_box_ul");
time2=cleananimated(time2,"ul.visit_box_ul");
});
</script>
</head>
<body>
<!--------------------header---------------------->
<div id="header"><img src="images/header.jpg"></div>
<!----------------------nav----------------------->
<div id="nav">
<ul>
<li id="current_page"><a href="index.html">首页</a></li>
<li><a href="introduce.html">个人简介</a></li>
<li><a href="photolist.html">个人相册</a></li>
<li><a href="articlelist.html">日志</a></li>
<li><a href="careerlist.html">职业规划</a></li>
<li><a href="worklist.html">作品展示</a></li>
</ul>
</div>
<!--------------------content--------------------->
<div id="content">
<div id="left_nav">
<ul>
<li><span><a class="title" href="index.html">首页</a></span></li>
<li><span><a class="title" href="photolist.html">相册列表</a></span></li>
<li><a href="sceneryphoto.html">旅游相册</a></li>
<li><a href="cartoonphoto.html">动漫卡通</a></li>
<li><a href="studyphoto.html">大学时光</a></li>
<li><span><a class="title" href="careerlist.html">职业规划</a></span></li>
<li><a href="#">大学生活</a></li>
<li><a href="#">活动参与</a></li>
<li><a href="#">实习打算</a></li>
<li><span><a class="title" href="articlelist.html">我的日志</a></span></li>
<li><a href="#">星湖游记</a></li>
<li><a href="#">重庆一览</a></li>
<li><a href="#">荷塘月色</a></li>
<li><span><a class="title" href="introduce.html">个人简历</a></span></li>
<li><a href="#">姓名</a></li>
<li><a href="#">姓别</a></li>
<li><a href="#">工作经验</a></li>
<li><span><a class="title" href="worklist.html">作品展示</a></span></li>
<li><a href="#">ps作品</a></li>
<li><a href="#">HTML作品</a></li>
<li><span><a class="title" href="#">经典瞬间</a></span></li>
</ul>
</div>
<div id="right_content">
<div id="photo">
<ul>
<li><a href="#"><img src="images/one.jpg"></a></li>
<li><a href="#"><img src="images/two.jpg"></a></li>
<li><a href="#"><img src="images/three.jpg"></a></li>
<li><a href="#"><img src="images/four.jpg"></a></li>
</ul>
</div>
<div id="title">
<div id="acedemic_image"><a href="#"><img src="images/more.png"></a>日志动态</div>
<div class="content_box">
<ul class="content_box_ul">
<li><a href="#">我很不幸的过了英语四级啊</a><span>06-13</span></li>
<li><a href="#">一女生说：生命科学院院长演讲一场，彻...</a><span>04-13</span></li>
<li><a href="#">【转】班任为王，导员为皇，讲师为妃，...</a><span>03-11</span></li>
<li><a href="#">一，当你发现自己不再盲目的喜欢跟风似...</a><span>02-19</span></li>
<li><a href="#">很多人都认为节省能让他们的生活更保险...</a><span>02-10</span></li>
<li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>02-09</span></li>
<li><a href="#">【转】我现在终于明白，其实爱情没那么...</a><span>02-01</span></li>
<li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>01-19</span></li>
<li><a href="#">我很不幸的过了英语四级啊</a><span>06-13</span></li>
<li><a href="#">一女生说：生命科学院院长演讲一场，彻...</a><span>04-13</span></li>
<li><a href="#">【转】班任为王，导员为皇，讲师为妃，...</a><span>03-11</span></li>
<li><a href="#">一，当你发现自己不再盲目的喜欢跟风似...</a><span>02-19</span></li>
<li><a href="#">很多人都认为节省能让他们的生活更保险...</a><span>02-10</span></li>
<li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>02-09</span></li>
<li><a href="#">【转】我现在终于明白，其实爱情没那么...</a><span>02-01</span></li>
<li><a href="#">请不要随意的对一个人下定义告诉你这样...</a><span>01-19</span></li>
</ul>
</div>
</div>
<div id="text">
<div class="box">
<div id="introduce">
<h3>个人简介</h3>
<p>我叫，<br>
来自。</p>
</div>
</div>
<div class="box">
<div id="career">
<h3>职业</h3>
<p>现学习软件工程，<br>
想从事软件开发。</p>
</div>
</div>
<div class="box">
<div id="love">
<h3>个人爱好</h3>
<p>喜欢古典文学，<br>
喜欢乒乓球。</p>
</div>
</div>
</div>
<div id="visit">
<div id="visit_image"><a href="#"><img src="images/more.png"></a>最近发生</div>
<div class="visit_box">
<ul class="visit_box_ul">
<li><a href="#">爬高压线触电身亡 身体被烧焦浓烟滚滚恐怖</a><span>06-20</span></li>
<li><a href="#">抗日雷剧再现神技：自行车飞拦火车似直升机</a><span>06-19</span></li>
<li><a href="#">成龙动作电影周落幕《战狼》豪取四奖成最大赢家</a><span>06-18</span></li>
<li><a href="#">爬高压线触电身亡 身体被烧焦浓烟滚滚恐怖</a><span>06-20</span></li>
<li><a href="#">抗日雷剧再现神技：自行车飞拦火车似直升机</a><span>06-19</span></li>
<li><a href="#">成龙动作电影周落幕《战狼》豪取四奖成最大赢家</a><span>06-18</span></li>
<li><a href="#">爬高压线触电身亡 身体被烧焦浓烟滚滚恐怖</a><span>06-20</span></li>
<li><a href="#">抗日雷剧再现神技：自行车飞拦火车似直升机</a><span>06-19</span></li>
<li><a href="#">成龙动作电影周落幕《战狼》豪取四奖成最大赢家</a><span>06-18</span></li>
</ul>
</div>
</div>
</div>
</div>
<!--------------------footer---------------------->
<div id="footer">
</div>
</body>
</html>
<!--js-->
var len1=0;
function lianimated1() {
var $right_content=$("#right_content");
var $box=$right_content.find("div.content_box");
var $box_ul=$right_content.find("ul.content_box_ul");
var height=$box.height();
var ul_height=$box_ul.height();
if(len1<(ul_height-height)){
$box_ul.animate({marginTop: '-=' +10},"slow");
len1+=10;
}else{
$box_ul.animate({marginTop: '+=' +len1},0);
len1=0;
}
}
var len2=0;
function lianimated2() {
var $right_content=$("#right_content");
var $box=$right_content.find("div.visit_box");
var $box_ul=$right_content.find("ul.visit_box_ul");
var height=$box.height();
var ul_height=$box_ul.height();
if(len2<(ul_height-height-60)){
$box_ul.animate({marginTop: '-=' +10},"slow");
len2+=10;
}else{
$box_ul.animate({marginTop: '+=' +len2},0);
len2=0;
}
}
function cleananimated(time,a) {
var $right_content=$("#right_content");
var $box_ul=$right_content.find(a);
$box_ul.mouseover(function () {
clearInterval(time);
}).mouseout(function () {
time1=setInterval("lianimated1()",50);
return time1;
});
}
下面这个函数是有问题的
function cleananimated(time,a) {
var $right_content=$("#right_content");
var $box_ul=$right_content.find(a);
$box_ul.mouseover(function () {
clearInterval(time);
}).mouseout(function () {
time1=setInterval("lianimated1()",50);
return time1;
});
}
前面
time1=cleananimated(time1,"ul.content_box_ul");
time2=cleananimated(time2,"ul.visit_box_ul"); //这里有time2，但上面函数在Out的时候只会改变time1。也就是最后time1,time2都会执行lianimated1这个函数定时
css部分
<!--css-->
body,div,ul,li,a{
margin:0;
padding:0;
color:#666;
text-decoration:none;
list-style:none;
}
#header{
width:960px;
height:227px;
margin:0 auto;
}
#nav{
width:960px;
height:45px;
margin:0 auto;
background:url(../images/nav.jpg) no-repeat;
}
#nav ul{
height:45px;
list-style:none;
line-height:45px;
text-align:center;
font-weight:bolder;
font-family:'微软雅黑';
font-size:12px;
padding-left:110px;
}
#nav ul li{
width:120px;
height:45px;
float:left;
}
#nav ul li a{
color:#333;
text-decoration:none;
}
#current_page{
background:url(../images/pointer.png) no-repeat;
}
#nav ul li:hover a{
background:url(../images/point.png) no-repeat;
color:#FFF;
display:block;
}
#footer{
width:960px;
height:57px;
margin:0 auto;
background:url(../images/footer.jpg) no-repeat;
text-align:center;
color:#333;
font-size:12px;
font-weight:bold;
padding-top:28px;
}
#content{
width:960px;
height:547px;
margin:0 auto;
margin-top:5px;
}
#left_nav{
width:180px;
height:540px;
float:left;
background:url(../images/left_bg.jpg) no-repeat;
}
#left_nav ul{
width:180px;
height:17px;
margin-top:20px;
}
#left_nav ul li{
margin-left:35px;
padding-bottom:2px;
width:85px;
height:17px;
line-height:17px;
margin-bottom:3px;
font-family: '宋体';
}
#left_nav ul a{
color:#666;
text-decoration:none;
}
#left_nav ul li:hover a{
font-weight:bolder;
color:#0F3;
display:block;
}
#left_nav ul li span .title{
font-size:20px;
font-weight:bold;
text-decoration:none;
color:#333;
display:block;
margin:8px 0;
}
#left_nav ul li:hover .title{
color:#0F3;
display:block;
}
#right_content{
width:775px;
height:540px;
float:left;
margin-left:5px;
background:url(../images/bg.jpg) no-repeat;
}
#photo{
width:343px;
height:220px;
float:left;
padding:5px 5px;
}
#photo li{
width:150px;
list-style:none;
float:left;
position:relative;
}
#photo li img{
width:150px;
margin:0 5px;
border:5px #FFFFFF solid;
}
#title{
width:420px;
height:230px;
float:left;
}
#title .content_box{
width:420px;
height:205px;
overflow: hidden;
position: relative;
}
#title .content_box .content_box_ul{
width:420px;
height:410px;
position: absolute;
top: 0;
left: 0;
}
#acedemic_image{
width:355px;
height:25px;
margin-left:17px;
background:url(../images/star.png) no-repeat;
padding-left:17px;
font-size:12px;
margin-top:5px;
font-weight:bold;
padding-right:5px;
}
#acedemic_image img{
float:right;
}
#title ul{
font-size:12px;
}
#title ul li{
width:390px;
list-style:none;
padding-left:10px;
border-bottom:1px dotted #CCCCCC;
margin:0 10px;
padding-bottom:6px;
padding-top:4px;
}
#title ul li a{
text-decoration:none;
}
#title ul li span{
float:right;
font-size:12px;
padding-right: 15px;
}
#text{
width:773px;
height:205px;
margin-top:5px;
float:left;
font-family: '宋体';
}
#text .box{
width:236px;
height:165px;
border:1px solid #CCC;
float:left;
margin:20px 8px;
border-radius:20px;
}
#introduce{
width:188px;
height:139px;
border:1px dotted #CCC;
float:left;
margin:8px 8px;
border-radius:20px;
background:url(../images/introduce.jpg) no-repeat;
padding:5px 15px;
}
#career{
width:188px;
height:139px;
border:1px dotted #CCC;
float:left;
margin:8px 8px;
border-radius:20px;
background:url(../images/career.jpg) no-repeat;
padding:5px 15px;
}
#love{
width:188px;
height:139px;
border:1px dotted #CCC;
float:left;
margin:8px 8px;
border-radius:20px;
background:url(../images/motion.jpg) no-repeat;
padding:5px 15px;
}
#visit{
width:773px;
height:95px;
margin-top:5px;
float:left;
}
#visit .visit_box{
width:773px;
height:70px;
overflow: hidden;
position: relative;
}
#visit .visit_box .visit_box_ul{
width:420px;
height:270px;
position: absolute;
top: 0;
left: 0;
}
#visit_image{
width:720px;
height:25px;
margin-left:17px;
background:url(../images/focus.png) no-repeat;
padding-left:17px;
font-size:12px;
margin-top:5px;
font-weight:bold;
padding-right:5px;
list-style:none;
}
#visit_image img{
float:right;
}
#visit ul{
font-size:12px;
}
#visit ul li{
width:743px;
list-style:none;
border-bottom:1px dotted #CCCCCC;
margin:0 10px 0 20px;
padding-bottom:3px;
padding-top:3px;
}
#visit ul li a{
text-decoration:none;
}
#visit ul li span{
float:right;
font-size:12px;
padding-right:15px;
}