首先,我们要在js,css文件夹中创建js跟css,然后在body中写入html代码

<main><!--标签是 HTML 5 中的新标签。 素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单-->
<div class="one">医疗</div>
<div class="two">饮食</div>
<div class="three">运动</div>
<div class="four">消费</div>
</main>

然后我们在css中写入它们的样式

 * {
margin: 0 auto;
padding:;
} body,
html {
height: 100%;
display: flex;/*弹性盒子 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。*/
justify-content: center;/*用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。*/
align-items: center;/*属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。*/
/* 定义背景颜色的过度和延迟 */
transition: 0.5s;
transition-delay: 0.3s;
}
body{background-color: #292929}
main {
width: 400px;
height: 400px;
/* border: 1px solid black; */
position: relative;
} div {
/* 设置4个小叶片的整体样式 */
width: 150px;
height: 150px;
/* 设置绝对定位,相对于他的父元素 main */
position: absolute;
box-sizing: border-box;
transition: 0.5s;
background: rgba(0, 0, 0, 0.493);
text-align: center;
line-height: 150px;
color: rgba(255, 255, 255, 0.849);
font-size: 35px;
/* 设置小手样式 */
cursor: pointer;
} .one:hover,
.two:hover {
/* 当鼠标经过 医疗 饮食时,出现阴影,并往上移动10px */
box-shadow: 0 0 10px rgb(102, 98, 98);
transform: translateY(-10px);
} .three:hover,
.four:hover {
/* 当鼠标经过 运动 消费时,出现阴影,并往下移动10px */
box-shadow: 0 0 10px rgb(102, 98, 98);
transform: translateY(10px);
} .one {
/* 初始样式 */
/* 给医疗小叶片定位 */
left: 45px;
top: 45px;
/* 设置右上角和左下角样式 */
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
background: rgba(238, 10, 10, 0.644);
} .ones {
/* 点击要调用的样式 */
left: 0px;
top: 0px;
text-shadow: 5px 5px 5px rgb(56, 55, 55);
background: rgba(238, 10, 10, 0.986);
} .two {
/* 初始样式 */
/* 给饮食小叶片定位 */
right: 45px;
top: 45px;
/* 设置左上角和右下角样式 */
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
background: rgba(252, 235, 3, 0.863);
} .twos {
/* 点击要调用的样式 */
right: 0px;
top: 0px;
text-shadow: -5px 5px 5px rgb(56, 55, 55);
background: rgba(252, 235, 3, 0.863);
} .three {
/* 初始样式 */
/* 给运动小叶片定位 */
left: 45px;
bottom: 45px;
/* 设置左上角和右下角样式 */
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
background: rgba(149, 247, 3, 0.877);
} .threes {
/* 点击要调用的样式 */
left:;
bottom:;
text-shadow: 5px -5px 5px rgb(56, 55, 55);
background: rgba(149, 247, 3, 0.877);
} .four {
/* 初始样式 */
/* 给消费小叶片定位 */
bottom: 45px;
right: 45px;
/* 设置右上角和左下角样式 */
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
background: rgba(5, 190, 247, 0.856);
} .fours {
/* 点击要调用的样式 */
bottom:;
right:;
text-shadow: -5px -5px 5px rgb(56, 55, 55);
background: rgba(5, 190, 247, 0.856);
} .ones,
.twos,
.threes,
.fours {
/* 设置被调用的公共样式 */
border: 3px solid white;
color: white;
border-radius: 80%;

最后就是我们使用JQ写四叶草菜单的动态样式

 // 当点击医疗时调用方法
$('.one').click(function () {
// 判断语句
// 如果当前样式为 .one时
if ($(this).attr('class') == 'one') {
// 则点击时调用的为 .ones 样式
$(this).attr('class', 'ones')
// 背景颜色改变
$('body').css({ background: 'rgba(247, 114, 114, 0.986)' })
} else {//否则,也就是说当前为 .ones样式时,点击调用的是 .one样式 //这样可以实现重复点击效果
$(this).attr('class', 'one')
//使背景颜色变白
$('body').css({ background: 'none' })
}
}) // 当点击饮食时调用方法
//道理同上
$('.two').click(function () {
if ($(this).attr('class') == 'two') {
$(this).attr('class', 'twos')
$('body').css({ background: 'rgb(245, 245, 129)' })
} else {
$(this).attr('class', 'two')
$('body').css({ background: 'none' })
}
}) // 当点击运动时调用方法
//道理同上
$('.three').click(function () {
if ($(this).attr('class') == 'three') {
$(this).attr('class', 'threes')
$('body').css({ background: 'rgb(193, 245, 115)' })
} else {
$(this).attr('class', 'three')
$('body').css({ background: 'none' })
}
}) // 当点击消费时调用方法
//道理同上
$('.four').click(function () {
if ($(this).attr('class') == 'four') {
$(this).attr('class', 'fours')
$('body').css({ background: 'rgb(133, 219, 245)' })
} else {
$(this).attr('class', 'four')
$('body').css({ background: 'none' })
}
})

别忘了JQ插件喔!!

jQuery四叶草菜单效果,跟360杀毒软件差不多的更多相关文章

  1. [Jquery]导航菜单效果-纵向

    $( document ).ready( function(e){ var $catCont = $( ".cat-cont" );    //二级菜单div    var $ca ...

  2. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  3. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  6. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  9. ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果

    效果:利用ligerLayout.ligerAccordion实现可折叠的菜单效果 可能用到的js.css.images等,可到官网下载: 第01步:引入相应的文件 <head><l ...

随机推荐

  1. shell脚本变量的参数

    https://stackoverflow.com/questions/5163144/what-are-the-special-dollar-sign-shell-variables mkdir f ...

  2. win7如何更改语言教程

    一.首先从桌面左下角的开始菜单中找到“控制面板”,然后打开,如下图所示: 打开电脑控制面板 二.进入控制面板之后,我们再进入“时钟.语言和区域”设置,如下图所示: 电脑语言改成英文方法 三.进入电脑语 ...

  3. 设计模式之外观模式(Facade)摘录

    23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...

  4. 关于ping以及TTL的分析

    首先介绍一下ping这个工具 ping [目标] 的意思就是向目标发送几个数据包,之后假设目标接受到一个数据包.那么目标就会向发送ping的主机返回一个数据包 比方上图.我ping了百度的server ...

  5. 微信JSSDK使用指南

        这篇文章主要来说说微信JSSDK的一些配置和微信分享的使用,包括从前端sdk文件引入到server端和微信server的交互. 另外Tangide已经把一些工作做好了.我会简要说一说怎么把它用 ...

  6. 转:js点击事件在ios中失效的3种解决方案

    ios中不允许将点击事件绑定在document或者body上,如果绑定上的话将会失效.解决方案: 例如:  $(document).on('click', '#generate', function ...

  7. [办公应用]word 2007:全屏快捷键,让复制图片保持原样大小(office 全屏快捷键)

    最近同事咨询这两个问题: 1.word 2007内是否有全屏显示的快捷键,这样投影时,就可以快速切换到全屏. 2.从ppt或者excel复制一张较大的图片,word 2007 会默认让复制的图片缩小, ...

  8. Python执行系统命令并获得输出的几种方法

    [root@a upfc]# ./ffmpeg-linux64-v3.3.1 -i a.mp3 ffmpeg version N-86111-ga441aa90e8-static http://joh ...

  9. 玲珑学院OJ 1023 - Magic boy Bi Luo with his excited math problem 树状数组暴力

    分析:a^b+2(a&b)=a+b  so->a^(-b)+2(a&(-b))=a-b 然后树状数组分类讨论即可 链接:http://www.ifrog.cc/acm/probl ...

  10. 网络流之最大流算法(EK算法和Dinc算法)

    最大流 网络流的定义: 在一个网络(有流量)中有两个特殊的点,一个是网络的源点(s),流量只出不进,一个是网络的汇点(t),流量只进不出. 最大流:就是求s-->t的最大流量 假设 u,v 两个 ...