类似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 ...
随机推荐
- Asp.net导出Excel乱码的解决方法
通过跟踪Asp.net服务器代码,没有乱码,然而导出Excel到浏览器后,打开时出现乱码. 解决方法是添加编码格式的前缀字节码:Response.BinaryWrite(System.Text.Enc ...
- leetcode 223
题目描述: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is def ...
- openssl 证书操作命令
生成Self Signed证书 # 生成一个key,你的私钥,openssl会提示你输入一个密码,可以输入,也可以不输, # 输入的话,以后每次使用这个key的时候都要输入密码,安全起见,还是应该有一 ...
- 酶设计软件rosetta安装
1.Rosetta uses SCons as a compile assistant. You will likely need to download and install this first ...
- JavaScript俄罗斯方块
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- android-eclipse-phonegap 2..9以下(包含2.9)的项目配置
1.搭建android.eclipse环境,下载phonegap 2.9包 2.新建android项目 3.拷贝phonegap-2.9.0\lib\android\cordova-2.9.0.jar ...
- Entity FrameWork对有外键关联的数据表的添加操作
前天做了一个MVC Entity FrameWork项目,遇到有外键关联的数据编辑问题.当你编辑的时候,按照正常的逻辑,把每个字段的数据都对号入座了,然后点击保存按钮,本以为会顺理成章的编辑数据,但是 ...
- 34、JS/AJAX
1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用 声明:服务端使用Servlet技术 一 ...
- TextGrocery中文文本分类处理
详细使用说明:http://textgrocery.readthedocs.io/zh/latest/index.html TextGrocery是一个基于LibLinear和结巴分词的短文本分类工具 ...
- 提高mysql插入性能
参考地址:http://blog.jobbole.com/29432/ 参数优化: 1. SQL语句是有长度限制,在进行数据合并在同一SQL中务必不能超过SQL长度限制,通过max_allowed_p ...