前端的鼠标滑过图片闪光CSS3效果怎么做,基于JS实现网页中的选项卡

vue实现全选、反选功能,vue实现全选

用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他

基本思路

如果父级选中了,那么父级下面的子集全部选中checked=true;

如果子集中选中了一个,那么父级应该被勾选中

如果子集一个都没有选中,那么父级此时应该没有选中

最后提交用户改变后的数组

(大神原谅我的啰嗦哈)

开始上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="css/role.css" rel="external nofollow" >
</head>
<body>
  <div id="content" v-cloak>
  <form @submit.prevent="submit">
    <div class="list" v-for="item in addList">
      <h3 class="title">
         <label for=""><input type='checkbox' class='item-check-btn' v-model="item.checked" @click="selectAll(item)"></label>
        {{item.name}}
      </h3>
        <ul class="menu">
          <li v-for="(s,index) in item.children">
            <label for="">
              <input type='checkbox' :value="index" v-model="s.checked" class='item-check-btn' @click="selectItem(item,s,index)">
            </label>
            {{s.name}}
          </li>
        </ul>
    </div>
    <div class="bottom_btn">
      <input type="submit" value="确认选择" class="btn">
    </div>
  </form>
  </div>

</body>
<script src="js/lib/vue.js"></script>
<script src="1.js"></script>
</html>

这是html结构部分

基本上没有啥好讲的

只能说一句(我曹,v-for和v-model,真他M的方便呀,哈哈哈哈😁)

里面用到v-for嵌套v-for做数据渲染,看效果(效果看起来很low,大神不要在意)

图片 1

下面开始上js代码了

new Vue({
  el: "#content",
  data: {
    addList: [
   {
    "name":"用户管理",
    "checked":true,
    "children":[
    {"name":"添加","checked":true},
    {"name":"删除","checked":false},
    {"name":"修改","checked":true}
    ]
   }
  ]
  },
  methods: {
    selectAll: function(item) {
     //如果父级被选中,那么子集循环,全被给checked=true
      if(item.checked){
          item.children.forEach(function(item){
            item.checked=true;
         });
      }else{
      //相反,如果没有被选中,子集应该全部checked=false
          item.children.forEach(function(item){
        item.checked=false;

       });
      }
    },
  selectItem: function(item,s,index) {
    //父级选中条件
    //子集有选中的,那么父级checked=true
    //some检测的就是有一个满足的就为true
    item.checked=s.checked ? true : item.children.some(a => a.checked);
   },
   submit: function(item,s) {
    //去拿所有的数据,返回给后台
    var formData=this.addList;
    console.log(JSON.stringify(formData));
  }
  }
  });

最后点击改变的结果

图片 2

返回给后台就是this.addList,此时已经是改变的结果

在项目中,后台给我的json就是this.addList的样子

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全…

基于JS实现网页中的选项卡(两种方法),js选项卡

网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里的内容。

方法一:

方法一利用简单的代码即可实现,以下是全部的代码;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content div{display: none;}
      #content div.active{display: block;}
      .show{background: red;}
    </style>
  </head>
  <body>
    <div id="box">
      <ul id="ul1">
        <li>首页</li>
        <li>产品</li>
        <li>新闻</li>
        <li>联系</li>
        <li>我的</li>
      </ul>
      <div id="content">
        <div class="active">
          <ul>
            <li>new1</li>
            <li>new2</li>
            <li>new3</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new4</li>
            <li>new5</li>
            <li>new6</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new7</li>
            <li>new8</li>
            <li>new9</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new10</li>
            <li>new11</li>
            <li>new12</li>
          </ul>
        </div>
          <div>
          <ul>
            <li>new13</li>
            <li>new14</li>
            <li>new15</li>
          </ul>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var odiv=document.getElementById("content").getElementsByTagName("div");
        //alert(odiv.length)
        for(var i=0;i<oli.length;i++){
          oli[i]._index=i;
          oli[i].onclick=function(){
            //alert(i);
            for(i=0;i<oli.length;i++){
              oli[i].className='';
              odiv[i].style.display='none';
            }
            this.className='show';
            odiv[this._index].style.display='block';
          }
        }
      }
    </script>
  </body>
