探探的左划右html开发

最新推荐文章于 2021-06-30 09:15:01 发布
最新推荐文章于 2021-06-30 09:15:01 发布
阅读量875 收藏
点赞数 2
分类专栏： ********前端-JS-HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiezikuaichuan/article/details/84823618
版权 
1、 定义几个div  容器
2、 引入swiper.min.js 
<div class="base-wrap">
    <div class="top">
        <div class="topL"><a href="../video_live/video_live.html">小视频</a></div>
        <div class="topL"><a href="love_success.html">配对成功</a></div>
        <div class="topR"><a href="javascript:;">设置</a></div>
    </div>
    <div style="position: relative">
        <div class="bg1" style="padding: 0">
            <div class="bgin1"></div>
        </div>
        <div class="swiper-container" dir="rtl">
            <div class="swiper-wrapper" id="userlist-content">

                <!--循环开始-->
                <div class="swiper-slide swiper-slide-0" data-slideindex="0" data-userid="3">
                    <div class="swiperin">
                        <a href="../user_center/other_user_index.html?uid=3">
                            <div class="simg">
                                <!--<div class="iconImg">-->
                                    <!--<i class="iconimg"></i>-->
                                    <!--<span>&lt;!&ndash;照片数-&ndash;&gt;</span>-->
                                <!--</div>-->
                                <!--<img src="http://39.106.161.5:8081/image/images/3/100_461_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />-->
                            </div>
                        </a>
                        <div class="sname">
                            <div style="color:#FF3366; text-align:center">...正在查找附近的人</div>
                            <div class="snamein">
                                <!--昵称--->
                                <!--<span class="sex"> <i class="sexin"></i> &lt;!&ndash;age-&ndash;&gt; </span>-->
                            </div>
                        </div>
                        <div class="tag1">
                            <!--<span> &lt;!&ndash;交友类别-&ndash;&gt; </span>-->
                            <!--<span>&lt;!&ndash;身高-&ndash;&gt;</span>-->
                            <!--<span>&lt;!&ndash;学历-&ndash;&gt;</span>-->
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-1" data-slideindex="1" data-userid="4">
                    <div class="swiperin">
                        <a href="../user_center/other_user_index.html?uid=4">
                            <div class="simg">
                                <div class="iconImg">
                                    <i class="iconimg"></i>
                                    <span>+100</span>
                                </div>
                                <!--<img src="http://39.106.161.5:8081/image/images/4/user-head-img-24715584181917839.jpg" style="width: 350px; height: 350px;max-width: 350px" />-->
                            </div> </a>
                        <div class="sname">
                            <div class="snamein">
                                爱上瓜的猫
                                <span class="sex"> <i class="sexin"></i> 29 </span>
                            </div>
                        </div>
                        <div class="tag1">
                            <span>交友</span>
                            <span>173cm</span>
                            <span>大专</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-2" data-slideindex="2" data-userid="5">
                    <div class="swiperin">
                        <a href="../user_center/other_user_index.html?uid=5">
                            <div class="simg">
                                <div class="iconImg">
                                    <i class="iconimg"></i>
                                    <span>+100</span>
                                </div>
                                <!--<img src="http://39.106.161.5:8081/image/images/5/100_580_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />-->
                            </div> </a>
                        <div class="sname">
                            <div class="snamein">
                                旧友。
                                <span class="sex"> <i class="sexin"></i> 17 </span>
                            </div>
                        </div>
                        <div class="tag1">
                            <span>交友&amp;婚恋</span>
                            <span>168cm</span>
                            <span>高中及以下</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-3" data-slideindex="3" data-userid="6">
                    <div class="swiperin">
                        <a href="../user_center/other_user_index.html?uid=6">
                            <div class="simg">
                                <div class="iconImg">
                                    <i class="iconimg"></i>
                                    <span>+100</span>
                                </div>
                                <!--<img src="http://39.106.161.5:8081/image/images/6/1000_GX2_970.jpg" style="width: 350px; height: 350px;max-width: 350px" />-->
                            </div> </a>
                        <div class="sname">
                            <div class="snamein">
                                舟山化小眼睛第一名的或容容
                                <span class="sex"> <i class="sexin"></i> 15 </span>
                            </div>
                        </div>
                        <div class="tag1">
                            <span>婚恋</span>
                            <span>168cm</span>
                            <span>硕士</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-4" data-slideindex="4" data-userid="7">
                    <div class="swiperin">
                        <a href="../user_center/other_user_index.html?uid=7">
                            <div class="simg">
                                <div class="iconImg">
                                    <i class="iconimg"></i>
                                    <span>+100</span>
                                </div>
                                <!--<img src="http://39.106.161.5:8081/image/images/7/100_352_099.jpg" style="width: 350px; height: 350px;max-width: 350px" />-->
                            </div> </a>
                        <div class="sname">
                            <div class="snamein">
                                刘濡郗
                                <span class="sex"> <i class="sexin"></i> 29 </span>
                            </div>
                        </div>
                        <div class="tag1">
                            <span>交友</span>
                            <span>170cm</span>
                            <span>本科</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-5" data-slideindex="5" data-userid="8">
                    <div class="swiperin">
                        <a href="../user_center/other_user_index.html?uid=8">
                            <div class="simg">
                                <div class="iconImg">
                                    <i class="iconimg"></i>
                                    <span>+100</span>
                                </div>
                                <!--<img src="http://39.106.161.5:8081/image/images/8/100_163_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />-->
                            </div> </a>
                        <div class="sname">
                            <div class="snamein">
                                赛哥不姓赛
                                <span class="sex"> <i class="sexin"></i> 22 </span>
                            </div>
                        </div>
                        <div class="tag1">
                            <span>交友</span>
                            <span>167cm</span>
                            <span>硕士</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-6" data-slideindex="6" data-userid="10">
                    <div class="swiperin">
                        <a href="../user_center/other_user_index.html?uid=10">
                            <div class="simg">
                                <div class="iconImg">
                                    <i class="iconimg"></i>
                                    <span>+100</span>
                                </div>
                                <!--<img src="http://39.106.161.5:8081/image/images/10/100_200_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />-->
                            </div> </a>
                        <div class="sname">
                            <div class="snamein">
                                吃着胡萝卜去唱歌
                                <span class="sex"> <i class="sexin"></i> 15 </span>
                            </div>
                        </div>
                        <div class="tag1">
                            <span>婚恋</span>
                            <span>172cm</span>
                            <span>硕士</span>
                        </div>
                    </div>
                </div>
                   
                <!--循环结束-->
            </div>
        </div>
    </div>

    <!--底部操作栏-->
    <div class="bottom" >
        <ul class="ul">
            <li class="list01">
                <a href="javascript:;" data-islike="0" class="likebtn">
                    <img src="../img/tantan/youyue01.png" alt="">
                </a>
            </li>
            <li class="list02">
                <a href="javascript:;" class="chatbtn">
                    <img src="../img/tantan/youyue02.png" alt="">
                </a>
            </li>
            <li class="list03">
                <a href="javascript:;" data-islike="1" class="likebtn">
                    <img src="../img/tantan/youyue03.png" alt="">
                </a>
            </li>
        </ul>
    </div>

    <!-- Black2 喜欢-->
    <div class="Black2 B_like" style="display:none">
        <div class="Bin2">
            <div class="bimg2 xiehou">
                <img src="../img/tantan/like.png" alt="">
            </div>
            <div class="know know_like">
                <a href="javascript:;" class="knowin">我知道啦</a>
            </div>
        </div>
    </div>
    <!-- 不喜欢 -->
    <div class="Black2 B_dislike" style="display:none">
        <div class="Bin2">
            <div class="bimg2 sorry">
                <img src="../img/tantan/dislike.png" alt="">
            </div>
            <div class="know know_dislike">
                <a href="javascript:;" class="knowin">我知道啦</a>
            </div>
        </div>
    </div>
    <!--开始页面 -->
    <div class="Black1" style="display:none">
        <div class="blackin1">
            <div class="choose_sex">
                <div class="chooseTitle">
                    请选择您想查看的性别和年龄段
                    <div class="guanbi"><i></i>
                    </div>
                </div>
                <div class="sexC">
                    <ul>
                        <!--<li class="" data-sex="1">-->
                            <!--&lt;!&ndash;<a href="javascript:;">&ndash;&gt;-->
                                <!--&lt;!&ndash;<span class="yicon">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<span class="yicon yiconin">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<img src="../img/tantan/xiehouboy.png" alt="" style="width:100%">&ndash;&gt;-->
                                    <!--&lt;!&ndash;</span>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<i class="ZT"></i>&ndash;&gt;-->
                                <!--&lt;!&ndash;</span>&ndash;&gt;-->
                                <!--&lt;!&ndash;<p>帅哥</p>&ndash;&gt;-->
                            <!--&lt;!&ndash;</a>&ndash;&gt;-->
                        <!--</li>-->
                        <li class="active" data-sex="2">
                            <a href="javascript:;">
                                <span class="yicon">
                                    <span class="yiconin">
                                        <img src="../img/tantan/xiehougril.png" alt="" style="width:100%">
                                    </span>
                                    <i class="ZT"></i>
                                </span>
                                <p>美女</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="age">
                    <div class="agein">
                        <div class="demo">
                            <input class="range-slider" id="agescope" type="hidden" value="18,35" />
                        </div>
                        <p class="NL">年龄</p>
                        <div class="nl_range">
                            <!-- <i class="i_left"><input type="text" value="18"></i> -->
                            <i class="i_left">18</i>
                            -
                            <!-- <i class="i_right"><input type="text" value="55"></i> -->
                            <i class="i_right">55</i>
                        </div>
                    </div>
                </div>
                <div class="begin">
                    <a href="javascript:;">开始缘分</a>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="sel-sex" value="2" />
