jquery版悬浮模块demo
2020-02-14 05:35

澳门新葡亰553311b,比如文章管理系统的文章列表页,在每个文章标题旁边一般都有“编辑”和“删除”,假如我们翻到第三页,点击“删除”后,希望还是返回第三页,还不是第一页,这是比较好的,也是常用的。但这里所提的更上升了一级,不仅返回操作前所在的页,还定位到操作前滚动条所在的位置,不会再去拖动滚动条再往下找。

在做在线客服时,代码就是按照该模块命名。现在,我要添加一个返回主页的功能,我觉得再复制一遍之前的代码,那个量有点多,如果我再添加一个功能,那个量会很多……现在我用创建对象字面量的方式来创建(其实我还想做的更简单一点,将代码封装起来,直接用一个方法调用。但是现在还没想到很好的封装方式,就先把现在的这种方式记录下来)。

在文章列表页,加入如下代码:
<script type="text/javascript" language="javascript">
<!--
function SetScroll()
{
    tranForm.windowScrollTop.value = document.body.scrollTop;
}

 

function ScrollWindow(y)
{
    if (y > 0)
    {
        window.scrollTo(0, y);
澳门新葡亰网站所有平台,    }
}

  一、演示图

window.onscroll = SetScroll;
setTimeout("ScrollWindow(<%=y%>)", 200);
//-->
</script>

 

当滚动条滚动时,将其所在的位置记录到tranForm.windowScrollTop中,tranForm是FORM,windowsScrollTop是HIDDEN。当处理页处理完工作时,将windowScrollTop值取出来再传递给该列表页,列表页Request这个值,并将其赋给变量y。ScrollWindow()函数滚动滚动条就实现了想要的效果。

  初始状态:

 

    

 

  滑动状态(超过临界值):

 

 

 

  二、html代码

 

复制代码

<div class="container">

    <!-- start header -->

    <div class="header">

        <div class="header-inner"></div>

    </div>

    <!-- end header -->

 

    <!-- start wrapper -->

    <div class="wrapper">

        <div class="wrapper-inner">

            <!-- 返回按钮 -->

            <div class="returnHome"><a href="/demonstrate.htm"><img src="images/ico_return.png"/></a></div>

 

            <!-- 在线客服 -->

            <div class="online onlineBlue">

                <ul>

                    <li class="item1">

                        <a class="help" href="javascript:void(0);"></a>

                        <div class="on-detail">

                            <h3><i></i>客服电话</h3>

                            <p>更快更贴心的服务热线</p>

                            <p>服务时间:周一至六9:00-18:00</p>

                            <p class="c-orange">000-0000-0000</p>

                        </div>

                    </li>

                    <li class="item2">

                        <a class="help" href="javascript:void(0);"></a>

                        <div class="on-detail">

                            <h3><i></i>QQ在线客服</h3>

                            <p>为您实时解决问题</p>

                            <p>服务时间:周一至六9:00-18:00</p>

                            <a href="javascript:void(0);"><img border="0" src=" alt="客服,欢迎您来咨询" title="客服,欢迎您来咨询"></a>

                        </div>

                    </li>

                    <li class="itemlast">

                        <a class="help" style="display: none;" id="returnTop" title="返回顶部" href="javascript:void(0);"></a>

                    </li>

                </ul>

            </div>

 

            <div class="slide"></div>

 

        </div>

    </div>

    <!-- end wrapper -->

 

</div>

复制代码

  三、js代码

 

复制代码

$(function(){

    if ('undefined' == typeof(document.body.style.maxHeight)) {

        /* 在线客服 */

        var $own;

        $(".online li").hover(function(){

            $own = $(this);

            $own.addClass("ie6hover");

        },function(){

            $own.removeClass("ie6hover");

        })

    }

 

    /* 定位在线客服 */

    var $content = $(".wrapper-inner"), /* 中间主要内容 */

        $online = $(".online"), /* 在线客服 */

        $returnHome = $(".returnHome"), /* 返回首页 */

        $returnTop = $("#returnTop"), /* 返回顶部 */

        contentWidth = $content.width(),

        onlineWidth = $online.width(),

        returnHomeWidth = $returnHome.width(),

        wWidth, /* window的宽度 */

        wHeight, /* window的高度 */

        contentLeft, /* $content距离左边的距离 */

        contentTop, /* $content距离顶部的距离 */

        dScrollTop, /* 滚动条距离顶部位置 */

        crisisHeight, /* 临界高度,就是滚动条滚动到哪个位置就开始执行 */

        onlineConnectHeight = $(".slide").height(), /* online中连接header和在线客服中间的距离 */

        returnHomeConnectHeight = $(".header").height(), /* online中连接header和在线客服中间的距离 */

        targetValue = 960, /* 临界大小,也就是当window的宽度为960时怎么样怎么样,也可以设置1200,看需求 */

        Hang = $.extend({

            defineReturnTop: function(){ /* 返回到顶部 */

                if(dScrollTop == 0){

                    $returnTop.fadeOut(200);

                }else if(dScrollTop > 0){

                    $returnTop.fadeIn();

                }

            },

            defineSize: function(){ /* 初始化 */

                wWidth = $(window).width(),

上一篇:ServerVariables[URL]、Url、RawUrl、Path 区别 下一篇:没有了