类似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 ...
随机推荐
- SQL2008 SQL2012 远程连接配置方法
第一步: SQL2008(或2012): 打开SQL Server Management Studio-->在左边[对象资源管理器]中选择第一项(主数据库引擎)-->右键-->方面- ...
- JSP中的指令（Directive）
- tesseract ocr文字识别Android实例程序和训练工具全部源代码
tesseract ocr是一个开源的文字识别引擎,Android系统中也可以使用.可以识别50多种语言,通过自己训练识别库的方式,可以大大提高识别的准确率. 为了节省大家的学习时间,现将自己近期的学 ...
- Pyhton 学习总结 20 ：执行系统命令
在Python中执行系统命令有os.system().os.popen().commands.getstatusoutput().subprocess.Popen等 1.os.system() ...
- AJAX-----15HTML5实现进度条上传
目的当然还是为了提高用户的体验度嘛,, 废话不多说走码.... <!DOCTYPE html> <html lang="en"> <head> ...
- yield return的作用
测试1: using UnityEngine; using System.Collections; public class test1 : MonoBehaviour { // Use this f ...
- Linux 多线程编程 实例 2
编写一个程序,开启3个线程,这3个线程的ID分别为A.B.C,每个线程将自己的ID在屏幕上打印10遍,要求输出结果必须按ABC的顺序显示:如:ABCABC….依次递推. 使用条件变量来实现: #inc ...
- linux下rpm包安装、配置和卸载mysql
WIN10下虚拟机:VMware workstation 12 PRO 安装 # 1.查看系统版本 [root@vm-xiluhua][/home/xiluhua]$ cat /etc/redhat- ...
- linux查看磁盘系统df，du
可以用df命令轻松地查看所有已挂载磁盘的使用情况 df df -h 把输出的文件单位换成文件可读的单位 du 命令显示特定目录的使用情况 du -c 显示总用量 du -h 人类可读性 du -s 每 ...
- Tsung安装与使用
Tsung安装与使用 Tsung安装与使用的详细说明,包括测试场景的脚本配置说明 Ray 2013/11/11 目录 安装tsung Tsung运行环境安装... Tsung安装... 使用Tsu ...