jquery 滚动特效向上滚动

dogasshole

浏览: 843406 次

最近访客更多访客>>

aininim

nat2010

lyl_420819

qiaokangping

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1329)

社区版块

存档分类

2012-03 ( 56)
2012-02 ( 126)
2012-01 ( 103)
更多存档...

效果查看网址：http://www.miiceic.org.cn/amt2011/

源代码如下：
<!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" />
<title>首届跨领域技术体验峰会</title>
<style type="text/css">
.kuang{width:292px;overflow:hidden;height:423px;_height:468px;font-size:12px; line-height:22px; color:#666;border:1px solid #c7c7c7;}
.gd{width:293px;overflow:hidden;height:423px;_height:468px;}
.newstu{width:291px; padding:4px 0 4px 2px; float:left; }
.newstu img{ width:67px; height:77px; float:left; padding:2px; border:1px solid #CCCCCC;}
.newstu ul{margin:0; padding:0; float:left;}
.newstu li{ background-position:6px 5px; padding:2px 0 2px 22px;height:14px; line-height:14px; color:#dc615c; font-weight:bold;}
.newstu li a:link,.newstu li a:visited { color:#dc615c;}
.newstu li a:hover { color: #666666;}
.newsgaish{width:200px; height:52px;float:left; margin-left:10px;float:left; line-height:20px;}
.newsgaish a:link { color:#323232;}
.newsgaish a:hover { color: #666666;}
.newsgaish a:visited { color:#323232;}
</style>
<script type="text/javascript" src="http://www.miiceic.org.cn/templets/js/jquery-1.3.1.js"></script>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).animate({
marginTop:"-77px"
},500,function(){
$(this).css({marginTop:"0px"}).find("div:first").appendTo(this);
});
}
$(document).ready(function(){
timerID=setInterval('AutoScroll(".gd")',4000)
});
document.getElementById("gund").onmouseover=function() {clearInterval(timerID)}
document.getElementById("gund").onmouseout=function() {timerID=setInterval('AutoScroll(".gd")',4000)}
</script>
</head>

<body>
<div class="kuang">
<div class="gd" id="gund">
<div class="newstu"><a href="http://www.miiceic.org.cn/amt2011/jszj_7516.html" title="高焕堂"><img src="http://www.miiceic.org.cn/uploads/110824/1-110R411264E91.jpg" width="67" height="77" border=0 alt="高焕堂"/></a>
<ul><li><a href="http://www.miiceic.org.cn/amt2011/jszj_7516.html" title="亚太地区Android技术大会">高焕堂亚太地区Android技术大会领头人</a></li></ul>
<div class="newsgaish">安博中程Android专家顾问。台湾Android论坛领头人，曾被誉为“台湾Android技术教父”;著名的海峡两…</div>
</div>
<div class="newstu"><a href="http://www.miiceic.org.cn/amt2011/jszj_7517.html" title="杨秀峰"><img src="http://www.miiceic.org.cn/uploads/110824/1-110R4112GWX.jpg" width="67" height="77" border=0 alt="杨秀峰"/></a>
<ul><li><a href="http://www.miiceic.org.cn/amt2011/jszj_7517.html" title="安博中程软件工程专家">杨秀峰安博中程软件工程专家</a></li></ul>
<div class="newsgaish">十余年的团队项目开发经验。采用远程合作开发的模式，实现了跨地区的软件开发，历经了几十个软件…</div>

</div>
<div class="newstu"><a href="http://www.miiceic.org.cn/amt2011/jszj_7524.html" title="柯博文"><img src="http://www.miiceic.org.cn/uploads/110824/1-110R4112IM10.jpg" width="67" height="77" border=0 alt="柯博文"/></a>
<ul><li><a href="http://www.miiceic.org.cn/amt2011/jszj_7524.html" title="电玩">柯博文电玩</a></li></ul>
<div class="newsgaish">柯博文先生目前在LoopTek担任美国硅谷公司技术总监一职，专注于Apple iPhone和Google Android手…</div>
</div>
<div class="newstu"><a href="http://www.miiceic.org.cn/amt2011/jszj_7525.html" title="温昱"><img src="http://www.miiceic.org.cn/uploads/110824/1-110R4112KHJ.jpg" width="67" height="77" border=0 alt="温昱"/></a>
<ul><li><a href="http://www.miiceic.org.cn/amt2011/jszj_7525.html" title="安博中程架构方向专家顾问">温昱安博中程架构方向专家顾</a></li></ul>
<div class="newsgaish">温昱，安博中程架构方向专家顾问。ADMEMS方法创始人，首席软件架构师、资深咨询顾问、软件架构专…</div>
</div>
<div class="newstu"><a href="http://www.miiceic.org.cn/amt2011/jszj_7526.html" title="刘俊平"><img src="http://www.miiceic.org.cn/uploads/110824/1-110R411293H18.jpg" width="67" height="77" border=0 alt="刘俊平"/></a>
<ul><li><a href="http://www.miiceic.org.cn/amt2011/jszj_7526.html" title="软考考试用书编委会成员">刘俊平软考考试用书编委会成员</a></li></ul>
<div class="newsgaish">安博中程软考辅导专家。具有丰富系统集成实践经验的资深系统集成项目管理专家，项目管理专业人士…</div>
</div>
<div class="newstu"><a href="http://www.miiceic.org.cn/amt2011/jszj_7527.html" title="贺炘"><img src="http://www.miiceic.org.cn/uploads/110824/1-110R4112S14W.jpg" width="67" height="77" border=0 alt="贺炘"/></a>
<ul><li><a href="http://www.miiceic.org.cn/amt2011/jszj_7527.html" title="北京软件行业协会测试工作委员会副秘书">贺炘北京软件行业协会测试工</a></li></ul>
<div class="newsgaish">安博中程测试方向专家顾问。北京软件行业协会测试工作委员会副秘书长，CSTQB 中国区专家组资深专…</div>
</div>
</div>
</div>
</body>

</html>

效果查看网址：http://www.miiceic.org.cn/amt2011/

分享到：