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


Posted in Javascript onApril 07, 2015

苹果开关按钮效果~~

关闭时                                      开启时

javascript结合CSS实现苹果开关按钮特效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前段设计有所帮助。

Javascript 相关文章推荐
js 判断脚本加载完毕的代码
Jul 13 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
javascript实现画不相交的圆
Apr 07 #Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 #Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 #Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 #Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 #Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 #Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
模仿OSO的论坛(三)
2006/10/09 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
3分钟学会一个Python小技巧
2018/11/23 Python
python操作gitlab API过程解析
2019/12/27 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
django中的数据库迁移的实现
2020/03/16 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
经典C++面试题一
2016/11/06 面试题
致短跑运动员广播稿
2014/01/09 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
见习期个人总结
2015/03/05 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
2015年度女工工作总结
2015/10/22 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js