<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特效的更多相关文章

  1. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  2. 腾讯QQ空间超分辨率技术TSR

    腾讯QQ空间超分辨率技术TSR:为用户节省3/4流量,处理效果和速度超谷歌RAISR 雷锋网AI科技评论: 随着移动端屏幕分辨率越来越高,甚至像iPhone更有所谓的“视网膜屏”,人们对高清图片的诉求 ...

  3. 腾讯QQ空间应用宽屏接入

    QQ 空间接入宽屏. (与腾讯微博分属两个不同平台) 相关文档:  流动应用画布说明 前端页面规范 多区多服场景说明 应用宽屏根据游戏分为两种.  1: 普通游戏,但想要实现宽屏显示. 2: 多区多服 ...

  4. Android QQ空间浏览图片动画特效的实现(※)

    1 http://blog.csdn.net/yangblocker/article/details/12680247 2 photoview 3 nineoldandroid

  5. 然并卵，腾讯QQ认证空间又再次关闭申请

    昨天发布的腾讯QQ认证空间又开放申请的消息,此消息一放出,大家都去关注认证的事情,而马浩周发现在4月27日下午4-5点,腾讯QQ空间认证又再次关闭页面开放申请的通知,变成了以前停止审核的通知了. 可能 ...

  6. TOP100summit：【分享实录-QQ空间】10亿级直播背后的技术优化

    本篇文章内容来自2016年TOP100summit QQ空间客户端研发总监王辉的案例分享.编辑:Cynthia 王辉:腾讯SNG社交平台部研发总监.腾讯QQ空间移动客户端技术负责人高级工程师.09年起 ...

  7. 腾讯QQ认证空间4月27日已全面开放申请，欲进军自媒体

    今天看到卢松松的博客上爆出,腾讯QQ认证空间4月27日已全面开放申请的消息,这一消息出来, 马浩周根据提示方法进行申请,下面先说说腾讯QQ认证空间的申请方法: QQ认证空间开放申请公告地址:http: ...

  8. 【腾讯bugly干货】QQ空间直播秒开优化实践

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址为:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1204&am ...

  9. 分享到QQ空间、新浪微博、腾讯微博的代码

    今天公司原来的分享代码,在IE下有问题.网上找了下网上的分享代码. 给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href=&quo ...

随机推荐

  1. 关于Mysql中文乱码问题该如何解决(乱码问题完美解决方案)（转）

    这篇文章给大家介绍关于Mysql中文乱码问题该如何解决(乱码问题完美解决方案)的相关资料,还给大家收集些关于MySQL会出现中文乱码原因常见的几点,小伙伴快来看看吧   最近两天做项目总是被乱码问题困 ...

  2. 笨办法学Python（十二）

    习题 12:提示别人 当你键入 raw_input() 的时候,你需要键入 ( 和 ) 也就是“括号(parenthesis)”.这和你格式化输出两个以上变量时的情况有点类似,比如说 "%s ...

  3. IOS 拼接按钮文字

    NSMutableString *tempAnswerTitle=[[NSMutableString alloc]init]; for(UIButton *answerBtn in self.answ ...

  4. 2019.03.13 ZJOI2019模拟赛 解题报告

    得分: \(55+12+10=77\)(\(T1\)误认为有可二分性,\(T2\)不小心把\(n\)开了\(char\),\(T3\)直接\(puts("0")\)水\(10\)分 ...

  5. Poj(2560),最小生成树，Prim

    题目链接:http://poj.org/problem?id=2560 只想说“全都是套路”,关键建图. #include <stdio.h> #include <string.h& ...

  6. RPC&ORM

  7. 通过redis实现的一个抢红包流程，仅做模拟【上】

    建议结合下一篇一起看 下一篇 数据结构+基础设施 数据结构 这里通过spring-data-jpa+mysql实现DB部分的处理,其中有lombok的参与 @MappedSuperclass @Dat ...

  8. PRmakefile文件

    Ubuntu下的makefile: # /******************************************************************************* ...

  9. 如何在Linux中显示和设置主机名

    原文链接 随着连接到网络的计算机数量越来越多,每一台计算机都需要有一个属性来区别于其它计算机.和现实世界中的人一样,计算机也有一个叫做hostname(主机名)的属性. 什么是hostname 从它的 ...

  10. ipython notebook超级好用

    这个东西超级好用,以后要以c++和python为主要沟通语言了.