<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. PostgresQL中的NUlls first/last功能

    Nulls first/last功能简介Nulls first/last功能主要用于order by排序子句中,影响空值Null在排序结果中的位置.简单来说,Nulls first表示Null值在排序 ...

  2. vos优化客户线路数量

    问题: 客户A打电话过来说之前给开的300线路不够用了,今天好多电话呼不出去了,线路太挤了! 麻烦增加线路,如何操作? 方法: 登陆VOS——在线对接——(客户A的对接网关ID)——双击 打开网关管理 ...

  3. 1.jdk的安装

    1.下载jdk放到某(E)盘底下的(java)某文件夹里 2.配置环境变量 (1)配置JAVA_HOME,CLASSPATH,PATH三个变量 其中JAVA_HOME必须的 JAVA_HOME=E:\ ...

  4. jquery中对于ul>li列表分页。学习记录

    这个是很简单的一种分页,只能对列表进行分页.为了开发有可能需要用到记录下来 Html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  5. mysqli：查询数据库中，是否存在数据的三种校验方法

    在我们编辑用户登录功能的时候,常常需要对用户输入的信息进行校验,校验的方法就是通过SQL语句进行一个比对,那么我们就需要用到以下三种中的一种进行校验啦 1.使用mysqli_num_rows()校验 ...

  6. ubuntu linux查看cpu信息

    $ cat /proc/cpuinfo CPU核心数量 $ grep -c processor /proc/cpuinfo

  7. April 14 2017 Week 15 Friday

    Try to be a rainbow in someone's cloud. 当乌云萦绕心头,我愿意成为你的彩虹. Actually there are many rainbows in our l ...

  8. cesium 加载kml polygon和mark（贴地形terrain效果）

    key code: var options = { camera : viewer.scene.camera, canvas : viewer.scene.canvas, clampToGround: ...

  9. Google搜索引擎使用小技巧

    相信大家都知道,利用Google等搜索引擎进行信息查证是翻译过程中十分重要的一环.事实上,掌握信息搜索的技巧和方法,不仅对翻译工作大有帮助, 在网络信息时代,学会充分利用搜索引擎,在很多情况下都可以达 ...

  10. P1540 机器翻译

    题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...