标签归档：JavaScript

PHP+Javascript实现拖动滑块完成拼图验证码

发表评论

下载源码 or 查看演示

github地址：https://github.com/binwind8/tncode

重要的文件：

1、tncode.js

/*! tncode 1.2 author:weiyingbin email:277612909@qq.com
//@ object webiste: http://www.39gs.com/archive/259.html
//@ https://github.com/binwind8/tncode
*/
if(!document.getElementByClassName){
    function hasClass(elem, cls) {
      cls = cls || '';
      if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
      var ret = new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
      return ret;
    }
    document.getElementByClassName = function(className,index){
        var nodes=document.getElementsByTagName("*");//获取页面里所有元素，因为他会匹配全页面元素，所以性能上有缺陷，但是可以约束他的搜索范围；
        var arr=[];//用来保存符合的className；
        for(var i=0;i<nodes.length;i++){
            if(hasClass(nodes[i],className)) arr.push(nodes[i]);
        }
        if(!index)index=0;
        return index==-1?arr:arr[index];
    };
    function addClass( elements,cName ){
       if( !hasClass( elements,cName ) ){
          elements.className += " " + cName;
       };
    }
    function removeClass( elements,cName ){
       if( hasClass( elements,cName ) ){
          elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换
       };
    }
}

function appendHTML(o,html) {
    var divTemp = document.createElement("div"), nodes = null
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    o.appendChild(fragment);
    nodes = null;
    fragment = null;
};



