Html - 仿QQ空间右下角工具浮动块
仿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空间右下角工具浮动块的更多相关文章
- 仿QQ空间和微信朋友圈,高解耦高复用高灵活
先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...
- 仿QQ空间动态界面分享
先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- Fragment,仿QQ空间
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451 在今天的这篇文章当中,我依然会以实战加理论结合 ...
- iOS传感器集锦、飞机大战、开发调试工具、强制更新、Swift仿QQ空间头部等源码
iOS精选源码 飞机大作战 MUPhotoPreview -简单易用的图片浏览器 LLDebugTool是一款针对开发者和测试者的调试工具,它可以帮... 多个UIScrollView.UITable ...
- 仿QQ空间根据位置弹出PopupWindow显示更多操作效果
我们打开QQ空间的时候有个箭头按钮点击之后弹出PopupWindow会根据位置的变化显示在箭头的上方还是下方,比普通的PopupWindow弹在屏幕中间显示好看的多. 先看QQ空间效果图: ...
- android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片,上拉回弹 上拉滚动顶部title 颜色渐变
首先要知道 自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...
- mui开发app之多图压缩与上传(仿qq空间说说发表)
欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
- ScrollView的阻尼回弹效果实现(仿qq空间)
玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效 ...
随机推荐
- 如何利用phpize在生产环境中为php添加新的扩展php-bcmath
在日常的开发当中,随着开发的功能越来越复杂.对运行环境的要求也就随着需求的变化需要不断地更新和变化.一个在线的生产系统不可能一开始就满足了所有的运行依赖,因此动态地添加依赖就显得比较必要了.如果你的应 ...
- Sass 中的 @ 规则
一. @import Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件. 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件 ...
- 【python】时间性能分析
参考: http://blog.jobbole.com/47619/ http://chenpeng.info/html/1754 1.计算整个程序运行时间,直接用linux的time命令即可 tim ...
- Android 设置旋转朝向
在AndroidMenifest.xml中activity标签中,添加一个属性 android:screenOrientation="landscape"
- Ubuntu进不去,显示error:unknown filesystem (最简单解决方案总结)
error filesysterm:文件系统错误 grub rescue:是让你拯救grub,就是你的grub坏了,引导程序坏了 要安装盘?要重装?No…… 只要几行命令就ok了 是的,这是我昨天亲自 ...
- 三种配置linux环境变量的方法(以java为例)
1.先确认是否为openjdk:参考 2. 修改/etc/profile文件 如果你的计算机仅仅作为开发使用时推荐使用这种方法,因为所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性 ...
- Instruments_Activity Monitor使用入门
Activity Monitor,官方解释为:(活动监视器)即实时显示CPU.内存和网络的使用情况,记录由虚拟内存大小测量的系统负载.用一句大白话来说,Activity Monitor类似Window ...
- Stringbuffer与Stringbuilder源码学习和对比
>>String/StringBuffer/StringBuilder的异同 (1)相同点观察源码会发现,三个类都是被final修饰的,是不可被继承的.(2)不同点String的对象是不可 ...
- 在linux上安装psycopg2出错--Error: pg_config executable not found.
这个错误可能是因为缺少PGSQL的相关库吧. 网上有很多解决办法,我最终用以下方式解决: yum install postgresql postgresql-devel python-devel
- 怎么判定一个mac地址是multicast还是unicast.
MAC地址是以太网二层使用的一个48bit(6字节十六进制数)的地址,用来标识设备位置.MAC地址分成两部分,前24位是组织唯一标识符(OUI, Organizationally unique ide ...