検索
ホームページ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衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    VSCode Windows 64 ビットのダウンロード

    VSCode Windows 64 ビットのダウンロード

    Microsoft によって発売された無料で強力な IDE エディター

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    強力な PHP 統合開発環境

    MantisBT

    MantisBT

    Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

    メモ帳++7.3.1

    メモ帳++7.3.1

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

    mPDF

    mPDF

    mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。