腾讯QQ空间穿越时光轴3D特效
<DOCTYPE html>
<html>
<head>
<title>腾讯QQ空间穿越光轴3D特效</title>
<style>
*{margin:0;padding:0;}
body{
background-image:url("images/bg.png") fixed;//拖动鼠标图片不会上下移动
height:2000px;
}
.con{
width:1000px;
/*heigth:500px;*/不用加高度，用内容撑起来
background:#ffcc99;
margin:0 auto;
}
.con dl{
width:120px;
heigth:150px;
background:#fff;
margin-left:240px;
}
.con dl dt{
width:100px;
height:100px;
background:green;
margin:0 auto;//居中
}
.con dl dd{
font-size:14px;
color:#666;
font-family:"微软雅黑";
text-align:center;//文本对齐方式
line-height:30px;//离上面有距离,放在行高30的中间
}
.con .txtlist{
width:1000px;
/*height:500px;*/
margin-left:300px;
border-left:2px solid #0099ff;
padding-top:20px;
}
.con .txtlist ul li{
width:590px;
height:400px;
background:rgba(255,255,255,0.5);//背景透明
margin-bottom:25px;
list-style:none;
margin-left:10px;
box-shadow:2px 2px 5px #666;//第三个是虚化度，越来越模糊
border-radius:5px;
position:relative;
-webkit-animation:sc 2s;/*去定义一个动画,webkit兼容google,取个名字sc*/
display:none;
}
.con .txtlist ul li .time{
width:90px;
height:35px;
background:#181818;
position:absolute;
top:120px;
left:-130px;
line-height:35px;
text-align:center;
}
.con .txtlist ul li .ioc{
position:absolute;
left:-43px
top:130px;
}
.con .txtlist ul li .doc{
width:6px;
height:6px;
background:#99ff33;
position:absolute;
left:-16px;
top:132px;
}
@-webkit-keyframes sc{
from/0%{-webkit-transform:rotate(220deg) scale(0.2)}
to/100%{-webkit-transform:rotate(0deg) scale(1)}
}
</style>
</head>
<body>
<div class="con">
<dl>
<dt src="data:images/my.jpg" width="100" height="100" alt="千帆" /></dt>
<dd>经典课程集</dd>//注释，可以有多个
</dl>
<div id="txtlist">
<ul>
<li>
<div class="time">8月25号</div>
<img class="ioc" src="data:image/r.png" width="16" heigth="16" alt="箭头" />
<span class="dic"></span>
</li>
<li>
<div class="time">8月23号</div>
<img class="ioc" src="data:image/r.png" width="16" heigth="16" alt="箭头" />
<span class="dic"></span>
</li>
<li>
<div class="time">8月23号</div>
<img class="ioc" src="data:image/r.png" width="16" heigth="16" alt="箭头" />
<span class="dic"></span>
</li>
</ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
//测试jq是否引入成功
alert($);
//js如何获取对象 $代理jq函数 $("对象元素")
$(".con .txtlist ul li:lt(3)").show();//找到序列号小于3的li元素
//浏览器窗口滚动事件
$(window).scroll(function(){
//遍历每一个li
$(".con .txtlist ul li").each(function(){
var _index=$(this).index()+3;//获取当前遍历对象的序列号
var Top=$(window).scrollTop();//浏览器 滚动条高度
var _height=$(this).offset().top();//得到当前li到顶部的距离
//判断滚动条高度和li到顶部的距离
if(Top<_height){
$(".con .txtlist ul li:lt("+_index+")").show();
$(".con .txtlist ul li:lt("+_index+")").hide();
return false;//跳出遍历
}
});
})
</script>
</body>
</html>
布局用class,js用id,旋转
腾讯QQ空间穿越时光轴3D特效的更多相关文章
- jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
- 腾讯QQ空间超分辨率技术TSR
腾讯QQ空间超分辨率技术TSR:为用户节省3/4流量,处理效果和速度超谷歌RAISR 雷锋网AI科技评论: 随着移动端屏幕分辨率越来越高,甚至像iPhone更有所谓的“视网膜屏”,人们对高清图片的诉求 ...
- 腾讯QQ空间应用宽屏接入
QQ 空间接入宽屏. (与腾讯微博分属两个不同平台) 相关文档: 流动应用画布说明 前端页面规范 多区多服场景说明 应用宽屏根据游戏分为两种. 1: 普通游戏,但想要实现宽屏显示. 2: 多区多服 ...
- Android QQ空间浏览图片动画特效的实现(※)
1 http://blog.csdn.net/yangblocker/article/details/12680247 2 photoview 3 nineoldandroid
- 然并卵，腾讯QQ认证空间又再次关闭申请
昨天发布的腾讯QQ认证空间又开放申请的消息,此消息一放出,大家都去关注认证的事情,而马浩周发现在4月27日下午4-5点,腾讯QQ空间认证又再次关闭页面开放申请的通知,变成了以前停止审核的通知了. 可能 ...
- TOP100summit：【分享实录-QQ空间】10亿级直播背后的技术优化
本篇文章内容来自2016年TOP100summit QQ空间客户端研发总监王辉的案例分享.编辑:Cynthia 王辉:腾讯SNG社交平台部研发总监.腾讯QQ空间移动客户端技术负责人高级工程师.09年起 ...
- 腾讯QQ认证空间4月27日已全面开放申请，欲进军自媒体
今天看到卢松松的博客上爆出,腾讯QQ认证空间4月27日已全面开放申请的消息,这一消息出来, 马浩周根据提示方法进行申请,下面先说说腾讯QQ认证空间的申请方法: QQ认证空间开放申请公告地址:http: ...
- 【腾讯bugly干货】QQ空间直播秒开优化实践
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址为:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1204&am ...
- 分享到QQ空间、新浪微博、腾讯微博的代码
今天公司原来的分享代码,在IE下有问题.网上找了下网上的分享代码. 给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href=&quo ...
随机推荐
- notepad++ TextFX替代
notepad++目前的版本已没有了TextFX插件,插件的原作者在2008年的时候已停止维护.目前官方的意思是用以下插件替代,见 http://docs.notepad-plus-plus.org/ ...
- 1018: Give me the answer
1018: Give me the answer 时间限制: 1 Sec 内存限制: 32 MB提交: 55 解决: 15[提交][状态][讨论版][命题人:外部导入] 题目描述 Farmer J ...
- Spring boot 集成Spring Security
依赖jar <dependency> <groupId>org.springframework.cloud</groupId> <artifactId> ...
- 关于requireJS的同步加载和异步加载
这篇随笔主要记录require('name')和require(['name1','name2'])在同步和异步加载使用的区别 1.require('name')同步加载模块的形式 define(fu ...
- JavaEE权限管理系统的搭建(二)--------聚合工程项目的创建和依赖关系
本项目是一个聚合工程,所以要先搭建一个聚合工程的框架 搭建完成的项目结构图如下: 首先创建父项目:pom类型 子模块:web层的搭建,war类型 把这个两个目录标记为对应的类型 其他子模块:和serv ...
- Spring初始化Bean或销毁Bean前执行操作的方式
如果想在Spring初始化后,或者销毁前做某些操作,常用的设定方式有三种: 第一种:通过 在xml中定义init-method 和 destory-method方法 推荐使用,缺陷是只能在XML中使用 ...
- Oracle字符编码与汉字存储长度的处理
执行如下语句,查看汉字在数据库中所占的字节: select vsize('汉') from dual; 一般情况下,得到的结果大部分为值:2 或 3 一般linux下安装oracle数据库,默认字符编 ...
- Login用户登录（Python实现）
username_fault = "isuperSun" #程序存储用户名和密码 password_fault = " counts = 0 while counts&l ...
- c++谭浩强教材教学练习例题1.2 求两数之和 为什么sum=a+b;sum的值为65538
第一章 #include <iostream>using namespace std; int main(){ int a,b,sum; sum=a+b; cin>>a> ...
- python核心编程2 第六章 练习
6-2. 字符串标识符.修改例 6-1 的 idcheck.py 脚本,使之可以检测长度为一的标识符,并且可以识别 Python 关键字,对后一个要求,你可以使用 keyword 模块(特别是 key ...