</html>

首先我们在HTML部分定义网页选项卡中的内容。

<div id="box">
      <ul id="ul1"><!--选项卡中的点击部分-->
        <li>首页</li>
        <li>产品</li>
        <li>新闻</li>
        <li>联系</li>
        <li>我的</li>
      </ul>
      <div id="content"> 
        <div class="active"><!--选项卡中要显示和被显示的部分-->
          <ul>
            <li>new1</li>
            <li>new2</li>
            <li>new3</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new4</li>
            <li>new5</li>
            <li>new6</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new7</li>
            <li>new8</li>
            <li>new9</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new10</li>
            <li>new11</li>
            <li>new12</li>
          </ul>
        </div>
          <div>
          <ul>
            <li>new13</li>
            <li>new14</li>
            <li>new15</li>
          </ul>
        </div>
      </div>
    </div>

CSS部分对HTML中的内容进行修饰:

<style type="text/css">
      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content div{display: none;}
      #content div.active{display: block;}
      .show{background: red;}
    </style>

最后是最重要的js部分:

<script type="text/javascript">
      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素
        //alert(odiv.length)
        for(var i=0;i<oli.length;i++){
          oli[i]._index=i;
          oli[i].onclick=function(){
            //alert(i);
            for(i=0;i<oli.length;i++){
              oli[i].className='';
              odiv[i].style.display='none';
            }
            this.className='show';
            odiv[this._index].style.display='block';
          }
        }
      }
    </script>

JS语句中的第一个for循环是为了取得所有的选项卡中的点击部分;因为I这个变量在下面的事件函数中无法访问到,所以每次点击时,i变量循环到oli.length值。因此将i的值交给一个我们自定义的元素属性上来保存循环中i的值,供下面使用。即:oli[i]._index=i;

添加点击函数后,第二个for循环是为了把所有的oli的className改为“空”和所有的odiv的style为display=’none’;循环结束后,在给当前点击的这个oli添加className和下面相应的odiv的style为display=’block’;

以下是运行的结果:

在编写程序时一定要注意,选项卡中的点击部分即:li的数量(JS里oli.length)要和下面ID为content的div里包含的div数量(JS里odiv.length)相同,我在编写程序时就因为oli.length与odiv.length不相等,导致程序报错,但是好长时间都找不到错误;总而言之还是要多多细心。

方法二:

方法一适用于选项卡比较少的情况,但如果选项卡内容较多时我们要用到这种方法,第二种方法运用到了这周我们老师讲的一个在JS种比较重要的知识点:自运行函数

(function a(){
  //函数里的内容      
      })(参数);

定义函数a();给整个函数带上括号,后面的括号为输入参数;

以下为方法二自运行函数的程序:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多个tab选项卡</title>
    <script>
      window.onload = function() {
        tab("tabMain", "click");
        tab("tabMain1", "click");
        tab("tabMain2", "click");
        tab("tabMain4", "click");
         function tab(id, event) {
        var oDiv = document.getElementById(id);
        var oBtn = oDiv.getElementsByTagName("li");
        var oBox = oDiv.getElementsByTagName("div");
        for(var i = 0; i < oBtn.length; i++) {
          //console.log(i)
          (function(index) {//自执行函数
            oBtn[index].addEventListener(event, function() {
              for(var i = 0; i < oBtn.length; i++) {
                oBtn[i].className = '';
                oBox[i].className = 'tabSide';
              }
              this.className = 'active';
              oBox[index].className = 'active';
            });//添加事件监听
          })(i)
        }
      }
      }
    </script>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .tabMenu {
        width: 300px;
        margin: 50px auto 0 auto;
      }
      .tabMenu ul {
        display: block;
        overflow: hidden;
        width: 300px;
        height: 40px;
        background: #eee;
      }
      .tabMenu ul li {
        cursor: pointer;
        display: block;
        float: left;
        width: 100px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
      }
      .tabMenu ul li.active {
        background: #f00;
        color: #fff;
      }
      .tabMenu .tabSide {
        display: none;
        padding: 10px;
        line-height: 20px;
        width: 278px;
        border: solid 1px #eee;
      }
      .tabMenu div.active {
        display: block;
        padding: 10px;
        line-height: 20px;
        width: 278px;
        border: solid 1px #eee;
      }
    </style>
  </head>
  <body>
    <div id="tabMain" class="tabMenu">
      <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">内容1</div>
      <div class="tabSide">内容2</div>
      <div class="tabSide">内容3</div>
    </div>
    <div id="tabMain1" class="tabMenu">
      <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">内容1</div>
      <div class="tabSide">内容2</div>
      <div class="tabSide">内容3</div>
    </div>
    <div id="tabMain2" class="tabMenu">
        <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">内容1</div>
      <div class="tabSide">内容2</div>
      <div class="tabSide">内容3</div>
    </div>
      <div id="tabMain4" class="tabMenu">
        <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">内容1</div>
      <div class="tabSide">内容2</div>
      <div class="tabSide">内容3</div>
    </div>
  </body>
