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空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效 ...
随机推荐
- Python多线程(1)——介绍
Python对多线程提供了很好的支持,Python中多线程相关的模块包括:thread,threading,Queue.可以方便地支持创建线程.互斥锁.信号量.同步等特性. 1. thread:多线程 ...
- 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 ...
- SpringJDBC的简单应用
此处写上应用JdbcTemplate的dao操作数据库的一些代码(含基本的增删改查,注:重点是查询出多条语句的写法): package org.sakaiproject.zhaorui.dao.imp ...
- 核电站问题(codevs 2618)
题目描述 Description 一个核电站有N个放核物质的坑,坑排列在一条直线上.如果连续M个坑中放入核物质,则会发生爆炸,于是,在某些坑中可能不放核物质. 任务:对于给定的N和M,求不发生爆炸的放 ...
- linux常见问题集锦-2
http://zhangge.net/1986.html 在此感谢作者分享 1.linux如何挂在windows下的共享目录 Shell 1 mount.cifs //192.168.1.3/serv ...
- 学习 BigInteger
以下是摘抄与其他人的: JAVA之BigInteger 用Java来处理高精度问题,相信对很多ACMer来说都是一件很happy的事,简单易懂.用Java刷了一些题,感觉Java还不错,在处理高精度和 ...
- php 面向对象要点汇总
//类和对象//对象:一切东西都可以看做对象,对象是类的实例化.//类:类是对象的抽象,用来描述众多对象共有的特征. //定义类 class//成员变量 和 成员方法//访问修饰符 public共有的 ...
- v4l2
参考文章:http://lwn.net/Articles/203924/ 查阅手册:https://linuxtv.org/downloads/v4l-dvb-apis/#INPUT-STATUS
- 在windows下用toolbox玩会docker
哈哈哈.
- Java Hour 26 Execution
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 26 Hours. Java 虚拟机启动的时候加载一个指定的类然后调用该类中的 ...