var _ajax = function() {};
_ajax.prototype = {
    request: function(method, url, callback, postVars) {
        var xhr = this.createXhrObject()();
        xhr.onreadystatechange = function() {
            if (xhr.readyState !== 4) return;
            (xhr.status === 200) ?
                callback.success(xhr.responseText, xhr.responseXML) :
                callback.failure(xhr,status);
        };
        if (method !== "POST"&&postVars) {
            url += "?" + this.JSONStringify(postVars);
            postVars = null;
        }
        xhr.open(method, url, true);
        xhr.send(postVars);
    },
    createXhrObject: function() {
        var methods = [
            function() { return new XMLHttpRequest(); },
            function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
            function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
        ],
        i = 0,
        len = methods.length,obj;
        for (; i < len; i++) {
            try {
                methods[i];
            } catch(e) {
                continue;
            }
            this.createXhrObject = methods[i];
            return methods[i];
        }
        throw new Error("ajax created failure");
    },
    JSONStringify: function(obj) {
        return JSON.stringify(obj).replace(/"|{|}/g, "")
                    .replace(/b:b/g, "=")
                    .replace(/b,b/g, "&");
    }
};


var tncode = {
    _obj:null,
    _tncode:null,
    _img:null,
    _img_loaded:false,
    _is_draw_bg:false,
    _is_moving:false,
    _block_start_x:0,
    _block_start_y:0,
    _doing:false,
    _mark_w:50,
    _mark_h:50,
    _mark_offset:0,
    _img_w:240,
    _img_h:150,
    _result:false,
    _err_c:0,
    _onsuccess:null,
    _bind:function(elm,evType,fn){
        //event.preventDefault();
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn);//DOM2.0
            return true;
        }else if (elm.attachEvent) {
            var r = elm.attachEvent(evType, fn);//IE5+
            return r;
        }
    },
    _block_start_move:function(e){
        if(tncode._doing||!tncode._img_loaded){
            return;
        }
        e.preventDefault();
        var theEvent = window.event || e;
        if(theEvent.touches){
            theEvent = theEvent.touches[0];
        }

        console.log("_block_start_move");

        var obj = document.getElementByClassName('slide_block_text');
        obj.style.display="none";
        tncode._draw_bg();
        tncode._block_start_x = theEvent.clientX;
        tncode._block_start_y = theEvent.clientY;
        tncode._doing = true;
        tncode._is_moving = true;
    },
    _block_on_move:function(e){
        if(!tncode._doing)return true;
        if(!tncode._is_moving)return true;
        e.preventDefault();
        var theEvent = window.event || e;
        if(theEvent.touches){
            theEvent = theEvent.touches[0];
        }
        tncode._is_moving = true;
        console.log("_block_on_move");
                //document.getElementById('msg').innerHTML = "move:"+theEvent.clientX+";"+theEvent.clientY;
        var offset = theEvent.clientX - tncode._block_start_x;
        if(offset<0){
            offset = 0;
        }
        var max_off = tncode._img_w - tncode._mark_w;
        if(offset>max_off){
            offset = max_off;
        }
        var obj = document.getElementByClassName('slide_block');

        obj.style.cssText = "transform: translate("+offset+"px, 0px)";
        tncode._mark_offset = offset/max_off*(tncode._img_w-tncode._mark_w);
        tncode._draw_bg();
        tncode._draw_mark();
    },
    _block_on_end:function(e){
        if(!tncode._doing)return true;
        e.preventDefault();
        var theEvent = window.event || e;
        if(theEvent.touches){
            theEvent = theEvent.touches[0];
        }
        console.log("_block_on_end");
        tncode._is_moving = false;
        tncode._send_result();
    },
    _send_result:function(){
        var haddle = {success:tncode._send_result_success,failure:tncode._send_result_failure};
        tncode._result = false;
        var re = new _ajax();
        re.request('get',tncode._currentUrl().replace('houtai/assets/js', 'config/libs')+'tn_check.php?tn_r='+tncode._mark_offset,haddle);
    },
    _send_result_success:function(responseText,responseXML){
        tncode._doing = false;
        if(responseText=='ok'){
            tncode._showmsg('验证成功',1);
            tncode._result = true;
            document.getElementByClassName('hgroup').style.display="block";
            //setTimeout(tncode.hide,2500);
            setTimeout(function(){
                tncode.hide();
                tncode._tncode.style.backgroundColor = "#52d192";
                tncode._tncode.style.border = "1px solid #52d192";
                tncode._tncode.innerHTML = '验证成功';
            },2500);
            if(tncode._onsuccess){
                tncode._onsuccess();
            }
        }else{
            var obj = document.getElementById('tncode_div');
            addClass( obj,'dd');
            setTimeout(function(){
                removeClass( obj,'dd');
            },200);
            tncode._result = false;
            tncode._showmsg('验证失败');
            tncode._err_c++;
            if(tncode._err_c>5){
                tncode.refresh();
            }
        }
    },
    _send_result_failure:function(xhr,status){

    },
    _draw_fullbg:function(){
        var canvas_bg = document.getElementByClassName('tncode_canvas_bg');
        var ctx_bg = canvas_bg.getContext('2d');
        ctx_bg.drawImage(tncode._img, 0, tncode._img_h*2, tncode._img_w, tncode._img_h, 0, 0, tncode._img_w, tncode._img_h);
    },
    _draw_bg:function(){
        if(tncode._is_draw_bg){
            return;
        }
        tncode._is_draw_bg = true;
        var canvas_bg = document.getElementByClassName('tncode_canvas_bg');
        var ctx_bg = canvas_bg.getContext('2d');
        ctx_bg.drawImage(tncode._img, 0, 0, tncode._img_w, tncode._img_h, 0, 0, tncode._img_w, tncode._img_h);
    },
    _draw_mark:function(){
        var canvas_mark = document.getElementByClassName('tncode_canvas_mark');
        var ctx_mark = canvas_mark.getContext('2d');
        //清理画布
        ctx_mark.clearRect(0,0,canvas_mark.width,canvas_mark.height);
        ctx_mark.drawImage(tncode._img, 0, tncode._img_h, tncode._mark_w,tncode._img_h,tncode._mark_offset,0,tncode._mark_w, tncode._img_h);
        var imageData = ctx_mark.getImageData(0, 0, tncode._img_w, tncode._img_h);
          // 获取画布的像素信息
          // 是一个一维数组，包含以 RGBA 顺序的数据，数据使用  0 至 255（包含）的整数表示
          // 如：图片由两个像素构成，一个像素是白色，一个像素是黑色，那么 data 为
          // [255,255,255,255,0,0,0,255]
          // 这个一维数组可以看成是两个像素中RBGA通道的数组的集合即:
          // [R,G,B,A].concat([R,G,B,A])
        var data = imageData.data;
        //alert(data.length/4);
        var x = tncode._img_h,y=tncode._img_w;
        for(var j = 0; j < x; j++) {
            var ii = 1,k1=-1;
            for(var k=0;k<y&&k>=0&&k>k1;){
              // 得到 RGBA 通道的值
                var i = (j*y+k)*4;
                k+=ii;
                var r = data[i]
                  , g = data[i+1]
                  , b = data[i+2];
                // 我们从最下面那张颜色生成器中可以看到在图片的右上角区域，有一小块在
                // 肉眼的观察下基本都是白色的，所以我在这里把 RGB 值都在 245 以上的
                // 的定义为白色
                // 大家也可以自己定义的更精确，或者更宽泛一些
                if(r+g+b<200) data[i+3] = 0;
                else{
                    var arr_pix = [1,-5];
                    var arr_op = [250,0];
                    for (var i =1; i<arr_pix[0]-arr_pix[1]; i++) {
                        var iiii = arr_pix[0]-1*i;
                        var op = parseInt(arr_op[0]-(arr_op[0]-arr_op[1])/(arr_pix[0]-arr_pix[1])*i);
                        var iii = (j*y+k+iiii*ii)*4;
                        data[iii+3] = op;
                    }
                    if(ii==-1){
                        break;
                    }
                    k1 = k;
                    k = y-1;
                    ii = -1;
                };
            }
        }
        ctx_mark.putImageData(imageData, 0, 0);
    },
    _reset:function(){
        tncode._mark_offset = 0;
        tncode._draw_bg();
        tncode._draw_mark();
        var obj = document.getElementByClassName('slide_block');
        obj.style.cssText = "transform: translate(0px, 0px)";
    },
    show:function(){
        var obj = document.getElementByClassName('hgroup');
        if(obj){
            obj.style.display="none";
        }
        tncode.refresh();
        tncode._tncode = this;
        document.getElementById('tncode_div_bg').style.display="block";
        document.getElementById('tncode_div').style.display="block";
    },
    hide:function(){
        document.getElementById('tncode_div_bg').style.display="none";
        document.getElementById('tncode_div').style.display="none";
    },
    _showmsg:function(msg,status){
        if(!status){
            status = 0;
            var obj = document.getElementByClassName('tncode_msg_error');
        }else{
            var obj = document.getElementByClassName('tncode_msg_ok');
        }
        obj.innerHTML = msg;
        var setOpacity = function (ele, opacity) {
            if (ele.style.opacity != undefined) {
                ///兼容FF和GG和新版本IE
                ele.style.opacity = opacity / 100;

            } else {
                ///兼容老版本ie
                ele.style.filter = "alpha(opacity=" + opacity + ")";
            }
        };
        function fadeout(ele, opacity, speed) {
            if (ele) {
                var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100;
                v < 1 && (v = v * 100);
                var count = speed / 1000;
                var avg = (100 - opacity) / count;
                var timer = null;
                timer = setInterval(function() {
                    if (v - avg > opacity) {
                        v -= avg;
                        setOpacity(ele, v);
                    } else {
                        setOpacity(ele, 0);
                        if(status==0){
                            tncode._reset();
                        }
                        clearInterval(timer);
                    }
                }, 100);
            }
        }
        function fadein(ele, opacity, speed) {
            if (ele) {
                var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity;
                v < 1 && (v = v * 100);
                var count = speed / 1000;
                var avg = count < 2 ? (opacity / count) : (opacity / count - 1);
                var timer = null;
                timer = setInterval(function() {
                    if (v < opacity) {
                        v += avg;
                        setOpacity(ele, v);
                    } else {
                        clearInterval(timer);
                        setTimeout(function() {fadeout(obj, 0, 6000);},1000);
                    }
                }, 100);
            }
        }

        fadein(obj, 80, 4000);
    },
    _html:function(){
        var d = document.getElementById('tncode_div_bg');
        if(d)return;
        var html = '<div class="tncode_div_bg" id="tncode_div_bg"></div><div class="tncode_div" id="tncode_div"><div class="loading">加载中</div><canvas class="tncode_canvas_bg"></canvas><canvas class="tncode_canvas_mark"></canvas><div class="hgroup"></div><div class="tncode_msg_error"></div><div class="tncode_msg_ok"></div><div class="slide"><div class="slide_block"></div><div class="slide_block_text">拖动左边滑块完成上方拼图</div></div><div class="tools"><div class="tncode_close"></div><div class="tncode_refresh"></div><div class="tncode_tips"></div></div></div>';
        var bo = document.getElementsByTagName('body');
        appendHTML(bo[0],html);
    },
    _currentUrl:function(){
        var list = document.getElementsByTagName('script');
        for (var i in list) {
            var  d=list[i];
            if(d.src.indexOf('tn_code')!==-1){//js文件名一定要带这个字符
                var arr = d.src.split('tn_code');
                return arr[0];
            }
        }
    },
    refresh:function(){
        var isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
        var _this = this;
        tncode._err_c = 0;
        tncode._is_draw_bg = false;
        tncode._result = false;
        tncode._img_loaded = false;
        var obj = document.getElementByClassName('tncode_canvas_bg');
        obj.style.display="none";
        obj = document.getElementByClassName('tncode_canvas_mark');
        obj.style.display="none";
        tncode._img = new Image();
        var img_url = tncode._currentUrl().replace('houtai/assets/js', 'config/libs')+"tncode.php?t="+Math.random();
        if(!isSupportWebp){//浏览器不支持webp
            img_url+="&nowebp=1";
        }
        tncode._img.src = img_url;
        tncode._img.onload = function(){
            tncode._draw_fullbg();
            var canvas_mark = document.getElementByClassName('tncode_canvas_mark');
            var ctx_mark = canvas_mark.getContext('2d');
            //清理画布
            ctx_mark.clearRect(0,0,canvas_mark.width,canvas_mark.height);
            tncode._img_loaded = true;
            obj = document.getElementByClassName('tncode_canvas_bg');
            obj.style.display="";
            obj = document.getElementByClassName('tncode_canvas_mark');
            obj.style.display="";
        };
        //alert("Hong Kong ForHarvest Technology and Culture Development Co. Limited".length);
        obj = document.getElementByClassName('slide_block');
        obj.style.cssText = "transform: translate(0px, 0px)";
        obj = document.getElementByClassName('slide_block_text');
        obj.style.display="block";
    },
    init:function(){
        var _this = this;
        if(!tncode._img){
            tncode._html();
            var obj = document.getElementByClassName('slide_block');

            tncode._bind(obj,'mousedown',_this._block_start_move);
            tncode._bind(document,'mousemove',_this._block_on_move);
            tncode._bind(document,'mouseup',_this._block_on_end);

            tncode._bind(obj,'touchstart',_this._block_start_move);
            tncode._bind(document,'touchmove',_this._block_on_move);
            tncode._bind(document,'touchend',_this._block_on_end);

            var obj = document.getElementByClassName('tncode_close');
            tncode._bind(obj,'touchstart',_this.hide);
            tncode._bind(obj,'click',_this.hide);
            var obj = document.getElementByClassName('tncode_refresh');

            tncode._bind(obj,'touchstart',_this.refresh);
            tncode._bind(obj,'click',_this.refresh);


            var objs = document.getElementByClassName('tncode',-1);
            for (var i in objs) {
                var o = objs[i];
                o.innerHTML = '点击按钮进行验证';
                tncode._bind(o,'touchstart',_this.show);
                tncode._bind(o,'click',_this.show);
            }
        }
    },
    result:function(){
        return tncode._result;
    },
    onsuccess:function(fn){
        tncode._onsuccess = fn;
    }
};
var $TN = tncode;
var _old_onload = window.onload;
window.onload = function(){
    if(typeof _old_onload == 'function'){
        _old_onload();
    }
    tncode.init();
};

