jquery 滚动特效 向上滚动
2011-09-06 10:31
288 查看
效果查看网址：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>&
lt;/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/
源代码如下：
<!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>&
lt;/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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery特效：无缝向上循环滚动列表
- jquery特效：无缝向上循环滚动列表
- 实现不间断向上滚动文字的特效
- JavaScript实现垂直向上无缝滚动特效
- jquery版楼层滚动特效
- jquery图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效
- 图片左右间隔滚动Jquery特效
- 页面头部带loading进度指示的jQuery滚动页面特效
- jquery 滚动条向下滚动或者向上滚动到div位置处，执行操作
- Jquery之新闻向上、下滚动
- 完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
- jquery 实现无间图片文字向上滚动效果
- jquery实现的向上无缝循环滚动的新闻效果
- jquery单行文字向上滚动效果示例
- jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
- jquery单行文字向上滚动效果示例
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
- Jquery结合div+css实现文字间断停顿向上滚动效果
- jquery单行文字向上滚动效果的实现代码