一次活动总结

以后每做一次活动都应该记录一下自己碰到的问题以及解决方法，希望坚持下去，慢慢积累，快快成长。

1，js分享至qq空间，腾讯微博，新浪微博：

//分享
var ShareTip = function(){}  
//分享到腾讯微博
ShareTip.prototype.sharetoqq=function(content,url,picurl)  
{  
    var shareqqstring='http://v.t.qq.com/share/share.php?title='+content+'&url='+url+'&pic='+picurl;  
    window.open(shareqqstring,'newwindow','height=100,width=100,top=100,left=100');  
}  
//分享到新浪微博
ShareTip.prototype.sharetosina=function(title,url,picurl)  
{  
    var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='+picurl;  
    window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100');  
}  
//分享到QQ空间
ShareTip.prototype.sharetoqqzone=function(title,url,picurl)  
{  
    var shareqqzonestring='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary='+title+'&url='+url+'&pics='+picurl;  
    window.open(shareqqzonestring,'newwindow','height=400,width=400,top=100,left=100');  
}

//example
$('.qq').on('click',function(){
    var share1=new ShareTip();  
    share1.sharetoqqzone('','','');
});

注意：上面url在带参数时需要用encodeURIComponent转义特殊字符'='，不然qq空间分享会截断?后面的部分。

上面title在带有'#'时也会被截掉后面的（新浪微博），qq空间直接显示不正常，需要用%23代替#即可。

2，图片轮播（没有用插件，左右可以点击滚动）

var i=0;
$('.right').on('click',function(){
    if(i>=0&&i<8){
        i=i+1;
    console.log(i);
    $(".ul").animate({scrollLeft:290*i},500);
    }
})
$('.left').on('click',function(){
    if(i>0&&i<=8){
        i=i-1;
        console.log(i);
    $(".ul").animate({scrollLeft:290*i},500);   
    }
})

font-size:0可以去掉inline-block元素之间的空隙，用white-wrap:nowrap可以保持不换行。

word-wrap:break-word;允许在单词内断开，word-break:break-all;在恰当断字点换行。

3，上传图片

<div class="pic">
    <canvas id="imgData"></canvas>
    <div class="picShow poR" id="picShow">
        <div class="imgUpBtn">
            <input type="file" id="imgUpBtn" class="fileUp"/>
        </div>
        <canvas id="imgShow"></canvas>
    </div>
</div>

.pic{margin:382px 0 0 164px; width:320px; height:320px; border-radius:10px; overflow:hidden; position:relative;}
#imgData{width: 0;height: 0;position: absolute;opacity: 0;}
.picShow {width: 320px;height: 320px;overflow: hidden; border-radius:10px;position:relative;}
.picShow canvas {background: #000;border-radius: 10px;display:none;}
.imgUpBtn {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.fileUp {width: 100%;height: 100%;opacity: 0;cursor:pointer;}

var me=this,
        img=new Image(),
        imgShow=document.getElementById("imgShow"),
        ctx=imgShow.getContext("2d"),
        imgData=document.getElementById("imgData"),
        ctxD=imgData.getContext("2d"),
        oswitch=false,
        oimgShow=$('#imgShow'),
        oimgData=$('#imgData'),
        oimg=$('.picShow'),
        poX,
        poY,
        imgUp_imgSrc='',
        imgUp_poY=0,
        imgUp_poX=0,
        imgUp_w='',
        imgUp_h='',
        imgUp_imgw='',
        imgUp_imgh='';

    oimgShow.attr('width',parseInt(oimg.width()));
    oimgShow.attr('height',parseInt(oimg.height()));

    $('.imgUpBtn input').on('change',function(){
        var file=this.files[0],
            URL=URL||webkitURL;
        oimg.find('.imgUpBtn').hide();
        oimgShow.show();
        img.src=URL.createObjectURL(file);
        img.onload=function(){
            oswitch=true;
            var imgMe=me.imgUp_imgSrc=this,
                w=me.imgw=imgMe.width,
                h=me.imgh=imgMe.height,
                scale=0,
                ViewWidth=oimgShow.width(),
                ViewHeight=oimgShow.height();
            me.imgUp_poY=0;
            me.imgUp_poX=0;
            if(w<=h){
                scale=w/ViewWidth;
                me.imgUp_poY=-(h/scale-ViewHeight)/2;
            }else{
                scale=h/ViewHeight;
                me.imgUp_poX=-(w/scale-ViewWidth)/2;
            }
            me.imgUp_w=parseInt(Math.floor(w/scale));
            me.imgUp_h=parseInt(Math.floor(h/scale));
            $(imgData).attr('width',me.imgUp_w);
            $(imgData).attr('height',me.imgUp_h);
            ctxD.drawImage(me.imgUp_imgSrc,0,0,me.imgUp_w,me.imgUp_h);
            drawImage();
        };
    });
    function drawImage(){
        var imgDataW=oimgData[0].width,
            imgDataH=oimgData[0].height;
        ctx.clearRect(0,0,oimg.width(),oimg.height());
        ctx.drawImage(imgData,me.imgUp_poX,me.imgUp_poY,imgDataW,imgDataH);
    };

4、图片预加载

利用background来预加载

var images = [];
function preload() {  
   for (i = 0; i < preload.arguments.length; i++) {  
     images[i] = new Image()  
     images[i].src = preload.arguments[i]  
   }  
}  
preload(  
  "http://domain.tld/gallery/image-001.jpg",  
  "http://domain.tld/gallery/image-002.jpg"
)

.使用Ajax实现预加载

5、图片懒加载

// 判断元素进入可视区域
window.onscroll = function(){
  if(dom.offsetTop - document.documentElement.scrollTop <= document.documentElement.clientHeight){
    console.log('in');
  }else{
    console.log('out');
  }
}

window.onscroll = function(){
  if(dom.getBoundingClientRect.top <= document.documentElement.clientHeight){
    console.log('in');
  }else{
    console.log('out');
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
}
.in{
    border: 1px solid black;
    margin: 10px;
    text-align: center;
    height: 500px;
    width: 500px;
    float: left;
}
.in img{
    height: 500px;
    width: 500px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>
    <li class="in"><img src="./blank.png" alt="测试" data-original = "./img.png"></li>                          
</ul>

<script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
    loadImg(aImages);
};
function loadImg(arr){
    for( var i = 0,len = arr.length; i < len; i++){
        if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
            arr[i].isLoad = true;
            arr[i].style.cssText = "transition: ''; opacity: 0;"
            if(arr[i].dataset){
                aftLoadImg(arr[i],arr[i].dataset.original);    
            }else{
                aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
            }
            (function(i){
                setTimeout(function(){
                    arr[i].style.cssText = "transition: 1s; opacity: 1;"
                },16)
            })(i);
        }
    }
}
function aftLoadImg(obj,url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}

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