2、TnCode.class.php

<?php
/*! tncode 1.2 author:weiyingbin email:277612909@qq.com
//@ object webiste: http://www.39gs.com/archive/259.html
//@ https://github.com/binwind8/tncode
*/
class TnCode
{
    var $im = null;
    var $im_fullbg = null;
    var $im_bg = null;
    var $im_slide = null;
    var $bg_width = 240;
    var $bg_height = 150;
    var $mark_width = 50;
    var $mark_height = 50;
    var $bg_num = 6;
    var $_x = 0;
    var $_y = 0;
    //容错象素 越大体验越好，越小破解难道越高
    var $_fault = 3;
    function __construct(){
        //ini_set('display_errors','On');
        //
        error_reporting(0);
        if(!isset($_SESSION)){
            session_start();
        }
    }
    function make(){
        $this->_init();
        $this->_createSlide();
        $this->_createBg();
        $this->_merge();
        $this->_imgout();
        $this->_destroy();
    }

    function check($offset=''){
        if(!$_SESSION['tncode_r']){
            return false;
        }
        if(!$offset){
            $offset = $_REQUEST['tn_r'];
        }
        $ret = abs($_SESSION['tncode_r']-$offset)<=$this->_fault;
        if($ret){
            unset($_SESSION['tncode_r']);
        }else{
            $_SESSION['tncode_err']++;
            if($_SESSION['tncode_err']>10){//错误10次必须刷新
                unset($_SESSION['tncode_r']);
            }
        }
        return $ret;
    }

