20190313

swiper参数

let swiper1 = new Swiper('.swiper-container', {
      autoplay: 3000,
      observer:true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents:true,//修改swiper的父元素时，自动初始化swiper
      loop: true, //  无限循环
      autoplay: 1000,
        speed: 3000,
        slidesPerView: 3,  // 页面显示3个
        slidesPerGroup: 3, // 每次轮播3个
      onSetTransition: function (swiper) {
          swiper.disableTouchControl();   //  阻止触摸滑动
        },
    });

轮播隐藏后再显示需要重新初始化轮播  重新 new Swiper()

View Code

vue.component() 要先定义，再new Vue()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <button-counter></button-counter>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script>

  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      };
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  });
  // 全局组件要在vue实例化之前先定义
  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello world'
    },
  });

</script>

View Code

给一组div加样式

<div class='abc bbb0'></div>
<div class='abc bbb1'></div>

let ps = document.querySelectorAll('.abc'); 
Array.from(ps).forEach()

<template>
  <div>
    <p v-for="(val,key) in list" class="abc">{{val.name}}</p>
  </div>
</template>
<script>

  export default {
    data () {
      return {
        list: [{name: 'kang', age: 12}, {name: 'jia', age: 13}, {name: 'we', age: 13}]
      };
    },
    mounted () {
      let ps = document.querySelectorAll('.abc'); //  Array.from()
      Array.from(ps).forEach(function (p, key) {    // 数组才有 forEach() 功能
        console.log('p: ' + p.innerHTML);
        p.className += ' bbb' + key;
      });
    },
  };
</script>

View Code

font-face

@font-face{
　　font-family: "自己的字体名字，可以随便起，如source,可以不和字体文件名相同";
　　src: url('下载的字体路径');
}
注意这样只是把字体定义好了，并没有应用到任何的元素上。只要在任何的html元素上指定font-family:"自己定义的字体名" 即可。
 p{
    font-family:'source'
  }

View Code

左右无缝匀速轮播

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动——左右</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
    <style type="text/css">
        #scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;}
        .btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat -70px -69px;position:absolute;top:20px;left:1px;z-index:1;}
        .btn_left:hover{background:url(images/btn.jpg) no-repeat -70px 0;}
        .btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;}
        .btn_right:hover{background:url(images/btn.jpg) no-repeat 1px 0;}
        #scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0 auto;}
        #scroll ul{position:absolute;}
        #scroll li{float:left;width:182px;height:108px;text-align:center;}
        #scroll li a:hover{position:relative;top:2px;}
    </style>
</head>
<body>
<div id="scroll">
    <a href="javascript:;" class="btn_left"></a>
    <a href="javascript:;" class="btn_right"></a>
    <div class="content">
        <ul>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('scroll');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oDiv.getElementsByTagName('li');
    var aBtn = oDiv.getElementsByTagName('a');
    var speed = -1;
    var timer = null;
    oUl.innerHTML += oUl.innerHTML;
    oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
    timer = setInterval(function(){
      oUl.style.left = oUl.offsetLeft + speed + 'px';
      if(oUl.offsetLeft < - oUl.offsetWidth / 2){
        oUl.style.left = '0';
      }else if(oUl.offsetLeft > 0){
        oUl.style.left = - oUl.offsetWidth / 2 + 'px';
      }
    },30);
    aBtn[0].onclick = function(){
      speed = -1;
    };
    aBtn[1].onclick = function(){
      speed = 1;
    };
    oUl.onmouseover = function(){
      clearInterval(timer);
    };
    oUl.onmouseout = function(){
      timer = setInterval(function(){
        oUl.style.left = oUl.offsetLeft + speed + 'px';
        if(oUl.offsetLeft < -oUl.offsetWidth / 2){
          oUl.style.left = '0';
        }else if(oUl.offsetLeft > 0){
          oUl.style.left = - oUl.offsetWidth / 2 + 'px';
        }
      },30);
    };
  };
</script>

View Code

显示遮罩层时阻止页面滚动

// 显示遮罩层时阻止页面滚动

let top = 0;

/**
 *将页面固定视窗后，内容会回头最顶端，这里我们需要记录一下，同步top值。
 * @param isFixed
 */
function stopBodyScroll(isFixed) {
  let bodyEl = document.body;
  if (isFixed) {
    top = window.scrollY;

    bodyEl.style.position = 'fixed'
    bodyEl.style.top = -top + 'px'
  } else {
    bodyEl.style.position = 'static';
    bodyEl.style.top = 'unset';

    window.scrollTo(0, top); // 回到原先的top
  }
}

