<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. Java中的字符集

    Java中的字符集 1.字符集概述 字符集是各国家文字与字符编码对照表.字符可以看成是计算机中展示的图案效果,每个字符集都对每一种图案进行编码,有着一对一的对应关系.因此进行字符输出时,都需要指定使用 ...

  2. 国外统计学课程主页Statistical Books, Manuals and Journals

    国外统计学课程主页Statistical Books, Manuals and Journalshttp://statpages.info/javasta3.html

  3. Graylog安装操作

    Graylog安装操作 实验环境centos7.5系统  mem:4-8G       disk:50G 关闭selinux以及firewalld 一.准备环境 1.1.java环境 下载java的j ...

  4. C# 驱动的mongodb的分页查询简单示例

    /// <summary> /// mongodb分页查询 /// </summary> /// <typeparam name="T">< ...

  5. NOIP2018学军中学游记（11.09~11.11）

    前言 这篇博客记录的是我在\(NOIP2018\)提高组比赛中的经历. 这一次的\(NOIP\)是在学军中学举办的, 莫名感到一阵慌张. 但愿能有一个好成绩,不然就要\(AFO\)了... ... 说 ...

  6. 2.1-Java语言基础(keyword)

    2.1  keyword watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXNpcmVuZQ==/font/5a6L5L2T/fontsize/400/fi ...

  7. 二、OC的构造方法和descriprtion方法

    二.构造方法和description方法 1.构造方法的定义 - (id)initWithAge:(int)newAge andNo:(int)newNo; 2.实现构造方法 - (id)initWi ...

  8. Laravel 5 : Call to undefined function Illuminate\Foundation\Bootstrap\mb_internal_encoding()

    自己组装的apache,php,mysql phpinfo显示 OpenSSL support     disabled (install ext/openssl) 判断为权限问题,所以修改如下. 1 ...

  9. jquery操作元素的位置

    .offset() 在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档. .offset() 这个不接受任何参数. var offset = p.offset(); // ...

  10. Python 初始—(高阶函数)

    变量可以指向函数,函数的参数能接收变量, 将函数通过参数进行传递 def SetAbs(a,b,abs){ return abs(a)+abs(b) }