zoukankan      html  css  js  c++  java
  • vue移动端 滚动 鼠标按下效果

    <div class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)" @touchend="touchend(item.RowID)" v-for="(item,index) in dataList" :key="item.RowID" @click.stop="onview(item.RowID)">
    ***
    </div>
        touchstart(id){
          document.getElementById(id).classList.add('item-touch');
          // console.log('touchstart');
        },
        touchend(id){
          // console.log('touchend');
          document.getElementById(id).classList.remove('item-touch');
        },
    .item {
      margin: 5px;
      border-radius: 10px;
      background: white;
      border-style: ridge;
      border-width: 2px;
      border-color: white;
      border-left-style: none;
      border-right-style: none;
      
      &.item-touch{
        background: #eeeeee;
      }
    }

    //添加点击效果

        function FunDJXG(o) {
            o.on("touchstart", function () {
                $(this).addClass("clickResponse");
            });
            o.on("touchend", function () {
                $(this).removeClass("clickResponse");
            });
        },

    js调用:

        //添加点击效果
        var clickResp = $(".jia,.jian,.Car_Area,.History");
        FunDJXG(clickResp);

    样式css:

    .clickResponse { background-color: #227dc3; opacity: 0.5; }

    慎于行,敏于思!GGGGGG
  • 相关阅读:
    前端面试:Vue.js常见的问题
    Web前端攻击方式及防御措施
    JavaScript代码规范
    bind、apply、call的理解
    Markdown标记语言简介及使用方法
    github个人主页的建立
    深度理解“高内聚低耦合”
    私有云与公有云的区别
    响应式网页设计
    redis和mongodb比较
  • 原文地址:https://www.cnblogs.com/GarsonZhang/p/10521267.html
Copyright © 2011-2022 走看看