类似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 ...
随机推荐
- 帝国CMS列表模板页面内容截取
$listtemp = '<div class="c_n_item">';$listtemp .= '<div class="c_n_title&quo ...
- ligerui_ligerTree_005_动态增加“树”节点
动态添加ligerTree节点:效果图: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 <%@ page language= ...
- css3 flex
<!DOCTYPE html> <html> <head> <style> .first-face { display: flex; justify-c ...
- android opengl
引用:http://weimingtom.iteye.com/blog/1616972 二维坐标系变换为原点在左上角(测试用) * GLES * JOGL * LWJGL * libgdx(使用g2d ...
- cnblogs 主题 summerGarden redesign
Intro cnblogs 的 summerGarden 主题是一个宽屏版的,而且设计虽然很Qzone风格,不过我个人喜欢「简单,扁平」的设计风格,所以就修改了一下样式. before after r ...
- TCP/IP学习-链路层
链路层: 路径MTU: 网络层: ifconfig netstat IP首部 网络字节序:大端字节序
- Centos7下安装配置Redsocks
Redsocks是一个开源的网络程序,代码依赖开源的libevent网络库.Redsocks允许你将所有TCP连接重定向到SOCKS或HTTPS代理,比如Shadowsocks(Centos7下安装配 ...
- Sql Server2005新特性及性能
举几个例子来简单说明 这些例子我引用了Northwind库. 1. TOP 表达式 SQL Server 2000的TOP是个固定值,是不是觉得不爽,现在改进了. --前n名的订单declare @n ...
- Java菜鸟培训第二天
HTML——超文本标记语言…………… 静态网页:不需要访问数据库. 动态网页:在网上发布的好的,我们能通过网络浏览到的都是动态的,需要访问数据库. <html>--开始标签 <hea ...
- Unity3D UGUI学习系列索引(暂未完成)
U3D UGUI学习1 - 层级环境 U3D UGUI学习2 - Canvas U3D UGUI学习3 - RectTransform U3D UGUI学习4 - Text U3D UGUI学习5 - ...