最近学习了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. thinkphp常用Config.php配置项

    <?php return array( //'配置项'=>'配置值' 'DB_HOST' => 'localhost', 'DB_USER' => 'root', 'DB_PW ...

  2. 硬盘分区工具gparted使用

    一.介绍 GParted是一款linux下的功能非常强大的分区工具,和windows下的‘分区魔术师’类似,操作和显示上也很相似.GParted可以方便的创建.删除分区,也可以调整分区的大小和移动分区 ...

  3. Maven3路程（一）用Maven创建第一个web项目(2)

    工具/原料 Windows 系统 JDK 1.5 及以上版本 Maven 3.0 及以上版本 方法/步骤 1 首先检查Eclipse是否已经添加的Maven插件,打开Eclipse, 依次选择 &qu ...

  4. Crossing River

    Crossing River 题目链接:http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=26251 题意: N个人希望去过 ...

  5. Spark cache 和 persist

    1)RDD的cache()方法其实调用的就是persist方法,缓存策略均为MEMORY_ONLY:2)可以通过persist方法手工设定StorageLevel来满足工程需要的存储级别:3)cach ...

  6. oracle initialization or shutdown in progress问题解决步骤

        今天像往常一样打开电脑,启动plsql工具连接数据库,但是尽然连接不了,报了“oracle initialization or shutdown in progress”的提示信息,从操作系统 ...

  7. MySQL 5.7贴心参数之binlog_row_image

    相信大家都了解mysql binlog的格式,那就是有三种,分别是STATEMENT,MiXED,ROW.各有优劣,具体的请大家自行查阅资料.在MySQL 5.7版本以前,虽然ROW格式有各种各样的好 ...

  8. LINUX数据库的备份，以及远程授权登陆

    mysql dump -u root -p juhui > /data/juhui.sql   //备份数据库 grant all privileges on *.* to xf111@loca ...

  9. 自动解析URL

    function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, pr ...

  10. 【iCore3 双核心板】例程十二：通用定时器实验——定时点亮LED

    实验指导书及代码包下载: http://pan.baidu.com/s/1kTWAAJ9 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...