腾讯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 ...
随机推荐
- kubernetes组件helm
1.安装helm Helm由客户端helm命令行工具和服务端tiller组成,Helm的安装十分简单. 下载helm命令行工具到master节点node1的/usr/local/bin下(只需要在其中 ...
- 笨办法学Python（一）
习题 1: 第一个程序 你应该在练习 0 中花了不少的时间,学会了如何安装文本编辑器.运行文本编辑器.以及如何运行命令行终端,而且你已经花时间熟悉了这些工具.请不要跳过前一个练习的内容直接进行下面的内 ...
- 页面文本超出后CSS实现隐藏的方法
text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; dis ...
- 字符串处理(POJ1782)
题目链接:http://poj.org/problem?id=1782 解题报告: #include <iostream> #include <cstdio> #include ...
- ios 创建自己的.a文件
1:首先创建个 静态工程(Cocoa Touch Static Library); 方法名字,一定要暴露在.h文件中, 2:分别在模拟器环境和真机环境下 Analyze (shift+command+ ...
- .net 开源的网站
https://www.zhihu.com/question/24408855 https://www.zhihu.com/question/19840134 这两个知乎的答案 介绍部分经典的.net ...
- 在matlab中查看变量的数据类型
>> x = x = >> class(x) ans = double
- Linux驱动学习（编写一个最简单的模块）
在Linux中想做驱动开发,那么一定要先熟悉module的使用和编写 一.什么是module 从名字上看就是模块的意思,我个人的理解就是一个一个的小程序,可以进行动态的安装和卸载,而在这里面就实现一些 ...
- JavaWeb-拦截器，过滤器，监听器的区别和执行顺序
一:拦截器 :是在面向切面编程的就是在你的service或者一个方法,前调用一个方法,或者在方法后调用一个方法比如动态代理就是拦截器的简单实现,springmvc的aop中的前置通知和后置通知. 二: ...
- ES6初识-Symbol
Symbol的概念 变量是独一无二的 let a1=Symbol(); let a2=Symbol(); a1和a2严格意义不相等 let a3=Symbol.for('a3'); let a4=Sy ...