腾讯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 ...
随机推荐
- Linux目录与文件的权限意义
ls -l和ls -al的区别:第一个不会显示隐藏文件,第二个会显示隐藏文件(以点(.)开头的文件) 一.权限对文件(r.w.x主要针对文件的内容而言)的重要性 r:可读取文件内容 w:可以编辑.新增 ...
- windows服务器间文件同步搭建步骤搜集
Rsync https://www.cnblogs.com/janas/p/3321087.html https://yq.aliyun.com/ziliao/110867 subersion协议 h ...
- 【转载】#346 - Polymorphism
Recall that polymorphism is one of the three core principles of object-oriented programming. Polymor ...
- python剑指offer最小的K个数
题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 思路: 使用快排中的partition思想. ①我们设定part ...
- Java的感受
感觉Java很重要,但是学起来好像并不比C语言简单.
- Can Microsoft’s exFAT file system bridge the gap between OSes?
转自:http://arstechnica.com/information-technology/2013/06/review-is-microsofts-new-data-sharing-syste ...
- 【洛谷P1090】合并果子
合并果子 题目链接 贪心:每次先合并最小的两堆果子 用堆实现 #include<iostream> #include<cstdio> using namespace std; ...
- jQuery实现轮播切换以及将其封装成插件（3）
在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容. 我们趁着 ...
- CentOS 7与 Windows双系统丢失Windows启动项及默认启动项修改
1.Windows启动项消失的原因: 在安装Win7.8/10系统+CentOS7双系统后,默认会将mbr(Main Boot Record)改写为grub2,默认的CentOS7无法识别Wind ...
- Spring 学习之依赖注入
什么是依赖关系? 纵观所有的Java 应用,从基于Applet的小应用到多层次结构的企业级别的应用,他们都是一种典型的依赖性应用,也就是由一些互相协作的对象构成的,Spring把这种互相协作的关系称之 ...