关于css和html(二)

背景图

在浏览器窗口缩小时，可以设置body，html的最小宽度

动画

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

animation-name  规定需要绑定到选择器的 keyframe 名称。。
animation-duration  规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

使用简写属性，将动画与 div 元素绑定：
使用@keyframs和animation,绑定元素动画

@keyframs

.btn_wish{
    cursor: pointer;
    animation: stat .5s infinite alternate;
    -webkit-animation: stat .5s infinite alternate;
    -moz-animation: stat .5s infinite alternate;
    -ms-animation: stat .5s infinite alternate;
}

@-moz-keyframes stat{
    from{transform: scale(0.95);}
    to{transform: scale(1.0);}
}
@-webkit-keyframes stat{
    from{transform: scale(0.95);}
    to{transform: scale(1.0);}
}

设置动画播放次数，可以设置成无限次，让元素一直运动。

css画六边形

offset

$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

$(selector).offset()

返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
语法

复制内容到剪贴板

引入
然后在js中写出兼容代码
复制兼容

   var ClipBoard = function(obj){
    this.handlerID = obj.handlerID || null;
    this.textID = obj.textID || null;
    this.type = obj.type || 'copy';
    this.isAttr = obj.isAttr || false;
    this.isPlugin = true;
    this.isActive = false;

    var ua = window.navigator.userAgent;
    var is_IE = ua.match(/(rv:|msie )\d+/i);
    var IE_Version = is_IE ? parseInt(is_IE[0].split(/:| /g)[1]) : 9;
    if(IE_Version <= 8){
        this.isPlugin = false;
    }
    var handlerObj = document.getElementById(obj.handlerID);
    if(typeof this.type === 'string'){
        handlerObj.setAttribute('data-clipboard-action',this.type)
    }else{
        throw error('type类型错误！');
    }
    if(!obj.isAttr && obj.textID){
        handlerObj.setAttribute('data-clipboard-target','#'+obj.textID);
    }
}
   ClipBoard.prototype.attach = function(){
    if(this.isActive){ // 对象已经被实例化
        return;
    }
    var tip = '复制';
    if(this.type === 'cut'){
        tip = '剪切';
    }
    this.isActive = true;
    if(this.isPlugin){
        var clip = new Clipboard('#'+this.handlerID);
        clip.on('success', function(e) {
            alert(tip+'成功，可通过Ctrl+V进行粘贴！');
        });
        clip.on('error', function(e) {
            alert(e.action+'操作失败！');
        });
    }else if(window.attachEvent){
        var self = this;
        var handlerObj = document.getElementById(this.handlerID);
        handlerObj.attachEvent('onclick',function(){
            var text = '';
            if(self.isAttr){// 复制属性值
                text = handlerObj.getAttribute('data-clipboard-text');
            }else{
                var textObj = document.getElementById(self.textID);
                text = textObj.value || textObj.innerHTML;
            }
            window.clipboardData.setData('Text',text);
            alert(tip+'成功，可通过Ctrl+V进行粘贴！');
        });
    }else{
            alert('浏览器版本过低，不支持该插件！')
    }
}

    var c1 = new ClipBoard({
        handlerID: 'Copy_btn1',  //点击的那个按钮
        textID: 'card_num',    //要复制的文本
        isAttr: false,
        type:'copy'
    });
    c1.attach();
    var c2 = new ClipBoard({
        handlerID: 'Copy_btn2',
        textID: 'card_pass',
        isAttr: false,
        type:'copy'
    });
    c2.attach();
    var c3 = new ClipBoard({
        handlerID: 'Copy_btn3',
        textID: 'card_num1',
        isAttr: false,
        type:'copy'
    });
    c3.attach();
    var c4 = new ClipBoard({
        handlerID: 'Copy_btn4',
        textID: 'card_pass1',
        isAttr: false,
        type:'copy'
    });
    c4.attach();

百度分享