stopBodyScroll(true) // 固定背景
stopBodyScroll(false) // 取消固定

// 方法二  如果遮罩有滚动条，则方法二无效，只能用方法一
function moveFn(e){
  e.preventDefault()
}
s.$refs.dom.addEventListener('touchmove',s.moveFn,false)  // 阻止背景滚动
this.$refs.dom.removeEventListener('touchmove',this.moveFn,false)  // 删除监听要用外部函数，w3c上有指出

// 方法三 ，可用于pc
/*
 添加移除样式
body{
  overflow:hidden;
  height:100%;
}
*/
// 在某些机型下，你可能还需要给根节点添加样式：overflow: hidden;

//链接： https://juejin.im/post/5a27cad56fb9a045186a9d94

View Code

三种布局左图标右文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body, div, p, ul, li, img {
        margin: 0;
        padding: 0;
    }

    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .a {
        border: 1px solid red;
        font-size: 0;
        line-height: 100px;
        height: 100px;
        width: 200px;
    }

    .a-p {
        font-size: 14px;
        vertical-align: middle;
        display: inline-block;
    }

    .a-img {
        margin-right: 30px;
        vertical-align: middle;
    }

    .b {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        border: 1px solid red;
        width: 300px;
        margin: 0 auto;
    }

    .c {
        border: 1px solid red;
        height: 200px;
    }

    .c-p {
        float: left;
        vertical-align: middle;
        position: relative;
        top: 10px;
    }

    .c-img {
        float: left;
        vertical-align: middle;
    }
</style>
<body>
<div class="a">
    <img class="a-img" src="http://placekitten.com/200/198" alt="">
    <p class="a-p">我的money</p>
</div>

<div class="b">
    <img src="http://placekitten.com/200/198" alt="">
    <p>我的money</p>
</div>

<div class="c">
    <img class="c-img" src="http://placekitten.com/200/198" alt="">
    <p class="c-p">我的money</p>
</div>
</body>
</html>

View Code

图片优化

mdn: preload、dns-prefetch  手机不太支持

css预加载【样式背景图】
js预加载【new Image().src='xxx'】
js懒加载【img data-src='xx' src='loading.png' 滚动监听显示 scrollTop+innerHeight> offsetHeight】
https://segmentfault.com/a/1190000011515334

图片从模糊到清晰的demo
http://www.fly63.com/article/detial/359

字体库

https://www.iconfont.cn/  可上传自定义小图标导出字体库
https://juejin.im/post/59a7725b6fb9a02497170459#heading-13

可编辑html

可以在控制台直接用$()
控制台document.body.contentEditable=true   可编辑html

import zepto

npm i zepto-webpack 
只加了一行代码 module.exports=widnow.Zepto;

节流，可用定时器模拟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 20000px;width:100%;background: aqua;"></div>
<script>
  let _lastTime = null;  // 变量要移到函数外
  function throttle (fn, gapTime) {
    return function () {
      let _nowTime = +new Date();
      if (_nowTime - _lastTime > gapTime || !_lastTime) {
        fn();
        _lastTime = _nowTime;
      }
    };
  }

  let fn = () => {
    console.log('boom');
  };

  // setInterval(throttle(fn, 1000), 10);   节流，一定时间内执行一次

  let timer = null;
  window.addEventListener('scroll', function () {
    console.log(1);
    clearTimeout(timer);
    timer = setTimeout(function () {   // 可用定时器模拟
      console.log(2);
    }, 1000);
    /*  throttle(function () {         // 节流
        console.log(123);
      }, 1000)()*/
  }, false);

</script>
</body>
</html>

View Code

微信清缓存

debugx5.qq.com

函数参数对象解构赋值

function test ({name}) {  // 对象解构赋值
  console.log(name + ' ,how do you do!');
}

test({
  name: 'jia'
});

三种绝对定位居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{

        position: absolute;
        border: 1px solid red;
        text-align: center;
        width:200px;
    }
    .a{
        left:50%;
        margin-left: -100px;
    }
    .b{
        top:100px;
        left:50%;
        transform: translate3d(-50%,0,0); /* 原理跟a一致*/
    }
    .c{
        top:200px;
        left:0;
        right:0;
        margin:0 auto;
    }
</style>
<body>
  <p class="a">绝对定位的居中</p>
  <p class="b">绝对定位的居中2</p>
  <p class="c">绝对定位的居中3</p>
</body>
</html>

View Code

posted @ 2019-03-15 10:59 gyz418 阅读(127) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

gyz418

20190313

公告