    private function _init(){
        $bg = mt_rand(1,$this->bg_num);
        $file_bg = dirname(__FILE__).'/tn_img/bg/'.$bg.'.png';
        $this->im_fullbg = imagecreatefrompng($file_bg);
        $this->im_bg = imagecreatetruecolor($this->bg_width, $this->bg_height);
        imagecopy($this->im_bg,$this->im_fullbg,0,0,0,0,$this->bg_width, $this->bg_height);
        $this->im_slide = imagecreatetruecolor($this->mark_width, $this->bg_height);
        $_SESSION['tncode_r'] = $this->_x = mt_rand(50,$this->bg_width-$this->mark_width-1);
        $_SESSION['tncode_err'] = 0;
        $this->_y = mt_rand(0,$this->bg_height-$this->mark_height-1);
    }

    private function _destroy(){
        imagedestroy($this->im);
        imagedestroy($this->im_fullbg);
        imagedestroy($this->im_bg);
        imagedestroy($this->im_slide);
    }
    private function _imgout(){
        if(!$_GET['nowebp']&&function_exists('imagewebp')){//优先webp格式，超高压缩率
            $type = 'webp';
            $quality = 40;//图片质量 0-100
        }else{
            $type = 'png';
            $quality = 7;//图片质量 0-9
        }
        header('Content-Type: image/'.$type);
        $func = "image".$type;
        $func($this->im,null,$quality);
    }
    private function _merge(){
        $this->im = imagecreatetruecolor($this->bg_width, $this->bg_height*3);
        imagecopy($this->im, $this->im_bg,0, 0 , 0, 0, $this->bg_width, $this->bg_height);
        imagecopy($this->im, $this->im_slide,0, $this->bg_height , 0, 0, $this->mark_width, $this->bg_height);
        imagecopy($this->im, $this->im_fullbg,0, $this->bg_height*2 , 0, 0, $this->bg_width, $this->bg_height);
        imagecolortransparent($this->im,0);//16777215
    }

