jQuery仿探探APP手机滑动卡片切换特效_js实现一个类似于探探app的喜欢不喜欢切换效果-程序员宅基地

技术标签： html滑动切换 jquery卡片切换 html html卡片切换特效 H5 滑动切换特效

示例图1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a-test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="css/photoSwipe.css">
<style type="text/css">
	.div1{
		padding-top: 9rem;
		font-size: 6rem;
	}
</style>

</head>
<body>

<div id="photo_box">
	<div><div>
	</div></div>
</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/photoSwipe.js"></script>

</body>
</html>

css如下

html,body{
    height: 100%;
    background-color: #F3F3F3;
    font-size: 1rem;
    font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
    letter-spacing: 0;
    word-wrap: break-word;
}
*{
    outline: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#photo_box{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
#photo_box>div{
    padding: 15px;
    height: 100vh;
    position: relative;
}
#photo_box>div>div{
    height: 100%;
    position: relative;
}
#photo_box>div>div>div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px #CCC;
    text-align: center;
    z-index: 1;
}

js如下：



var photoSwipe={
    /*用户信息数组*/
    imgArr:[],
    /*元素位置*/
    site:{
        _x_start:0,
        _y_start:0,
        _x_move:0,
        _y_move:0,
        _x_end:0,
        _y_end:0,
        top_val:0,
        left_val:0
    },
    /*当前下标*/
    index:0,
    /*是否允许动画*/
    run:true,
    /*是否加载完成*/
    load:false,
    /*初始化*/
    init:function () {
        document.querySelector("#photo_box>div>div").innerHTML=this.imgHtml();
    },
    /*图片HTML*/
    imgHtml:function () {
        var str='<div id="ind-'+this.index+'">'
            +'<div class="div1">第'+(this.index+1)+'个</div>'
            +'<div style="padding-top: 20px;color: #d01d33;font-weight: bold;">本demo只支持移动端</div>'
            +'<div style="padding-top: 20px">左右滑动试试</div>'
            +'<div style="padding-top: 20px">本demo仅实现滑动效果</div>'
            +'<div style="padding-top: 20px">数据交互相关代码请各位自行添加</div>'
            +'</div>';
        return str;
    },
    /*移动动画*/
    animateMove:function (el,val) {
        if(!this.run){
            return;
        }
        this.run=false;

        /*CSS3动画方式*/
        el.css({"transform":"translate3d("+doc_width*val+"px,"+photoSwipe.top_val*2.2+"px,0px)","transition-duration":"0.3s"});
        var moveTime=setTimeout(function () {
            el.remove();
            var ind_el=$("#ind-"+(photoSwipe.index));
            photoSwipe.activeEl(ind_el);
            photoSwipe.index++;
            $("#photo_box>div>div").append(photoSwipe.imgHtml());
            photoSwipe.run=true;
        },300);
    },
    /*复位动画*/
    animateReset:function (el) {
        /*CSS3动画方式*/
        el.css({"transform":"translate3d(0px,0px,0px)","transition-duration":"0.3s"});
        var resetTime=setTimeout(function () {
            el.css("transition-duration","0s");
        },1000);
    },
    /*激活层*/
    activeEl:function (el) {
        el.css("z-index","2");
    },
    /*清除位置*/
    clearLocation:function () {
        this.left_val=0;
    }

};
photoSwipe.init();

var doc_width=$(document).width(),doc_height=$(document).height();

photoSwipe.activeEl($("#ind-0"));
photoSwipe.index++;
$("#photo_box>div>div").append(photoSwipe.imgHtml());

$("#photo_box").on("touchstart",function(e) {
    if(!photoSwipe.load || !photoSwipe.run){
        return;
    }

    var ev = e || window.event;
    photoSwipe._x_start=ev.touches[0].pageX;
    photoSwipe._y_start=ev.touches[0].pageY;
    var act_el=$("#ind-"+(photoSwipe.index-1).toString(10));
});
$("#photo_box").on("touchmove",function(e) {
    if(!photoSwipe.load || !photoSwipe.run){
        return;
    }
    var ev = e || window.event;
    photoSwipe._x_move=ev.touches[0].pageX;
    photoSwipe._y_move=ev.touches[0].pageY;

    var act_el=$("#ind-"+(photoSwipe.index-1).toString(10));
    photoSwipe.top_val=parseFloat(photoSwipe._y_move)-parseFloat(photoSwipe._y_start);
    photoSwipe.left_val=parseFloat(photoSwipe._x_move)-parseFloat(photoSwipe._x_start);

    act_el.css({"transform":"translate3d("+photoSwipe.left_val+"px,"+photoSwipe.top_val+"px,0px)","transition-duration":"0s"});
});
$("#photo_box").on("touchend",function(e) {
    if(!photoSwipe.load || !photoSwipe.run){
        return;
    }
    var ev = e || window.event;
    photoSwipe._x_end=ev.changedTouches[0].pageX;
    photoSwipe._y_end=ev.changedTouches[0].pageY;
    var act_el=$("#ind-"+(photoSwipe.index-1).toString(10));
    if(photoSwipe.left_val>0 && photoSwipe.left_val>doc_width/2-doc_width/4.5){
        photoSwipe.animateMove(act_el,1);
    }else if(photoSwipe.left_val<0 && photoSwipe.left_val<-doc_width/2+doc_width/4.5){
        photoSwipe.animateMove(act_el,-1);
    }else {
        photoSwipe.animateReset(act_el);
    }
});

