类似qq的浮动窗口 ,随着滚轴的滚动,始终处于屏幕的中间(能看到运动的过程)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
height:1900px;
}
.cc{
position:absolute;
width:80px;
height:120px;/*高度值可设置,也可通过内容自动填充*/
background:green;
right:0;
top:50%;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
function roll(){
var $win=$(window).height(),$scroll=$(document).scrollTop(),$cc=$(".cc"),$height=$cc.height();
$cc.animate({"top":$win/2+$scroll-$height/2},100)
}
roll();
$(window).on("scroll",function(){
roll();
})
})
</script>
</head>
<body>
<div class="cc"></div>
</body> </html>
类似qq的浮动窗口 ,随着滚轴的滚动,始终处于屏幕的中间(能看到运动的过程)的更多相关文章
- 随滚动条滚动,始终处于屏幕的中间类似qq的浮动窗口 (能看到运动的过程)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- QQ右下角浮动窗口
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- jq判断鼠标滚轴向上滚动还是向下滚动
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...
- Jquery 类似新浪微博,鼠标移到头像,用浮动窗口显示用户信息,已做成一个jquery插件
请注意!!!!! 该插件demo PHP 的 demo下载 C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...
- 用C#代码实现类似QQ窗体的“上、左、右”停靠功能
大家都知道QQ有一个自动停靠功能,即“上.左.右”,当你把窗体拖到屏幕边缘,然后移开鼠标它会自动缩放,然后只显示一小小点出来,我们仔细观察会发现其实它只露3像素左右的边缘,当你鼠标移上去它又会伸出来, ...
- [C# 网络编程系列]专题九:实现类似QQ的即时通信程序
转自:http://www.cnblogs.com/zhili/archive/2012/09/23/2666987.html 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例 ...
- WinForm实现类似QQ停靠,显示隐藏过程添加特效效果
原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...
- Delphi 悬浮窗口、浮动窗口的实现
源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=80 ...
- 详解C# 网络编程系列:实现类似QQ的即时通信程序
https://www.jb51.net/article/101289.htm 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例来让大家更好的理解它们的工作原理以及怎样.Net ...
随机推荐
- LeetCode Number of 1 Bits
原题链接在这里:https://leetcode.com/problems/number-of-1-bits/ 题目: Write a function that takes an unsigned ...
- iOS10权限声明国际化
iOS 10要求用户声明隐私访问用途,而且不能为空,否则将会被拒.被拒邮件如下: 解决办法是在Info.plist中添加Privacy - Camera Usage Description和Priva ...
- RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考
RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考 RDIFramwork.NET框架对数据库的事务做了很好的控制,对多表或多条语句需要在同一事务执行提供了很好的支持,同时支持任 ...
- rac one node在线relocation
1.查看数据库运行状态 $ srvctl status database -d rone Instance rone_2 is running on node rone2 Online relocat ...
- NET基础(2):类型转换
CLR最重要的特性之一就是类型安全的.在运行时,CLR总是知道对象的类型是什么.调用GetType()方法可以知道对象的确切类型,由于它是非虚方法,所以一个类型不可能伪装成另一种类型.每种编程语言都规 ...
- 20145320《Java程序设计》第4周学习总结
20145320<Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 继承 继承作为面向对象的第二大特征,避免多个类间重复定义共同行为.即当多个类中存在相同属性和行为时 ...
- discuz 二次开发
discuz 框架也算是比较流行的社区论坛框架,discuz 的基础架构采用世界上最流行的 web 编程组合 PHP + MySQL 实现,是一个经过完善设计,适用于各种服务器环境的高效论坛系统解决方 ...
- ios检测是否有网络
/** AFNetworkReachabilityStatusUnknown = -1, // 未知 AFNetworkReachabilityStatusNotReachable ...
- jqgrid定义多选操作
先定义: var SelectRowIndx; 然后加入以下属性: multiselect: true, onSelectRow: function () { SelectRowIndx = G ...
- JVM常见配置汇总
堆设置 -Xms:初始堆大小 -Xmx:最大堆大小 -XX:NewSize=n:设置年轻代大小 -XX:NewRatio=n:设置年轻代和年老代的比值.如:为3,表示年轻代与年老代比值为1:3,年轻代 ...