javascript结合CSS实现苹果开关按钮特效

苹果开关按钮效果~~

关闭时                                      开启时

html

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>apple button</title>
</head>
<body>
    <div id="div1" class="open1">
        <div id="div2" class="open2"></div>
    </div>
</body>
</html>

css

代码如下:

#div1{
        width: 170px;
        height: 100px;
        border-radius: 50px;
        position: relative;
    }
    #div2{
        width: 96px;
        height: 96px;
        border-radius: 48px;
        position: absolute;
        background: white;
        box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    }
    .open1{
        background: rgba(0,184,0,0.8);
    }
    .open2{
        top: 2px;
        right: 1px;
    }
    .close1{
        background: rgba(255,255,255,0.4);
        border:3px solid rgba(0,0,0,0.15);
        border-left: transparent;
    }
    .close2{
        left: 0px;
        top: 0px;
        border:2px solid rgba(0,0,0,0.1);
    }

javascript

代码如下:

window.onload=function(){
        var div2=document.getElementById("div2");
        var div1=document.getElementById("div1");
        div2.onclick=function(){
          div1.className=(div1.className=="close1")?"open1":"close1";
          div2.className=(div2.className=="close2")?"open2":"close2";
        }
    }

以上所述就是本文的全部内容了，希望能够对大家熟练掌握WEB前段设计有所帮助。

赞 (0)

相关推荐

  • label+input实现按钮开关切换效果的实例

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q

  • JQuery对class属性的操作实现按钮开关效果

    在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果. 首先定义两个class: 复制代码 代码如下: .controlOff{ display:inline-block; width:130px; height:36px; cursor:pointer; background-image:url("../iclass/images/teach_off.png"); background-repeat: no-repeat; } .controlOn{ displa

  • javascript结合CSS实现苹果开关按钮特效

    javascript结合CSS实现苹果开关按钮特效

    苹果开关按钮效果~~ 关闭时                                      开启时 html 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>apple button</title> </head> <body>  

  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • JavaScript实现垂直向上无缝滚动特效代码

    JavaScript实现垂直向上无缝滚动特效代码

    一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g

  • JavaScript实现带音效的烟花特效

    JavaScript实现带音效的烟花特效

    花了半个小时写的代码,这个html5 canvas新年烟花一定不会让大家失望! 首先我们看下静态的效果图: 文章末尾有动态的效果图,滑动即可看到!  JavaScript代码如下: $(function() { var canvas = $('#canvas')[0]; canvas.width = $(window).width(); canvas.height = $(window).height(); var ctx = canvas.getContext('2d'); // resize

  • JavaScript实现五种不同烟花特效

    JavaScript实现五种不同烟花特效

    目录 一.简单大气的烟花 二.在农村看到的烟花 三.可点击的烟花 四.3D旋转烟花 五.可拖动视角的自定义烟花 一.简单大气的烟花 演示地址:http://haiyong.site/fireworks1 HTML代码: 这里的HTML代码很简短 <div> <canvas id="canvas"></canvas> </div> CSS代码 css也只有这两段内容 body{ background:black; overflow:hidd

  • JavaScript利用canvas实现鼠标跟随特效

    目录 前言 创建canvas画布 定义鼠标 x / y 初始化canvas 画箭头 循环动画 鼠标事件 前言 canvas是一个很神奇的玩意儿,比如画表格.画海报图都要用canvas去做,前几天有用css去做一个鼠标跟随的恶魔之眼的动画效果,想着能不能用canvas也做一个鼠标跟随的效果呢? 创建canvas画布 canvas画布创建可以直接用canvas标签即可 <canvas></canvas> 也没有过多的样式,基本都是用js去完成画布中的内容的 const canvas =

  • JavaScript实战(原生range和自定义特效)简单实例

    今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; ri

  • 你未必知道的JavaScript和CSS交互的5种方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的.下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道! 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-eleme

  • 多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页

    在介绍ensure内部的实现之前,让我们先来看看其功能: ensure({ html: "popup.html", javascript: "popup.js", css: "popup.css" }, function() { Popup.show("hello world"); } ); 在这段代码中,ensure首先会确保popup.html.popup.js.popup.css这3个文件的加载,如果都没加载过ensur

  • ASP.NET MVC Bundles 用法和说明（打包javascript和css）

    在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以ASP.NET MVC4引入了Bundles特性,使得我们可以方便的管理javascript和css文件. 原来,我们引用css和javascript文件我们需要这样一个一个的引用: 复制代码 代码如下: <scriptsrc="~/Scripts/jquery-1.8.2.js">

随机推荐