仿QQ空间右下角工具浮动块

<style type="text/css">
        .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text {
            display: none;
            margin-top: 15px;
            text-align: center;
            text-decoration: none;
        }
        .cy-tp-area>.cy-tp-fixbtn {
            background-color: #fafafa;
            color: #8c8c8c;
        }
        .cy-tp-area>.cy-tp-fixbtn>.cy-tp-icon {
            display: block;
            height: 25px;
            margin: 10px auto ;
            width: 25px;
        }
        .cy-tp-area>.cy-tp-fixbtn:hover>.cy-tp-text {
            display: block;
        }
        .cy-tp-area>.cy-tp-fixbtn:hover>.cy-tp-icon {
            display: none;
        }
        .fix-layout {
            bottom: 20px;
            position: fixed;
            right: 20px;
            z-index: ;
            font-size:12px;
            line-height: 1.334;
        }
        .cy-tp-area {
            width: 45px;
            border: 1px solid #d9d9d9;
        }
        .cy-tp-area>.cy-tp-fixbtn {
            display: block;
            height: 45px;
            overflow: hidden;
            position: relative;
            text-decoration: none;
            border-bottom: 1px solid #d9d9d9;
        }
        .cy-tp-area>.cy-tp-returntop>.cy-tp-icon {
            background-image: url("<%= RootUrl%>/Images/fixed.png");
            background-position: -315px ;
        }
        .cy-tp-area>.cy-tp-returnindex>.cy-tp-icon {
            background-image: url("<%= RootUrl%>/Images/fixed.png");
            background-position:-372px ;
        }

    </style>

<div class="fix-layout">
            <div class="cy-tp-area">
                <a  href="javascript:;" onclick="$cy.Main_BLL.T001.scrolltop()" class="cy-tp-fixbtn cy-tp-returntop" >
                    <i  class="cy-tp-icon" ></i>
                    <span class="cy-tp-text">顶部</span>
                </a>
                <a href="<%= RootUrl %>/Modules/T00X/T001/CP.aspx" class="cy-tp-fixbtn cy-tp-returnindex">
                    <i class="cy-tp-icon" style="display:none" ></i>
                    <span class="cy-tp-text" style="display:block">首页</span>
                </a>
            </div>
    </div>

<script type="text/javascript" language="javascript">
    $j(window).scroll(function () {    //有时是这个选择器 document
        if (($j("body").height() - $j("body").scrollTop()) <= document.documentElement.clientHeight || ($j("body").height() - $j("body,html").scrollTop()) <= document.documentElement.clientHeight) {
            $j(".fix-layout").animate({
                right: $j(window).width() -
            }, );
        }
        else
        {
            $j(".fix-layout").animate({
                right: "20px"
            }, );
        }
})
</script>

Html - 仿QQ空间右下角工具浮动块的更多相关文章

  1. 仿QQ空间和微信朋友圈,高解耦高复用高灵活

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  2. 仿QQ空间动态界面分享

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  3. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  4. Fragment,仿QQ空间

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合 ...

  5. iOS传感器集锦、飞机大战、开发调试工具、强制更新、Swift仿QQ空间头部等源码

    iOS精选源码 飞机大作战 MUPhotoPreview -简单易用的图片浏览器 LLDebugTool是一款针对开发者和测试者的调试工具,它可以帮... 多个UIScrollView.UITable ...

  6. 仿QQ空间根据位置弹出PopupWindow显示更多操作效果

    我们打开QQ空间的时候有个箭头按钮点击之后弹出PopupWindow会根据位置的变化显示在箭头的上方还是下方,比普通的PopupWindow弹在屏幕中间显示好看的多. 先看QQ空间效果图:       ...

  7. android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片,上拉回弹 上拉滚动顶部title 颜色渐变

    首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...

  8. mui开发app之多图压缩与上传(仿qq空间说说发表)

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

  9. ScrollView的阻尼回弹效果实现(仿qq空间)

    玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效 ...

随机推荐

  1. Python多线程(1)——介绍

    Python对多线程提供了很好的支持,Python中多线程相关的模块包括:thread,threading,Queue.可以方便地支持创建线程.互斥锁.信号量.同步等特性. 1. thread:多线程 ...

  2. Java for LeetCode 187 Repeated DNA Sequences

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  3. SpringJDBC的简单应用

    此处写上应用JdbcTemplate的dao操作数据库的一些代码(含基本的增删改查,注:重点是查询出多条语句的写法): package org.sakaiproject.zhaorui.dao.imp ...

  4. 核电站问题(codevs 2618)

    题目描述 Description 一个核电站有N个放核物质的坑,坑排列在一条直线上.如果连续M个坑中放入核物质,则会发生爆炸,于是,在某些坑中可能不放核物质. 任务:对于给定的N和M,求不发生爆炸的放 ...

  5. linux常见问题集锦-2

    http://zhangge.net/1986.html 在此感谢作者分享 1.linux如何挂在windows下的共享目录 Shell 1 mount.cifs //192.168.1.3/serv ...

  6. 学习 BigInteger

    以下是摘抄与其他人的: JAVA之BigInteger 用Java来处理高精度问题,相信对很多ACMer来说都是一件很happy的事,简单易懂.用Java刷了一些题,感觉Java还不错,在处理高精度和 ...

  7. php 面向对象要点汇总

    //类和对象//对象:一切东西都可以看做对象,对象是类的实例化.//类:类是对象的抽象,用来描述众多对象共有的特征. //定义类 class//成员变量 和 成员方法//访问修饰符 public共有的 ...

  8. v4l2

    参考文章:http://lwn.net/Articles/203924/ 查阅手册:https://linuxtv.org/downloads/v4l-dvb-apis/#INPUT-STATUS

  9. 在windows下用toolbox玩会docker

    哈哈哈.

  10. Java Hour 26 Execution

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 26 Hours. Java 虚拟机启动的时候加载一个指定的类然后调用该类中的 ...