jquery 向上滚动【四】个人认为好一些，哈
2010-03-24 09:41
330 查看
<!--示例html-->
<html>
<head>
<title>滚动</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="jquery.scroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#gun").scrollVertical(10);//竖滚
//$("#gun").scrollHorizontal(10);//横滚
}
);
</script>
</head>
<body>
<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF" height="178" style="font-size:13px;" class="common">
<table id="gun" style="line-height:22px;" width="400" cellpadding="0" cellspacing="0">
<tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr><tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=126" title="“超轻材料与表面技术”教育部重点实验室获准建设" target="_blank">“超轻材料与表面技术”教育部重…</a></td><td align="right" class="" width="40"><font color="red">03-02</font></td></tr><tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=125" title="超轻材料与表面技术教育部重点实验室首届学术委员会会议在我校召开" target="_blank">超轻材料与表面技术教育部重点实…</a></td><td align="right" class="" width="40"><font color="red">02-26</font></td></tr><tr></tr></table>
</td>
</tr>
</table>
</body>
</html>
//jquery.scroll.js
/**
* jQuery.scroll - make the object scrolling
* Written by Iron
* Date: 2009/03/08
*email hxf829@163.com
* @author Iron
* @version 1.0
*
**/
//垂直方向滚动
$.fn.extend({
scrollVertical: function(speed)
{
if (arguments.length < 1)//如果没有指定速度，按默认的速度进行滚动
{
var speed = 50;
}
function vertial(This)
{
//alert("fask");
//alert($(This.children().get(1)).outerHeight());
if ($(This.children().get(1)).outerHeight() - This.scrollTop() <= 0)//如果复制得到的元素显示的高度比整个div隐掉的高度小或相等，则heng1已完全隐藏，这时需要复位动画前的位置(即heng.scrollTop置零)，重新开始动画
{
This.scrollTop(0);
}
else//如果复制得到的元素显示的高度比整个div隐掉的高度大，heng1还没有完全隐藏，heng.scrollTop继续增加
{
This.scrollTop(This.scrollTop() + 1);
}
}
$(this).wrap("<div id='scrollvarea' style='OVERFLOW: hidden; COLOR: #ffffff;'></div>");
$("#scrollvarea").height($("#scrollvarea").children().get(0).scrollHeight);
//alert($("#scrollvarea").children().get(0).scrollHeight);
$(this).clone().insertAfter(this);
var scrollVerticalhandle = setInterval(function() { vertial($("#scrollvarea")); }, speed);
$("#scrollvarea").mouseover(function() { clearInterval(scrollVerticalhandle); });
$("#scrollvarea").mouseout(function() { scrollVerticalhandle = setInterval(function() { vertial($("#scrollvarea")); }, speed); });
}
});
//水平方向滚动
$.fn.extend({
scrollHorizontal: function(speed) {
if (arguments.length < 1)//如果没有指定速度，按默认的速度进行滚动
{
var speed = 50;
}
function horizontal(This) {
//alert("fask");
//alert($(This.children().get(1)).outerHeight());
if ($($("#content").children().get(0)).outerWidth() - This.scrollLeft() <= 0)//如果复制得到的元素显示的宽度比整个#scrollharea隐掉的宽度小或相等，则原来的块已完全隐藏，这时需要复位动画前的位置(即#scrollharea的scrollTop置零)，重新开始动画
{
This.scrollLeft(0);
//alert("afsd");
}
else//如果复制得到的元素显示的宽度比整个div隐掉的宽度大，原来的块还没有完全隐藏，#scrollharea的scroll继续增加
{
This.scrollLeft(This.scrollLeft() + 1);
}
}
//先用#scrollharea包裹所要滚动的对象
$(this).wrap("<div id='scrollharea' style='OVERFLOW: hidden; COLOR: #ffffff;'></div>");
$("#scrollharea").height($("#scrollharea").children().get(0).scrollHeight);
$("#scrollharea").width($("#scrollharea").children().get(0).scrollWidth);
//复制滚动的对象
$(this).clone().insertAfter(this);
//将要滚动的对象和复制得到的对象用一个#content块包裹(这样才能设其宽度，使jquery的scrollTop()有效)
$("#scrollharea").children().wrapAll("<div id='content' style='OVERFLOW: hidden;text-align:left;'></div>");
$("#content").height($("#content").children().get(0).scrollHeight);
$("#content").width($("#content").children().get(0).scrollWidth*2);//宽度为每个块的二倍
//将对象排列在一行
$("#content").children().css("float", "left");
//控制动画过程
var scrollHorizontalhandle = setInterval(function() { horizontal($("#scrollharea")); }, speed);
$("#scrollharea").mouseover(function() {
clearInterval(scrollHorizontalhandle);
}
);
$("#scrollharea").mouseout(function() {
scrollHorizontalhandle = setInterval(function() { horizontal($("#scrollharea")); }, speed);
}
);
}
});
<html>
<head>
<title>滚动</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="jquery.scroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#gun").scrollVertical(10);//竖滚
//$("#gun").scrollHorizontal(10);//横滚
}
);
</script>
</head>
<body>
<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF" height="178" style="font-size:13px;" class="common">
<table id="gun" style="line-height:22px;" width="400" cellpadding="0" cellspacing="0">
<tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr> <tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=186" title="关于2009年度开放课题申请工作的通知" target="_blank">关于2009年度开放课题申请工作的…</a></td><td align="right" class="" width="40"><font color="red">03-03</font></td></tr><tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=126" title="“超轻材料与表面技术”教育部重点实验室获准建设" target="_blank">“超轻材料与表面技术”教育部重…</a></td><td align="right" class="" width="40"><font color="red">03-02</font></td></tr><tr><td width="10" valign="top" class="">·</td>
<td class=""><a class="" href="/smst/ShowArticle.asp?ArticleID=125" title="超轻材料与表面技术教育部重点实验室首届学术委员会会议在我校召开" target="_blank">超轻材料与表面技术教育部重点实…</a></td><td align="right" class="" width="40"><font color="red">02-26</font></td></tr><tr></tr></table>
</td>
</tr>
</table>
</body>
</html>
//jquery.scroll.js
/**
* jQuery.scroll - make the object scrolling
* Written by Iron
* Date: 2009/03/08
*email hxf829@163.com
* @author Iron
* @version 1.0
*
**/
//垂直方向滚动
$.fn.extend({
scrollVertical: function(speed)
{
if (arguments.length < 1)//如果没有指定速度，按默认的速度进行滚动
{
var speed = 50;
}
function vertial(This)
{
//alert("fask");
//alert($(This.children().get(1)).outerHeight());
if ($(This.children().get(1)).outerHeight() - This.scrollTop() <= 0)//如果复制得到的元素显示的高度比整个div隐掉的高度小或相等，则heng1已完全隐藏，这时需要复位动画前的位置(即heng.scrollTop置零)，重新开始动画
{
This.scrollTop(0);
}
else//如果复制得到的元素显示的高度比整个div隐掉的高度大，heng1还没有完全隐藏，heng.scrollTop继续增加
{
This.scrollTop(This.scrollTop() + 1);
}
}
$(this).wrap("<div id='scrollvarea' style='OVERFLOW: hidden; COLOR: #ffffff;'></div>");
$("#scrollvarea").height($("#scrollvarea").children().get(0).scrollHeight);
//alert($("#scrollvarea").children().get(0).scrollHeight);
$(this).clone().insertAfter(this);
var scrollVerticalhandle = setInterval(function() { vertial($("#scrollvarea")); }, speed);
$("#scrollvarea").mouseover(function() { clearInterval(scrollVerticalhandle); });
$("#scrollvarea").mouseout(function() { scrollVerticalhandle = setInterval(function() { vertial($("#scrollvarea")); }, speed); });
}
});
//水平方向滚动
$.fn.extend({
scrollHorizontal: function(speed) {
if (arguments.length < 1)//如果没有指定速度，按默认的速度进行滚动
{
var speed = 50;
}
function horizontal(This) {
//alert("fask");
//alert($(This.children().get(1)).outerHeight());
if ($($("#content").children().get(0)).outerWidth() - This.scrollLeft() <= 0)//如果复制得到的元素显示的宽度比整个#scrollharea隐掉的宽度小或相等，则原来的块已完全隐藏，这时需要复位动画前的位置(即#scrollharea的scrollTop置零)，重新开始动画
{
This.scrollLeft(0);
//alert("afsd");
}
else//如果复制得到的元素显示的宽度比整个div隐掉的宽度大，原来的块还没有完全隐藏，#scrollharea的scroll继续增加
{
This.scrollLeft(This.scrollLeft() + 1);
}
}
//先用#scrollharea包裹所要滚动的对象
$(this).wrap("<div id='scrollharea' style='OVERFLOW: hidden; COLOR: #ffffff;'></div>");
$("#scrollharea").height($("#scrollharea").children().get(0).scrollHeight);
$("#scrollharea").width($("#scrollharea").children().get(0).scrollWidth);
//复制滚动的对象
$(this).clone().insertAfter(this);
//将要滚动的对象和复制得到的对象用一个#content块包裹(这样才能设其宽度，使jquery的scrollTop()有效)
$("#scrollharea").children().wrapAll("<div id='content' style='OVERFLOW: hidden;text-align:left;'></div>");
$("#content").height($("#content").children().get(0).scrollHeight);
$("#content").width($("#content").children().get(0).scrollWidth*2);//宽度为每个块的二倍
//将对象排列在一行
$("#content").children().css("float", "left");
//控制动画过程
var scrollHorizontalhandle = setInterval(function() { horizontal($("#scrollharea")); }, speed);
$("#scrollharea").mouseover(function() {
clearInterval(scrollHorizontalhandle);
}
);
$("#scrollharea").mouseout(function() {
scrollHorizontalhandle = setInterval(function() { horizontal($("#scrollharea")); }, speed);
}
);
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 向上滚动屏幕 及 在高版本的 jQuery 浏览器判断
- 可暂停的垂直向上滚动jQuery代码
- JQuery文字列表向上滚动的代码
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery实现的向上/向下无缝滚动简洁代码
- jquery插件之文字间歇自动向上滚动
- jquery 实现无间图片文字向上滚动效果
- listview实现自动向上滚动，快速滚动，和滚动条的一些设置
- jquery单行文字向上滚动效果示例
- 向上滚动的文字跑马灯，基于JQUERY，淡入淡出
- 简单的jQuery无缝向上滚动效果
- [jQuery] 最简单的字幕自动向上滚动
- jquery实现的向上无缝循环滚动的新闻效果
- JQuery左右按钮控制图片 文字向上滚动自定义插件
- jquery特效：无缝向上循环滚动列表
- jquery插件之文字间歇自动向上滚动效果代码
- jquery单行文字向上滚动效果的实现代码
- jquery实现文字向上滚动
- jQuery向上循环滚动（仿新浪微博未登录首页滚动微博显示）
- jquery获得location的传值 和一些滚动效果243dede