<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. vos对接时业务确认及信息安全责任承诺书

           业务确认及信息安全责任承诺书 双方达成一致,******网络科技有限公司向            有限公司提供中国移动网内语音线路接入服务,保证资源长期使用,保证线路资源接通率标 准,合 ...

  2. 关于java@Override错误

    重写的接口的方法,编译的时候一直报@override is not override a method from superclass,查了一下资料,这个@override报错是因为版本的原因. 在J ...

  3. eclipse 上使用tomcat 启动项目，项目目录下无.class 文件

    摘要:在使用eclipse 启动taomcat时,项目报错,但将项目打成war包单独部署到tomcat时,则项目正常,通过对比两次部署文件发现,从eclipse直接启动tomcat时,部署到tomca ...

  4. php一个类引用另一个类的方法的写法

    default.php: <?php namespace SiteInfo{ class Site{ var $url; var $title; function setUrl($par){ $ ...

  5. P1980 计数问题

    题目描述 试计算在区间 11 到 nn的所有整数中,数字x(0 ≤ x ≤ 9)x(0≤x≤9)共出现了多少次?例如,在 11到1111中,即在 1,2,3,4,5,6,7,8,9,10,111,2, ...

  6. tarjan+topsort

    题目 缩完点后统计入读为零的点就可以来. 因为缩完点后肯定是DAG #include<iostream> #include<cstdio> #include<algori ...

  7. Spring 注解中@Resource 和 @Authwired 的区别

    @Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按 byName自动注入罢了.@Resource有两个属性是比较重要的,分 ...

  8. C# CheckBoxList 实现全选/反选功能怎么写？

    首先我们用RadioButtonList控件,且必须包含OnSelectedIndexChanged事件和AutoPostBack=‘true’属性, <asp:LinkButton ID=&q ...

  9. EAIntroView–高度可定制的iOS应用欢迎页通用解决方案

    简介 高度可定制的应用欢迎页通用解决方案,可高度定制,不要仅限于现有的demo. 项目主页: EAIntroView 最新示例: 点击下载 入门 安装 安装后,引入” EAIntroView.h”并设 ...

  10. Swift小记一

    1.输出地址 print(String(format: "%p", "temp")) 2.判断字符串是否为空串.是否为nil 为String添加一个分类 ext ...