    private function _createBg(){
        $file_mark = dirname(__FILE__).'/tn_img/tn_mark.png';
        $im = imagecreatefrompng($file_mark);
        header('Content-Type: image/png');
        //imagealphablending( $im, true);
        imagecolortransparent($im,0);//16777215
        //imagepng($im);exit;
        imagecopy($this->im_bg, $im, $this->_x, $this->_y  , 0  , 0 , $this->mark_width, $this->mark_height);
        imagedestroy($im);
    }

    private function _createSlide(){
        $file_mark = dirname(__FILE__).'/tn_img/tn_mark2.png';
        $img_mark = imagecreatefrompng($file_mark);
        imagecopy($this->im_slide, $this->im_fullbg,0, $this->_y , $this->_x, $this->_y, $this->mark_width, $this->mark_height);
        imagecopy($this->im_slide, $img_mark,0, $this->_y , 0, 0, $this->mark_width, $this->mark_height);
        imagecolortransparent($this->im_slide,0);//16777215
        //header('Content-Type: image/png');
        //imagepng($this->im_slide);exit;
        imagedestroy($img_mark);
    }

}
?>

3、tn_style.css

/*按钮*/
.clear{clear: both;}
.tncode{
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 4px;
    width: 100%;
    height: 44px;
    cursor: pointer;
    opacity: 1;
    line-height: 44px;
}
/*浮层*/
.tncode_div_bg{
    width: 100%;height: 100%;position: absolute;
    top:0;
    left:0;
    z-index:1000;
    background-color: rgba(0,0,0,0.5);
    opacity:0.3;
    filter: alpha(opacity=30); background-color:#000;
    *zoom:1;
    display: none;
}
.tncode_div{
    display: none;
    background-color: white;
    z-index: 1000000;
    width: 260px;height: 260px;
    position: absolute;
    left: 50%;top:50%;
    margin-top: -130px;
    margin-left: -130px;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    overflow: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/
    /*background-color: #ccc;*/
    -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
    -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
    box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}
