首页 / JAVASCRIPT / javascript结合CSS实现苹果开关按钮特效_javascript技巧

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript结合CSS实现苹果开关按钮特效_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含882字，纯文字阅读大概需要2分钟。

内容图文

苹果开关按钮效果~~

关闭时 开启时

javascript结合CSS实现苹果开关按钮特效_javascript技巧 - 文章图片javascript结合CSS实现苹果开关按钮特效_javascript技巧 - 文章图片

html

代码如下:





apple button







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结合CSS实现苹果开关按钮特效_javascript技巧全部内容，希望文章能够帮你解决javascript结合CSS实现苹果开关按钮特效_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/324815.html

来源：【匿名】