</div>

最后加上样式：  

 

5、数据从后段服务器存取

6、演示网站 ： 

http://yuecao.cc:8088/jiaoyou/user_list/love.html

 

7、不懂的联系 丘丘 ：   823627970 

 

 

冥想者-定
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【自定义View】5.仿探探的卡片滑动效果
liyafeng的博客
09-23 6686
难度【★☆☆☆☆】一个拖拽的卡片滑动效果，这种效果网上有很多人已经讲解了实现思路，大多都用的是RecyclerView来实现的，但是我们今天来换一种实现思路，只用一个自定义的ViewGroup来搞定这个实现。
探探左滑右滑简单实现
热门推荐
qingxuan521721的博客
11-21 1万+
简单实现探探左滑右滑 首先上网下载一个library文件夹 接着把library工程导入到工作空间中，步骤如下：      先点击file-->project-->选中新创建的工程-->dependencies-->点击“+”号-->选中第三个Module Dependency-->找到library，选中-->ok   在androidstudio上导入library
html5左右滑动页面效果实现
anai20010816的博客
05-04 2573
The Demo of h5 slider achiev by Myself 主要思路： 　　设置一个容器container，然后里面有几个page，获取到屏幕的宽度并将其赋值给page，然后container设置宽度为page.length*width; 　　这时所有的page将会一字排开，将body设置overflow:hidden; width:100%;这样的就只能显示一个...
html5手机触屏左右滑动图动画切换效果
06-12
效果描述： 可以放到移动端的html5动画切换效果 默认也可以自动切换 支持鼠标点击拖动、滑动 使用方法： 1、将head中的样式引入到你的样式表中 2、将body中需要的代码部分拷贝过去即可
用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！程序员就是可以为所欲为！
编程界明世隐的博客
12-26 1万+
前两天在网上看到一个用vue写飞卡片的，觉得很有意思，我就自己想写一个，就花了点时间搞了一下，做的不好望大家多多指教。 两个主要的功能： 1.空白的地方点击最上面开始移动卡片，然后这个卡片会回到最下面，同时其他卡片往上移动。 2.拖动卡片超过多少范围会飞出去(上、下、左、右四种方向)--拖动中间的卡片也可以。 先看看效果： 第一次用视频做图片，做的不好，哈哈！ 首先要做一个盒子，然后生成几张卡片放到这个盒子里面 然后用js给卡片设置样式，有几个要注意的地方 1.从下往上每个卡片.
五行代码实现 炫动滑动 卡片层叠布局，仿探探、人人影视订阅界面 简单&优雅：LayoutManager+ItemTouchHelper...
weixin_33991418的博客
12-19 545
想经济上支持我 or 想通过视频看我是怎么实现的: edu.csdn.net/course/deta… 概述 前几天看有人实现了仿人人美剧的订阅界面，不过在细节之处以及实现方式我个人认为都不是最佳的姿势。于是我也动手撸了一个，还顺带撸了个探探的界面，先看GIF：探探皇帝翻牌子即视感 人人美剧订阅界面 这里吐个槽，探探这种设计真的像皇帝翻牌子的感觉，不喜欢左滑，喜欢右滑。 人人影视版特点（需求）：...
html如何实现左右布局,前端中的左右布局实现
weixin_39899244的博客
06-30 1万+
前端的布局中，左右布局是一种很常见布局方式，下面是我在前端工作中的几种方法：1、float实现左右布局左右布局实现的一个有效方法是利用css中的float属性,代码如下：//html//css.box{width: 400px;height: 300px;background: darkgray;}.left-box,.right-box{width: 50%;height: 100%;float...
html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏
weixin_42099755的博客
06-04 2371
HTML+CSS/CSS3实现滑动下拉导航栏纯css实现的滑动下拉导航栏，超详细代码，以及实现中遇到的小问题首先创建一个列表以及一些标签的全局样式html代码css代码* {margin: 0;padding: 0;}a {text-decoration: none;color: black;}a:hover {text-decoration: none;}li {list-style-type:...
ViewPager判断是向左划还是右划的实例
08-30
在Android开发中，ViewPager是一个非常常用的组件，它用于展示多个页面并允许用户通过左右滑动来切换页面。在某些场景下，我们需要知道用户是向左滑动还是向右滑动，以便执行相应的操作，比如加载更多数据或者实现...
uni-app列表项实现左划操作功能
02-25
在移动应用开发中，用户交互设计是至关重要的一个环节，特别是在列表展示数据时，为了提供更丰富的用户体验，往往会加入一些特殊的功能，比如左滑操作。本教程将详细讲解如何在uni-app框架中实现列表项的左划操作...
模仿探探首页滑动效果
12-13
JavaScript模仿探探首页滑动效果，左滑喜欢和右滑删除操作。
探探(百合网,珍爱网)卡片左右滑动效果，滑动流畅，卡片view无限重生
02-16
探探(百合网,珍爱网)卡片左右滑动效果，滑动流畅，卡片view无限重生,这个是androidStudio版本的,效果地址 http://blog.csdn.net/qq_21036939/article/details/50673900
模仿探探切换卡片
06-23
模仿探探切换卡片, 查看博客http://blog.csdn.net/shallcheek/article/details/46606523
仿探探左滑删除，右滑喜欢Demo，高仿探探
03-31
仿探探左滑删除，右滑喜欢Demo，高仿探探
jQuery手机端仿探探APP切换特效.zip
07-11
jQuery手机端仿探探APP切换特效是一款通过手机滑动页面进行下一页拖动切换效果代码。 <title>jQuery手机端仿探探APP切换特效 </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?3.1.64"> <style type="text/css"> .div1{ padding-top: 9rem; font-size: 6rem; } </style> </head> <body> [removed][removed] [removed][removed]
微信小程序左划删除组件
08-10
微信小程序是一种轻量级的应用开发平台，它允许开发者在无需安装的情况下为用户提供便捷的服务。在微信小程序中，有时候我们需要实现类似手机应用常见的左滑删除功能，例如在消息列表或者任务列表中。本教程将深入...
item左划得listview
03-31
在Android开发中，"item左划得listview"是指一种具有滑动操作功能的ListView，通常用于实现诸如删除、标记或其他交互式功能。ListView是Android系统中常用的控件，用于展示大量的列表数据，而通过添加滑动效果，我们...
仿探探左右滑动的简单实现
xw_414的博客
05-23 4106
一、导入依赖 compile 'me.yuqirong:cardswipelayout:1.0.0' // recylerview依赖： compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'二、布局文件1、activity_main.xml&lt;?xml version="1.0" encoding="utf-8...
H5仿探探左右滑动效果Vue.js
qq_30378295的博客
03-30 1533
效果图： 效果图：GIF 说明H5仿探探左右滑动效果
setOnDragListener 如何监听左划右划
最新发布
06-01
setOnDragListener 通常用于监听 View 的拖动事件，而左划右划属于手势事件，可以通过 GestureDetector 来监听。下面是一个示例代码： ```java public class MyView extends View { private GestureDetector mGestureDetector; public MyView(Context context, AttributeSet attrs) { super(context, attrs); mGestureDetector = new GestureDetector(context, new MyGestureListener()); } @Override public boolean onTouchEvent(MotionEvent event) { return mGestureDetector.onTouchEvent(event); } private class MyGestureListener extends GestureDetector.SimpleOnGestureListener { private static final int SWIPE_THRESHOLD = 100; private static final int SWIPE_VELOCITY_THRESHOLD = 100; @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { boolean result = false; try { float diffY = e2.getY() - e1.getY(); float diffX = e2.getX() - e1.getX(); if (Math.abs(diffX) > Math.abs(diffY)) { if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) { if (diffX > 0) { onSwipeRight(); } else { onSwipeLeft(); } result = true; } } } catch (Exception exception) { exception.printStackTrace(); } return result; } } public void onSwipeRight() { // 处理右划事件 } public void onSwipeLeft() { // 处理左划事件 } } ``` 在这个示例代码中，MyView 继承自 View，重写 onTouchEvent 方法，在该方法中将触摸事件交给 GestureDetector 处理。在 GestureDetector 的回调函数中，判断手势是否为左右滑动，如果是，则调用 MyView 中的 onSwipeLeft 或 onSwipeRight 方法进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值