.tncode_div .tncode_canvas_bg{
    z-index: 0;
}
.tncode_div .tncode_canvas_mark{
    z-index: 10000;
}
.tncode_div canvas{
    position: absolute;
    left: 10px;
    top: 10px;
}
.tncode_div .loading{
    padding-top: 60px;
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #ccc;
    width: 240px;
    height: 150px;
    text-align: center;
    box-sizing:border-box;
}
.dd{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: ddf 0.1s ease-in 0s infinite;
    -o-animation: ddf 0.1s ease-in 0s infinite;
    animation: ddf 0.1s ease-in 0s infinite;
}
@-webkit-keyframes ddf {
    0% {-webkit-transform: translate(-8px, 3px);}
    20% {-webkit-transform: translate(-3px, 1.5px);}
    50% {-webkit-transform: translate(0px, 0px) ;}
    70% {-webkit-transform: translate(5px, -1.5px) ;}
    100% {-webkit-transform: translate(0px, 0px);}
}
@-o-keyframes ddf {
    0% {-o-transform: translate(-8px, 3px);}
    20% {-o-transform: translate(-3px, 1.5px);}
    50% {-o-transform: translate(0px, 0px) ;}
    70% {-o-transform: translate(5px, -1.5px) ;}
    100% {-o-transform: translate(0px, 0px);}
}
@-moz-keyframes ddf {
    0% {-moz-transform: translate(-8px, 3px);}
    20% {-moz-transform: translate(-3px, 1.5px);}
    50% {-moz-transform: translate(0px, 0px) ;}
    70% {-moz-transform: translate(5px, -1.5px) ;}
    100% {-moz-transform: translate(0px, 0px);}
}
@keyframes ddf {
    0% {transform: translate(-8px, 3px);}
    20% {transform: translate(-3px, 1.5px);}
    50% {transform: translate(0px, 0px) ;}
    70% {transform: translate(5px, -1.5px) ;}
    100% {transform: translate(0px, 0px);}
}
.hgroup{
    z-index: 20000;
    content: "";
    position: absolute;
    left: -800px;
    top: 70px;
    width: 250px;
    height: 15px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 3s ease-in 0s infinite;
    -o-animation: searchLights 3s ease-in 0s infinite;
    animation: searchLights 3s ease-in 0s infinite;
}


@-webkit-keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}

@-o-keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}

@-moz-keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}

@keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}




