`
pcajax
  • 浏览: 2159079 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 向上滚动【四】个人认为好一些，哈

jQueryASPJavaScript教育工作 
阅读更多

<!--示例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() { <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
        $("#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);
        }
        );
    }

});

分享到：
| jqery 实现滚动图片【三】
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 文字向上滚动

    【标题】"jQuery 文字向上滚动"是一种网页动态效果，常用于新闻更新、公告显示或者滚动广告等场景，使得信息能够在有限的空间内持续展示，提高用户的关注度。这种效果通常是通过JavaScript库，特别是jQuery来实现的...

    jQuery表格信息自动向上滚动代码.zip

    为了解决这个问题，开发者们通常会利用JavaScript库，如jQuery，来实现更高级的功能，例如表格信息的自动向上滚动。本文将深入探讨如何利用jQuery实现这一效果，以及相关知识点。 首先，jQuery是一个轻量级的...

    jquery向上循环滚动特效.zip

    【jQuery向上循环滚动特效】是一种常见的网页动态效果，它利用JavaScript库jQuery实现文本或图片在页面上持续向上滚动，为用户展示信息。这种特效在新闻网站、公告栏或者广告展示等场景中尤为常见，能够有效地吸引...

    jquery垂直向上逐条滚动新闻列表

    在这个项目中，关键在于创建一个新闻列表的容器，然后利用jQuery的定时器（如`setInterval()`）每隔一定时间将第一条新闻移动到列表的底部，模拟出向上滚动的效果。这个过程可能包括以下步骤： 1. **HTML结构**：...

    jquery向上无缝滚动

    **jQuery向上无缝滚动** 在网页设计中，动态效果常常能提升用户体验，其中“向上无缝滚动”是一种常见的文本或图片滚动展示方式。这个效果使得内容能够持续不断地从底部向上滚动，给用户带来连贯且吸引人的视觉体验...

    jQuery向上间歇滚动代码

    **jQuery向上间歇滚动代码详解** 在Web开发中，我们经常需要实现一些动态效果来提升用户体验，例如页面元素的向上间歇滚动（也称为“返回顶部”或“回到顶部”功能）。这个功能允许用户轻松地将浏览焦点移回页面...

    jQuery排名文字无缝循环向上滚动代码

    **jQuery排名文字无缝循环向上滚动代码详解** 在网页设计中，动态效果往往能吸引用户的注意力，提高用户体验。jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现各种动态效果，其中包括文字无缝循环滚动。...

    jquery自下而上循环滚动table

    jquery自下而上循环滚动table

    jQuery表格信息自动向上滚动代码

    本项目“jQuery表格信息自动向上滚动代码”聚焦于利用jQuery实现一个功能丰富的表格展示效果，尤其适合在数据量较大时提供更好的用户体验。 首先，`index.html`是网页的主文件，它包含了页面的基本结构以及对其他...

    jQuery带按钮向上滚动向下滚动代码.zip

    jQuery带按钮向上滚动向下滚动代码是基于流行的JavaScript库jQuery实现的一种网页滚动效果。这个功能通常用于网站页面，尤其是内容较多的页面，以便用户能够轻松地浏览页面内容而无需手动滚动鼠标或触摸屏幕。这种...

    jquery文字不断向上滚动代码（兼容火狐）

    "jQuery文字不断向上滚动代码（兼容火狐）"是一个典型的JavaScript库应用案例，它利用jQuery库实现文字信息在页面上持续不断地向上滚动，同时确保在Firefox浏览器上的兼容性。 jQuery是一个轻量级、高性能的...

    jQuery滚动公告

    jQuery animate封装向上滚动插件，使用定时器setInterval调用封装的插件实现滚动公告

    jQuery实现列表自动滚动循环滚动展示新闻

    3. jQuery实现滚动功能：首先在jQuery的$(function() {})内定义局部变量$this来引用新闻滚动容器的jQuery对象。然后通过$.hover()方法为容器添加鼠标悬停事件，当鼠标悬停时调用 clearInterval() 来清除滚动定时器，...

    用jQuery的Animate方法实现公告轮播效果，文字停留几秒后向上滚动

    用jQuery的Animate方法实现公告轮播效果，文字停留几秒后向上滚动，类似招行app的那个公告效果，可自定义停留时间，样式自己写css调节，放在mui框架可以看到一个可爱的小喇叭。/笑脸/

    jquery文本向上滚动代码带上下翻转按钮的jQuery插件

    在本文中，我们将深入探讨jQuery文本向上滚动代码以及如何结合上下翻转按钮创建一个功能完善的jQuery插件。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得开发者能够...

    文字行向上循环滚动jquery插件，兼容主流浏览器

    三、实现向上滚动的jQuery插件 创建一个jQuery插件的基本结构如下： ```javascript (function ($) { $.fn.myScrollPlugin = function (options) { // 默认配置 var settings = $.extend({ speed: 500, // 动画...

    jQuery文字逐行向上滚动代码.zip

    jQuery文字逐行向上滚动代码是一种常见的网页动态效果，它能够使文本内容以逐行上升的方式展示，常用于新闻更新、公告栏或者滚动广告等场景，为网页增添动态视觉效果，吸引用户注意力。在这个"jQuery文字逐行向上...

    jquery上下滚动插件

    **jQuery上下滚动插件**是一种常用的前端开发工具，主要用于实现网页元素（如`&lt;li&gt;`列表项）的平滑上下滚动效果。这种效果在展示新闻、公告或产品列表时非常常见，可以为用户带来动态浏览体验，提升网站的互动性和...

    jQuery文字由下向上滚动特效.zip

    本主题涉及的是使用jQuery实现的一种特定的文字滚动特效，即“文字由下向上滚动”，这是一种常见的网页动态效果，常用于新闻更新、公告展示等场景。 在网页设计中，动态效果能够吸引用户的注意力并提升用户体验。...

Magicbox
Global site tag (gtag.js) - Google Analytics