$(function () {
    photoSwipe.load=true;
});

转自网络

挺有趣的一小特效

本文链接：https://blog.csdn.net/u014789708/article/details/96976489

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2021年中国大学生程序设计竞赛女生专场C. 连锁商店（状压dp 思维贪心）_Cutele_的博客-程序员宅基地

linkkkk题意：给出nnn个景点，每个景点都属于一个公司，给出每个公司的价值。如果是第一次经过这个公司就会获得对应的价值，问从111出发到每个景点能够获得的最大价值。n<=36n<=36n<=36思路：可以看到nnn的范围不大，也就是说可以用二进制来表示有没有经过某个公司，比如100110011001就表示已经经过了1,41,41,4个公司，没有经过2,32,32,3公司。这样，到达每个节点时，就会有对应的数来表示之前经过公司的状态。记录每个点的前驱节点，也就是对于给出的

阿里云服务器上的linux下卸载PHP和安装PHP_alibaba cloud linux 安装 php74-程序员宅基地

一，卸载php 很无语，CentOS居然php版本才5.1.6，很多开源的CMS无法安装。查看php版本命令：#php -v下面的命令是删除不干净的#yum remove php因为使用这个命令以后再用#php -v还是会看到有版本信息的。。。。。必须强制删除，使用下面命令查看全部php软件包#rpm -qa|grep php提..._alibaba cloud linux 安装 php74

通俗解释什么是指令集_dong_learning的博客-程序员宅基地

计算机语言经过不断发展分为三个层次，高级语言、汇编语言和机器语言。1、机器语言我们人类在计算数字的时候习惯于用10进制的表示方法，据说是因为人类有10根手指的关系。但是对计算机来说靠的是高低电平来表示所有的信息，在这个前提下要以10进制的方式表示信息就比较复杂，最适合计算机的表示方式就是高电平代表1，低电平代表0，所有的信息都是以0和1的组合方式来表示，不管是简单的加法还是微信还是游戏，本质上就是0和1组成的指令进行计算的结果。因此以0和1组成的指令是计算机最底层的语言，事实上计算机也仅能理解这种沟_指令集

Python二级笔记（8）_使用循环输出1到50之间(不包括50)的奇偶数。要求将所有偶数存到列表变量even中,奇_Rain:)的博客-程序员宅基地

知识点：1，栈支持子程序调用。栈上一种只能在一端进行插入或删除的线性表，在主程序调用子函数时要首先保存主程序当前状态，然后转去执行子程序，最终把子程序的执行结果返回到主程序中调用子程序的位置，继续向下执行，这种调用符合栈的特点。2，冒泡排序，直接插入排序与简单选择排序法在最坏情况下均需要比较n(n-1)/2次，而堆排序在最坏情况下需要比较的次数是nlog（↓2）n。3，软件测试的目的是为了发现错误而执行程序的过程，并不涉及改正错误。4，降低耦合性提高内聚性有利于提高模块的独立性5，数据库_使用循环输出1到50之间(不包括50)的奇偶数。要求将所有偶数存到列表变量even中,奇

歌如季（Dream-Coastline 6.0）-程序员宅基地

序：蝶起犹有桃花香，蜂落留着芬芳甜。蒙蒙丝，入画景，江柳闻燕翠冒新。怀诗书，伤感阴，清风吹落春满庭。潺潺帘，润草停，远枫添香花吐情。二三处，伊人影，云雾搬山雨绕顶。细细寒，湖粼定，桂花飘涟水月盈。鸳鸯妒，相思引，微冷剪叶赏秋饼。袅袅曲，催无眠，近杉缺绿鸟枉鸣。向何诉，惆怅心，霜雪折枝梅歌醒。

数据结构与算法课后题整理（一）-程序员宅基地

数据结构与算法1课后题整理第一章什么是数据结构、算法结构与设计功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入第一章第一章主要是关于数据结构以及算法的一些概念性的知识，唯一需要计算的可能是时间复杂度的部分。但是通过课后题可以看出_数据结构与算法课后题