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代码
Sep 02 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
理解javascript中的闭包
Jan 11 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
Session的工作方式
2006/10/09 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
个人评价范文分享
2014/01/11 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
三八活动策划方案
2014/08/17 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
销售员岗位职责
2015/02/10 职场文书
紧急通知
2015/04/17 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
国际贸易实训总结
2015/08/03 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
新手初学Java网络编程
2021/07/07 Java/Android