(-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. Java 开发技巧

    一 读取配置文件 1 Properties读取配置文件 编写配置文件config.properties放在普通java工程的src目录(如果是maven工程就放在工程的src/main/resourc ...

  2. zabbix监控系列（4）之zabbix报警邮件无法发送

    情况介绍 首先确保邮箱规则没有把报警邮件作为垃圾邮件拉黑了. 服务器断电重启后,发现zabbix报警邮件无法发送,断电之前是好好的,但是重启后不行了,于是查看maillog日志,发现这个错误: Hos ...

  3. 百度云管家 5.3.6 VIP破解不限速版下载分享|百度云管家破解提速

    百度云管家PC客户端v5.3.6绿色版本,属于VIP破解不限速版.百度网盘为您提供文件的网络备份.同步和分享服务.空间大.速度快.安全稳固,支持教育网加速,支持手机端.它支持便捷地查看.上传.下载云端 ...

  4. IOS 中的CoreImage框架（framework）

    http://www.cnblogs.com/try2do-neo/p/3601546.html coreimage framework 组成 apple 已经帮我们把image的处理分类好,来看看它 ...

  5. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  6. 【原】整理的react相关的一些学习地址，包括 react-router、redux、webpack、flux

    因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...

  7. 匿名函数：Lambda表达式和匿名方法

    匿名函数一个"内联"语句或表达式,可在需要委托类型的任何地方使用.可以使用匿名函数来初始化命名委托,或传递命名委托(而不是命名委托类型)作为方法参数. 共有两种匿名函数: Lamb ...

  8. Oracle11g的exp导出空表提示EXP-00011： 不存在

    刚lg问我11g无法导出空表,实验了下,果真如此. 原因:11g默认创建一个表时不分配segment,只有在插入数据时才会产生(当然也可以强制分配),以节省磁盘空间. 对于已经存在的空表解决办法: 就 ...

  9. Jquery学习之基础篇二

    1.Jquery添加元素的方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被 ...

  10. 初识Hadoop一，配置及启动服务

    一.Hadoop简介: Hadoop是由Apache基金会所开发的分布式系统基础架构,实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS:Hadoo ...