</html>

和方法一相似先写HTML里的内容,CSS部分对HTML进行修饰,我们直接来看JS部分;

<script>
      window.onload = function() {
        tab("tabMain", "click");
        tab("tabMain1", "click");
        tab("tabMain2", "click");
        tab("tabMain4", "click");
         function tab(id, event) {
        var oDiv = document.getElementById(id);
        var oBtn = oDiv.getElementsByTagName("li");
        var oBox = oDiv.getElementsByTagName("div");
        for(var i = 0; i < oBtn.length; i++) {
          //alert(i);
          (function(index) {//自执行函数
            oBtn[index].addEventListener(event,   function() {
              for(var i = 0; i < oBtn.length; i++) {
                oBtn[i].className = '';
                oBox[i].className = 'tabSide';
              }
              this.className = 'active';
              oBox[index].className = 'active';
            });//添加事件监听
          })(i)
        }
      }
      }
    </script>

通过添加事件和自运行函数完成多个选项卡。

网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里…

前端的鼠标滑过图片闪光CSS3效果怎么做?,滑过css3

两三年前鸡哥还是个学生的时候做了本站的前端页面,其实现在这个站有很多前身,有机会发个帖子给大家看看鸡哥以前的年少无知不懂事的杀马特作品…
好了,今天聊聊怎么做鼠标滑过图片的时候有反光闪光的效果,这个效果还是在逛京东的时候无意间发现的,大家看看下边的成品演示:不然说了半天还不知道要做啥效果可尴尬了,哦对了,这种情况叫做什么?
 “尬聊”

图片 3

大家看到了吧,今天文章就是介绍这种效果怎么实现
           –
Ps:有一点html基础的人会很容易看明白,如果没有基础的人可能会看起来比较吃力。
先把代码贴出来吧:

<div><a href="javascript:;"><img src="aaa.jpg"></a></div>

上边这是html里边的代码,没多少,还是比较简单的 ,重点是后边的css代码
要仔细看和分析 参了很多css3的知识点

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before{transition: all 0.5s;left:850px;}               /css3过度样式  before离左边850像素
div a:before{content: "";                  
    position: absolute;
    width: 50px;
    height: 600px;
    top: 0;
    left: -130px;
    background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);}              /这里是给反光加样式的css3代码,就不一一解释了

上边就是css样式代码,鸡哥只是简单的写了个demo给大家演示一下,其实后边的反光样式代码也是鸡哥复制的,好久没写了忘完了,只能复制了,大家哪里不明白可以百度,把不明白的代码百度一下就明白了。

具体的思想理论就是给a标签上方加了一个透明层,通过定位压在a标签上,这个透明层就是上边代码中的before,当然也可以是其他随便一个标签,每个人习惯不一样,然后通过css3的鼠标经过过度样式让这个透明层从做向右滑动就实现了这种反光的效果。

好了具体方法已经给大家分享出来了,如果要用到自己的项目中还要有点html+css的基础的,不然寸步难行。

下边我把刚刚写的demo打包了一下,如果不太明白的小伙伴可以下载来仔细研究。

原文链接:前端的鼠标滑过图片闪光CSS3效果怎么做?

两三年前鸡哥还是个学生的时候做了本站的前端页面,其实现在这个站有很多前身,有…

发表评论

电子邮件地址不会被公开。 必填项已用*标注