搜索
首页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 Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    Atom编辑器mac版下载

    Atom编辑器mac版下载

    最流行的的开源编辑器

    MinGW - 适用于 Windows 的极简 GNU

    MinGW - 适用于 Windows 的极简 GNU

    这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    WebStorm Mac版

    WebStorm Mac版

    好用的JavaScript开发工具