仿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. 如何利用phpize在生产环境中为php添加新的扩展php-bcmath

    在日常的开发当中,随着开发的功能越来越复杂.对运行环境的要求也就随着需求的变化需要不断地更新和变化.一个在线的生产系统不可能一开始就满足了所有的运行依赖,因此动态地添加依赖就显得比较必要了.如果你的应 ...

  2. Sass 中的 @ 规则

    一. @import Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件. 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件 ...

  3. 【python】时间性能分析

    参考: http://blog.jobbole.com/47619/ http://chenpeng.info/html/1754 1.计算整个程序运行时间,直接用linux的time命令即可 tim ...

  4. Android 设置旋转朝向

    在AndroidMenifest.xml中activity标签中,添加一个属性 android:screenOrientation="landscape"

  5. Ubuntu进不去,显示error:unknown filesystem (最简单解决方案总结)

    error filesysterm:文件系统错误 grub rescue:是让你拯救grub,就是你的grub坏了,引导程序坏了 要安装盘?要重装?No…… 只要几行命令就ok了 是的,这是我昨天亲自 ...

  6. 三种配置linux环境变量的方法(以java为例)

    1.先确认是否为openjdk:参考 2. 修改/etc/profile文件  如果你的计算机仅仅作为开发使用时推荐使用这种方法,因为所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性 ...

  7. Instruments_Activity Monitor使用入门

    Activity Monitor,官方解释为:(活动监视器)即实时显示CPU.内存和网络的使用情况,记录由虚拟内存大小测量的系统负载.用一句大白话来说,Activity Monitor类似Window ...

  8. Stringbuffer与Stringbuilder源码学习和对比

    >>String/StringBuffer/StringBuilder的异同 (1)相同点观察源码会发现,三个类都是被final修饰的,是不可被继承的.(2)不同点String的对象是不可 ...

  9. 在linux上安装psycopg2出错--Error: pg_config executable not found.

    这个错误可能是因为缺少PGSQL的相关库吧. 网上有很多解决办法,我最终用以下方式解决: yum install postgresql postgresql-devel python-devel

  10. 怎么判定一个mac地址是multicast还是unicast.

    MAC地址是以太网二层使用的一个48bit(6字节十六进制数)的地址,用来标识设备位置.MAC地址分成两部分,前24位是组织唯一标识符(OUI, Organizationally unique ide ...