(-1)写在前面

首先图片是我从互联网上下载的，向这位前辈致敬。我用的是chrome49，没有加不同浏览器的前缀，jquery3.0，图片资源放在了我的百度云盘上http://pan.baidu.com/s/1o7LyHp4

(1)知识预备

a.浏览器x、y、z轴的概念

左手竖代表y轴，右手横代表x轴，左右手摆成一个十字，z轴是即垂直x轴也垂直y轴穿过x、y交点的一条直线。

b. :nth-of-type(1)

img:nth-of-type(1)，所有有子元素img的父元素的第一个img子元素

body :nth-of-type(1) 等同于body *:nth-of-type(1)

(2)代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset=utf-8>

<script   type="text/javascript" src="debug-jquery-3.0.0.js"></script>

<script   type="text/javascript" src="base.js"></script>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<title>为了生活</title>

<style type="text/css">

*

{

margin-top:0px;

padding:0;

}

body

{

position:absolute;

}

#lol

{

width:530px;

height:530px;

position:absolute;

}

#lol img

{

display:block;

position:absolute;

border:1px #6F0000 solid;

}

#lol img:nth-of-type(1)

{

animation: one 10s linear 3s infinite;

}

@keyframes one

{

to

{

transform: rotateX(360deg);

}

}

#lol img:nth-of-type(2)

{

animation: two 10s linear 2s infinite;

}

@keyframes two

{

to

{

transform: rotateY(360deg);

}

}

#lol img:nth-of-type(3)

{

animation: three 10s linear 1s infinite;

}

@keyframes three

{

to

{

transform:rotateZ(360deg);

}

}

</style>

<script type="text/javascript">

$(function()

{

$("#lol").centerPos();

//让lol元素水平垂直居中显示，centerPos是自定义函数

})

$.fn.centerPos = function()

{

var parent;

this.each(function(index)

{

parent = this.parentNode;

if(parent == document.body)

{

parent = window;

}

var position = $(this).css("position");

if(position == "fixed" || position=="absolute")

{

$(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")

.css("top",($(parent).height()-this.offsetHeight)/2+"px");

}

else

{

window.console.error("没有设置有效的position值");

}

})

return this;

}

</script>

</head

<body>

<div id="lol">

<img src="data:images/main5-pic1.png">

<img src="data:images/main5-pic2.png">

<img src="data:images/main5-pic3.png">

</div>

</body>

</html>

H53D旋转-遁地龙卷风的更多相关文章

  1. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

  2. 逻辑思维面试题-java后端面试-遁地龙卷风

    (-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...

  3. JQuery data方法的使用-遁地龙卷风

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

  4. JQuery simpleModal插件的使用-遁地龙卷风

    (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...

  5. jQuery-H5-css3转盘抽奖-遁地龙卷风

    (-1)写在前面 这个idea不是我的,首先向这位前辈致敬. 我用的是chrome49, jquery3.0. 完整的程序案例在我的百度云盘http://pan.baidu.com/s/1jI2QSn ...

  6. H5图像遮罩-遁地龙卷风

    (-1)写在前面 这个idea不是我的,向这位前辈致敬.我用的是chrome49.用到的图片资源在我的百度云盘里http://yun.baidu.com/share/link?shareid=1970 ...

  7. HTML中的标记-遁地龙卷风

    第三版 上一版本在未经验证的情况下,盲目的认为很多东西是那样,造成错误,非常抱歉. 0.什么是标记 <input type="checkbox" checked />& ...

  8. mysql SQL优化之嵌套查询-遁地龙卷风

    (-1) 写在前面 这篇随笔的数据使用的是http://blog.csdn.net/friendan/article/details/8072668#comments里的,里面有一些常见的select ...

  9. mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风

    (-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...

随机推荐

  1. IOS基础之 (设计模式)

    一 工厂方法 工厂方法方便我们快速创建类的实例的方法.通过工厂方法,可以让调用过程更加清晰. Person.h #import <Foundation/Foundation.h> @int ...

  2. Hook技术

    hook钩子: 使用技术手段在运行时动态的将额外代码依附现进程,从而实现替换现有处理逻辑或插入额外功能的目的. 它的技术实现要点有两个: 1)如何注入代码(如何将额外代码依附于现有代码中). 2)如何 ...

  3. tail 命令 查看Tomcat目录下日志的最后几行的方法

    工作中需要查看日志信息,进行排错,但是面对上万行的错误日志,从头开始往后看,比较浪费时间,所有使用tail命令会节省不少时间. 1.命令   tail  - n  opt/tomcat/logs/ca ...

  4. Eclipse自动补全+常用快捷键

    一,Eclipse自动补全增强方法 在Eclipse中,从Window -> preferences -> Java -> Editor -> Content assist - ...

  5. INADDR_ANY

    INADDR_ANY就是指定地址为0.0.0.0的地址,这个地址事实上表示不确定地址,或“所有地址”.“任意地址”. 一般来说,在各个系统中均定义成为0值. 外文名 INADDR_ANY 别 名 所有 ...

  6. eclipse安装springsource-tool-suite

    到http://spring.io/tools/sts/all找到安装的eclipse对应的springsource-tool-suite版本,复制下载的网址 然后在eclipse的install n ...

  7. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【七】——实现资源的分页

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 这篇文章我们将使用不同的方式实现手动分页(关于高端大气上档次的OData本文暂不涉及,但有可 ...

  8. MSA:多重比对序列的格式及其应用

    多重比对序列的格式及其应用   这里对多重序列比对格式(Multiple sequence alignment – MSA)进行总结.在做系统演化分析.序列功能分析.基因预测等,都需要涉及到多重序列比 ...

  9. CentOS/RHEL安装oracle 11G

    系统:RHEL6.5 + oracle11G x86_64 (CentOS上安装与此大同小异) 使用本地yum源(提前下载pdksh包),具体过程参考(适用于RHEL/CentOS):http://w ...

  10. php Hash Table(三) Hash Table初始化

    HashTable初始化,在使用HashTable之前要先执行初始化,下边就看看初始化时都做了什么, Zend/zend_hash.c static const Bucket *uninitializ ...