検索
ホームページphp教程php手册朋友圈相册 手机版

朋友圈相册
仿朋友圈相册 【注意】【注意】请用google的手机模拟器浏览,因为是手机触摸事件

domo 演示 http://mall.hnsanx.com/mphoto/friends.html 仿微信朋友圈图片 还差一个慢慢变大功能

重要代码:
$(document).ready(function(){
var _window = $(window);
var strSrc = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var total =strSrc.length;
var imgWidth = 110;
var imgHeight =100;
var bigLiList = liList = "";
var _touchList = null;
this.idx = 0;

$.each(strSrc,function(index,item) {
liList += "

  • ";
    drawImages(index+1,"#img_",item,imgWidth,imgHeight);
    });

    $("#photos").append(liList);
    //render();
    //
    $("#photos").delegate("li",'tap',function(){
    $("#photos").attr("style","display:none");
    $("#large").css("display","block");
    var _id = $(this).attr("data-id");
    loadImg(_id);
    });

    function loadImg(_id) {
    var numList = "";
    var windowWidth = _window.width();
    var windowHeight = _window.height();
    $("#big_large_box").css("height",windowHeight);
    $.each(strSrc,function(index,item){
    numList += "
  • ";
    bigLiList += "
  • ";

    var oImageObj = new Image();
    oImageObj.onload = function() {
    var W = this.width;
    var H = this.height;
    var windowWidth = _window.width();
    var windowHeight = _window.height();
    var drawHeight,drawWidth,drawTop,drawLeft;

    if((W/H) > (windowWidth/windowHeight)){
    drawHeight = parseInt(windowWidth/(W/H)); //alert(drawWidth);
    drawTop = parseInt((windowHeight-drawHeight)/2);
    $("#large_img_"+(index+1)).css("margin-top",drawTop+"px");
    drawImages(index+1,"#large_img_",item,windowWidth,drawHeight);
    }else if(H/W==windowHeight/windowWidth){
    drawImages(index+1,"#large_img_",item,windowWidth,windowHeight);
    }else {
    drawWidth = parseInt((W/H)*windowHeight);
    drawLeft = parseInt((windowWidth-drawWidth)/2);
    $("#large_img_"+(index+1)).css("margin-left",drawLeft+"px");
    drawImages(index+1,"#large_img_",item,drawWidth,windowHeight);
    }
    }
    oImageObj.src = item;
    });
    $("#big_large_box").append(bigLiList);
    _touchList = $("#big_large_box>li");
    go(_id-1);
    ///下面点焦点图
    $("#num").append(numList);
    $("#num>li").eq((_id-1)).addClass("currun");
    var numWidth = $("#num").width();
    $("#num").css("left",((windowWidth-numWidth)/2)+"px");
    }

    function drawImages(i,target,iSrc,iWidth,iHeight) {
    var objImage = new Image();
    objImage.onload = function() {
    $(target+i)[0].width = iWidth;
    $(target+i)[0].height = iHeight;
    var cav = $(target+i)[0].getContext('2d');
    cav.drawImage(this,5,0,iWidth-10,iHeight);
    }
    objImage.src = iSrc;
    }

    $("#big_large_box").delegate("li",'tap',function(){
    $("#photos").attr("style","display:block");
    $("#large").css("display","none");
    $("#big_large_box").empty();
    $("#num").empty();
    bigLiList = "";
    });

    $("#big_large_box").on('touchstart',function(evt){
    this.startX = evt.touches[0].pageX;
    this.offsetX = 0;
    this.startTime = new Date() * 1;
    this.idx = idx;
    });

    $("#big_large_box").on('touchmove',function(evt){
    evt.preventDefault();
    this.offsetX = evt.touches[0].pageX - this.startX;
    //_touchList;
    var i = this.idx-1;
    var m = i+3;
    for(i;i _touchList[i] && (_touchList[i].style.webkitTransform = 'translate3d(' + ((i-this.idx)*_window.width() + this.offsetX)+'px, 0, 0)');
    _touchList[i] && (_touchList[i].style.webkitTransition = 'none');
    }
    });

    $("#big_large_box").on('touchend',function(){
    var boundary = _window.width()/3;
    var endTime = new Date() * 1;
    if(endTime-this.startTime > 800){
    if(this.offsetX >= boundary){
    //进入前一页
    go('-1');
    }else if (this.offsetX //进入下一页
    go('+1');
    }else {
    //留在本页
    go('0');
    }
    }else{
    if(this.offsetX > 60){
    go('-1');
    }else if (this.offsetX go('+1');
    }else{
    go('0');
    }
    }
    });

    });

    function go(n) {
    var cidx;
    var _touchList = $("#big_large_box>li");
    var len = _touchList.length;

    if(typeof n == 'number'){
    cidx = n;
    }else if(typeof n == 'string'){
    cidx = idx + n * 1;
    }
    //当索引右超出
    if(cidx >= len - 1){
    cidx = len - 1;
    _touchList[cidx].style.webkitTransition = '-webkit-transform 0.6s ease';
    _touchList[cidx-1].style.webkitTransition = '-webkit-transform 0.6s ease';
    _touchList[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
    _touchList[cidx-1].style.webkitTransform = 'translate3d(-'+$(window).width()+'px, 0, 0)';
    }else if(cidx cidx = 0;
    _touchList[cidx].style.webkitTransition = '-webkit-transform 0.6s ease';
    _touchList[cidx+1].style.webkitTransition = '-webkit-transform 0.6s ease';
    _touchList[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
    _touchList[cidx+1].style.webkitTransform = 'translate3d('+$(window).width()+'px, 0, 0)';
    }else {
    _touchList[cidx].style.webkitTransition = '-webkit-transform 0.6s ease';
    _touchList[cidx-1].style.webkitTransition = '-webkit-transform 0.6s ease';
    _touchList[cidx+1].style.webkitTransition = '-webkit-transform 0.6s ease';
    _touchList[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
    _touchList[cidx-1].style.webkitTransform = 'translate3d(-'+$(window).width()+'px, 0, 0)';
    _touchList[cidx+1].style.webkitTransform = 'translate3d('+$(window).width()+'px, 0, 0)';
    }
    idx = cidx;
    var numLi = $("#num>li");
    $.each(numLi,function(key,value){
    if(key == cidx) numLi.eq(key).addClass("currun");
    else numLi.eq(key).removeClass("currun");
    });
    }
    //alert(_window.height());
    /*var objImage = new Image();
    objImage.index = index+1;
    objImage.onload = function() {
    var cav = $("#img_"+this.index)[0].getContext('2d');
    cav.drawImage(this,0,0,imgWidth,imgHeight);
    }
    objImage.src = item;*/

    /*if(W > windowWidth && H > windowHeight){


    }else if(W > windowWidth && H drawHeight = parseInt((H/W)*windowWidth);
    drawTop = parseInt((windowHeight-drawHeight)/2);
    $("#large_img_"+(index+1)).css("margin-top",drawTop+"px");
    drawImages(index+1,"#large_img_",item,windowWidth,drawHeight);
    }else if(W windowHeight) {
    drawWidth = parseInt((W/H)*windowHeight);
    drawLeft = parseInt((windowWidth-drawWidth)/2);
    $("#large_img_"+(index+1)).css("margin-left",drawLeft+"px");
    drawImages(index+1,"#large_img_",item,drawWidth,windowHeight);
    }else {
    drawLeft = parseInt((windowWidth-W)/2);
    drawTop = parseInt((windowHeight-H)/2);
    $("#large_img_"+(index+1)).css("margin-top",drawTop+"px");
    $("#large_img_"+(index+1)).css("margin-left",drawLeft+"px");
    drawImages(index+1,"#large_img_",item,W,H);
    }*/

    附件 2015-4-10.zip ( 4.04 MB 下载:28 次 )

    AD:真正免费,域名+虚机+企业邮箱=0元

    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    Safe Exam Browser

    Safe Exam Browser

    Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    AtomエディタMac版ダウンロード

    AtomエディタMac版ダウンロード

    最も人気のあるオープンソースエディター

    SublimeText3 英語版

    SublimeText3 英語版

    推奨: Win バージョン、コードプロンプトをサポート!

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター