最近学习了css3，就琢磨做些东西练练手，下面是自己写的一个电风扇，使用了原生js中的定时器和css3的一些属性

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>translate</title>

    <style>

        .fangshan {

            margin: 100px auto 0 auto;

            width: 200px;

            height: 600px;

        }

        .box2 {

            width: 200px;

            height: 200px;

            border-radius: 50%;

            border: 1px solid #000;

            position: relative;

        }

        #nob1 {

            width: 50px;

            height: 50px;

            border-radius: 50%;

            background: #000;

            position: absolute;

            left: 38%;

            top: 38%;

            z-index: 3;

        }

        .nob {

            width: 50px;

            height: 100px;

            border-radius: 50%;

            position: absolute;

            top: 0;

            left: 78px;

        }

        #nob2 {

            background: red;

            transform-origin: 50% bottom;

            transition: transform 1s linear;

        }

        #nob3 {

            transform: rotate(240deg);

            left: 75px;

            top: 0px;

            background: green;

            transform-origin: 50% bottom;

            transition: transform 1s linear;

        }

        #nob4 {

            transform: rotate(120deg);

            left: 75px;

            top: 0px;

            background: blue;

            transform-origin: 50% bottom;

            transition: transform 1s linear;

        }

        .shu {

            width: 20px;

            height: 300px;

            background: #ccc;

            box-shadow: 2px 0 2px 2px #dedede;

            margin-left: 87px;

            position: relative;

        }

        .pan {

            width: 200px;

            height: 50px;

            border-radius: 50%;

            margin-top: -25px;

            background: #ccc;

        }

        .n {

            position: absolute;

            width: 15px;

            height: 15px;

            border-radius: 50%;

            background: #aaa;

            color: #fff;

            left: 2.5px;

            text-align: center;

            cursor: pointer;

        }

        #n1 {

            top: 50px;

        }

        #n2 {

            top: 80px;

        }

        #n3 {

            top: 110px;

        }

        #n4 {

            top: 140px;

        }

    </style>

</head>

<body>

    <div class="fangshan">

        <div class="box2">

            <div id="nob1"></div>

            <div class="nob" id="nob2"></div>

            <div class="nob" id="nob3"></div>

            <div class="nob" id="nob4"></div>

        </div>

        <div class="shu">

            <div class="n" id="n1">1</div>

            <div class="n" id="n2">2</div>

            <div class="n" id="n3">3</div>

            <div class="n" id="n4">关</div>

        </div>

        <div class="pan"></div>

    </div>

<script>

var n1 = document.getElementById("n1");

var n2 = document.getElementById("n2");

var n3 = document.getElementById("n3");

var n4 = document.getElementById("n4");

var i=1;

var interval;

function change3(num){

    nob2.style.transform = "rotate("+i*360+"deg)";

    nob2.style.transition = "transform "+num+"ms linear";

    var num2 = i*360+240;

    nob3.style.transform = "rotate("+num2+"deg)";

    nob3.style.transition = "transform "+num+"ms linear";

    var num3 = i*360+120;

    nob4.style.transform = "rotate("+num3+"deg)";

    nob4.style.transition = "transform "+num+"ms linear";

    i++;

}

n1.onclick=function(){

    clearInterval(interval);

    change3(1000);

    interval = setInterval(function(){

        change3(1000);

    },1000);

};

n2.onclick=function(){

    clearInterval(interval);

    change3(500);

    interval = setInterval(function(){

        change3(500);

    },500);

};

n3.onclick=function(){

    clearInterval(interval);

    change3(200);

    interval = setInterval(function(){

        change3(200);

    },200);

};

n4.onclick=function(){

    clearInterval(interval);

};

</script>

</body>

</html>

原生js与css3结合的电风扇的更多相关文章

  1. 瀑布流的三种实现方式（原生js+jquery+css3）

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  2. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  3. js+jquery+css3

    (原生js+jquery+css3) 前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现 ...

  4. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  5. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  6. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

  7. 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

    项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...

  8. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  9. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

随机推荐

  1. 教你如何利用分布式的思想处理集群的参数配置信息——spring的configurer妙用

    引言 最近LZ的技术博文数量直线下降,实在是非常抱歉,之前LZ曾信誓旦旦的说一定要把<深入理解计算机系统>写完,现在看来,LZ似乎是在打自己脸了.尽管LZ内心一直没放弃,但从现状来看,需要 ...

  2. 李洪强iOS经典面试题129

    1. 怎么解决缓存池满的问题(cell) ios中不存在缓存池满的情况,因为通常我们ios中开发,对象都是在需要的时候才会创建,有种常用的说话叫做懒加载,还有在UITableView中一般只会创建刚开 ...

  3. 重写(Override)与重载(Overload)

    重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的好处在于子类可以根据需要,定义特定于自己的行为. 也就是说子类 ...

  4. childNodes 和children

    childNodes 兼容性不是很好,一般用children 元素.childNodes : 只读 属性 子节点列表集合标准下:包含了空白换行和元素类型的节点,也会包含非法嵌套的子节点非标准下:只包含 ...

  5. 判断pc端还是移动，并给移动加上其它的样式文件方法

      所有移动端PC端 按 640 进行排版 body, html { width: %; height: %; overflow: hidden; background-color: #; } bod ...

  6. windows用户用VMware 虚拟机安装黑苹果Mac.OS.X操作系统

    使用的操作系统操作系统 windows7 SP1 X64 本教程所用 的软件的下载地址都在本教程中 ) 电脑内存低于 4G 的,加内存吧 … 1. SecurAble (检测你的 CPU 是否支持硬件 ...

  7. error LNK2019: 无法解析的外部符号 _WinMain@16，该符号在函数 ___tmainCR...

    http://blog.csdn.net/playstudy/article/details/6661868 一,问题描述MSVCRTD.lib(crtexew.obj) : error LNK201 ...

  8. 关于web-dev-server 记录

    package.json "scripts": { "init": "webpack --progress --config webpack.dev. ...

  9. SpringMvc简单实例

    Spring MVC应用一般包括4个步骤: (1)配置web.xml,指定业务层对应的spring配置文件,定义DispatcherServlet; (2)编写处理请求的控制器 (3)编写视图对象,例 ...

  10. IOS第八天(4:UITableViewController新浪微博, 代码创建布局和数据转模型)

    ******控制control #import "HMViewController.h" #import "HMStatus.h" #import " ...