(-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. Hook技术

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

  2. Spring配置文件详解 – applicationContext.xml文件路径

    Spring配置文件详解 – applicationContext.xml文件路径 Java编程                 spring的配置文件applicationContext.xml的默 ...

  3. Linux查看CPU和内存使用情况

    在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...

  4. mysql case when

    下面为您举例说明了三种mysql中case when语句的使用方法,供您参考学习,如果您对mysql中case when语句使用方面感兴趣的话,不妨一看. 1. select name, case w ...

  5. JavaWeb学习笔记——Tomcat数据源

    server.xml配置数据帐号和密码等

  6. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  7. UITextField限制输入文字

    一.viewDidLoad时监听通知 NSNotificationCenter *center = [NSNotificationCenter defaultCenter]; [center addO ...

  8. IOS: 模型面数控制

    你可以先试试 生成之后在虚拟机上运行一下就知道了 不过关键也看手机的好坏 場景 人物 面數的話越少越好(但要保持模型的完整)  貼圖解析度也不要太大 資料越少越好 //================ ...

  9. Fiddler进行模拟Post提交json数据，总为null解决方式

    Request Headers: User-Agent: FiddlerHost: localhost:3248Content-Type: application/json; charset=utf- ...

  10. JS之function的应用

    1.最基本的作为一个本本分分的函数声明使用. 复制代码代码如下: function func(){} 或 var func=function(){};  2.作为一个类构造器使用: 复制代码代码如下: ...