<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. IPV4基本知识介绍

    转自华为官网 1.1  介绍 定义 IPv4(Internet Protocol Version 4)协议族是TCP/IP协议族中最为核心的协议族.它工作在TCP/IP协议栈的网络层,该层与OSI参考 ...

  2. MySQL的prompt不生效的问题

    安装完MySQL之后,使用了自定义的配置文件来启动MySQL,发现配置在[mysql]中的prompt并没有生效 [root@MySQL56_L1 ~]# /usr/local/mysql/bin/m ...

  3. centos6.5_64bit-禅道安装及数据库操作

    linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道. 从7.3版本开始,linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载 ...

  4. graphql 数据增删改查分页及关联操作（三）

    说明: 接第二篇文章,代码也是在第二篇文章之上 本文只是针对mondodb来操作 一.添加相关的包 yarn add Mongoose 二.初始化Mongodb 修改server.ts 导入 impo ...

  5. poj 2115 扩展欧几里得

    题目链接:http://poj.org/problem?id=2115 题意: 给出一段循环程序,循环体变量初始值为 a,结束不等于 b ,步长为 c,看要循环多少次,其中运算限制在 k位:死循环输出 ...

  6. 【转】Android UI开发第二十四篇——Action Bar

    Action bar是一个标识应用程序和用户位置的窗口功能,并且给用户提供操作和导航模式.在大多数的情况下,当你需要突出展现用户行为或全局导航的activity中使用action bar,因为acti ...

  7. P1024 一元三次方程求解

    P1024 一元三次方程求解 #include<cstdio> #include<iostream> #include<algorithm> using names ...

  8. 第32章 TIM—高级定时器—零死角玩转STM32-F429系列

    第32章     TIM—高级定时器 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...

  9. currency 过滤器

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  10. mac系统的几种u盘启动制作方式

    先拿一个U盘,格式化好(guid分区表之类的选项弄好) 1.通过终端制作: 1>下载好自己要安装的系统镜像,最新的在App Store上下,以前的可以去pc 苹果等地方下载 2>在终端输入 ...