/*拉条*/
.slide,.slide_block,.tools .tncode_close,.tools .tncode_refresh{
    background-repeat: no-repeat;
    background-image: url('../img/tn_icon.png');
}
.tncode_msg_ok{
    background-color: #24C628;
}
.tncode_msg_error{
    background-color: #DE5145;
}
.tncode_msg_ok,.tncode_msg_error{
    position: absolute;
    top:136px;
    left: 10px;
    width: 240px;  /* 同tncode_canvas_bg */
    height: 24px;
    color: #fff;
    margin: 0;
    padding: 2px 10px;
    overflow: visible;
    background-position: 0px 0px;
    font-size: 14px;
    opacity:0;
    filter: alpha(opacity=0.5);
    z-index: 10000;
    text-align: center;
}
.slide{
    position: absolute;
    top:160px;
    width: 93.52%;
    height: 0px;
    background-color: white;
    background-size: 100%;
    margin: 5.39% 3.24%;
    padding: 0px 0px 13.67%;
    overflow: visible;
    background-position: 0px 0px;
}

.tools{
    position: absolute;
    top:210px;
    width: 93.52%;
    height: 0px;
    background-color: white;
    background-size: 100%;
    margin: 5.39% 3.24%;
    padding: 5px 0px 13.67%;
    overflow: visible;
    background-position: 0px 0px;
    border-top: 1px solid #EEEEEE;
}

.slide_block{
background-position: 0px 12.9794%;
width: 65px;
height: 65px;
    position: absolute;
    left: 0px;
    top: 0px;
margin: -4.62% 0 0 -2.31%;
cursor: pointer;
}
.slide_block_text{
background-position: 0px 12.9794%;
height: 65px;
    position: absolute;
    left: 65px;
    top: 20px;
margin: -4.62% 0 0 -2.31%;
cursor: pointer;
font-size: 14px;
    color: rgb(136, 148, 157);
}

.tncode_canvas_bg,.tncode_canvas_mark{
   /* width: 240px;*/
}

.tools .tncode_close{
    background-position: 0 50%;
    height: 30px;
    width: 30px;
    float: left;
    margin-right: 10px;
    cursor: pointer;
}
.tools .tncode_refresh{
    background-position: 0 94%;
    height: 30px;
    width: 30px;
    float: left;
    cursor: pointer;
}
.tools .tncode_tips{
    float: right;
}
.tools .tncode_tips a{
    text-decoration: none;
    font-size: 10px;
    color: rgb(136, 148, 157);
}

原文：https://www.helloweba.net/php/551.html

windows下npm安装vue

发表评论

参考文章：https://www.cnblogs.com/liluxiang/p/9592003.html

※使用之前，我们先来掌握3个东西是用来干什么的。

· npm: Nodejs下的包管理器。

· webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

· vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

开始：

如图，下载8.9.3 LTS （推荐给绝大部分用户使用）

双击安装

可以使用默认路径，本例子中自行修改为d:\nodejs

一路点Next

点Finish完成

打开CMD，检查是否正常

再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs

先如下图建立2个目录

然后运行以下2条命令

npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

C:\Users\Administrator\.npmrc

使用文本编辑器编辑它，可以看到刚才的配置信息

检查一下镜像站行不行命令1

npm config get registry

检查一下镜像站行不行命令2

Npm info vue 看看能否获得vue的信息

注意，此时，默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录，

如果直接运行npm install等命令会报错的。

我们需要做1件事情：

1、增加环境变量NODE_PATH 内容是：D:\nodejs\node_global\node_modules

（注意，一下操作需要重新打开CMD让上面的环境变量生效）

一、测试NPM安装vue.js

命令：npm install vue -g

这里的-g是指安装到global全局目录去

二、测试NPM安装vue-router

命令：npm install vue-router -g

运行npm install vue-cli -g安装vue脚手架

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global

win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

重新打开CMD，并且测试vue是否使用正常

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，

他的配置并不全放在根目录下的 webpack.config.js 中。

初始化，安装依赖

运行npm install安装依赖

npm run dev

成功界面，提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件，打开dist文件夹下新生成的index.html文件

nmp下新建出来的vue01的目录描述：

懂的越多，不会的也就越多，知识之路是不断进取的