(-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. confluence安装

    confluence安装 1.jre安装 java下载http://www.java.com/zh_CN/download/manual.jsp 创建目录和解压缩 mkdir -p /usr/loca ...

  2. mysql数据库中标的key的含义

    四种Key: Primary Key, Unique Key, Key 和 Foreign Key. 1.如果Key是空的, 那么该列值的可以重复, 表示该列没有索引, 或者是一个非唯一的复合索引的非 ...

  3. 记一次mysql故障恢复

    事情要从俩月前的一个坑说起,一台新的测试服务器,新项目一元夺宝用的. 配置aws上的一台云主机,系统盘8G,一块300G的云硬盘. 拿到机器后,另一运维小哥安装php,nginx,mysql等软件. ...

  4. 整数分解 && 质因数分解

    输入整数(0-30)分解成所有整数之和.每四行换行一次. 一种方法是通过深度优先枚举出解.通过递归的方式来实现. #include <stdio.h> #include <strin ...

  5. 关于centos的yum代理设置

    10. 有代理服务器时使用 yum默认情况下,yum 通过 HTTP 连接到网络上的仓库.所有 yum HTTP 操作都使用 HTTP/1.1,与支持这一标准的 web 代理服务器兼容.您也可以连接到 ...

  6. easyUI layout 中使用tabs+iframe解决请求两次方法

    demo中的事例在加载tab页面时是 function createFrame(url) { var s = '<iframe name="iframepanel" scro ...

  7. 多日期选择jQuery插件 MultiDatesPicker for jQuery UI

    Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件.   GIT源码: https://github.com/dubrox/Multiple-Da ...

  8. JavaBean简单示例

    本示例说明: 从Login.jsp中输入用户名和密码,提交,在NewFile.jsp中显示信息. ----- 类要放在一个包中!!! UserB 类文件 package model; public c ...

  9. C-结构体、枚举

    #include <stdio.h> //结构体:可以由多个不同类型的数据构成 int main() { struct Person { //里面的3个变量,可以称为是结构体的成员或者属性 ...

  10. PhpStorm 快捷键

    不容易记住的: Ctrl + Shift + F  查找文本,在项目目录或指定的目录 Ctrl + Shift + R  查找文本并替换,在项目目录或指定的目录 Ctrl + E    打开最近关闭的 ...