精华内容
下载资源
问答
  • 三个超实用的移动端触摸滑动js插件

    万次阅读 2018-03-27 10:52:11
    目前移动端的触摸滑动js插件非常的多,25学堂的小编帮大家整理了三个非常好用的移动端触摸滑动js插件。以免大家搞错这些移动端触摸滑动js插件。找到不合适的移动端触摸滑动js插件,反而浪费H5前端工程师的时间。 ...

    目前移动端的触摸滑动js插件非常的多,25学堂的小编帮大家整理了三个非常好用的移动端触摸滑动js插件。以免大家搞错这些移动端触摸滑动js插件。找到不合适的移动端触摸滑动js插件,反而浪费H5前端工程师的时间。

    同时这三款移动端触摸滑动js插件也是我们前端工程师必藏品。

    第一个超实用的移动端触摸滑动js插件:Swiper中文网

    开源、免费、强大的移动端触摸滑动插件—swiper.min.js
    这里写图片描述
    移动端网页触摸内容滑动js插件swiper

    Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

    Swiper中文网提供Swiper在线演示、Swiper中文教程、Swiper中文APi、Swiper下载。

    同时Swiper也是目前公认的最好的移动触摸滑动插件。

    官网地址:http://www.swiper.com.cn/

    移动端的DEMO演示地址:http://www.swiper.com.cn/demo/senior/index.html

    第二个超实用的移动端触摸滑动js插件:TouchSlide

    TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机、平板电脑等移动终端,
    能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

    也是大话主席 superslide旗下的一款移动端触摸滑动插件。superslide也是PC端优秀的js特性插件。
    这里写图片描述
    移动端网页触摸内容滑动js插件TouchSlide

    DEMO演示地址:http://www.superslide2.com/TouchSlide/demo.html

    第三个超实用的移动端触摸滑动js插件:iSlider

    iSlider是一个表现出众,无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素,例如图片或者DOM元素。是百度团队开发完成的。
    这里写图片描述
    移动端网页触摸内容滑动js插件iSlider

    使用和DEMO演示地址:http://be-fe.github.io/iSlider/demo/index_chinese.html

    同时-iSlider也是目前最 轻量、高性能的移动滑动方案。 值得大家去研究和使用。

    正是由于这些优秀的移动端触摸滑动js插件的出现,让我们的H5端开发变越来有趣了。

    希望大家可以选择适合自己的移动端触摸滑动js插件,运用到自己的移动项目当中去。

    展开全文
  • 常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper 完全免费并开源(MIT Licensed),...

    Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。常用于移动端网站的内容触摸滑动

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

    Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

    Swiper 完全免费并开源(MIT Licensed),无论你使用在个人网站或商业网站,都无需付费。

    Swiper5 使用方法

    1、首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。html>

    2、HTML内容。

    Slide 1
    Slide 2
    Slide 3

    导航等组件可以放在container之外

    3、你可能想要给Swiper定义一个大小,当然不要也行。.swiper-container

    {

    width: 600px;

    height: 300px;

    }

    4、初始化Swiper:最好是挨着

    展开全文
  • Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、...
  • Swiper 触摸滑动插件

    2020-08-03 17:45:43
    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择...

            Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

            Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择,在PC网页端也有很好的应用!

             官方:https://www.swiper.com.cn/

             

      官方资源下载:https://www.swiper.com.cn/download/index.html  最新版本6.0

    官方中文教程:https://www.swiper.com.cn/usage/index.html

     

      官方API文档:https://www.swiper.com.cn/api/index.html

     

     引入资源:

    <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
    <script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>

     代码:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
    
    		<style type="text/css">
    			/*容器*/
    			.swiper-container {
    				width: 700px;
    				height: 350px;
    				
    				/*背景图片*/
    				background: url(img/bg_1.jpg);
    				background-size: cover;
    				
    				/*分页器颜色*/
       				 --swiper-pagination-color:white;/* 两种都可以 */
    			
    		      /*前进后退按钮*/
    		       --swiper-navigation-color: white;/* 单独设置按钮颜色 */
    		      --swiper-navigation-size: 40px;/* 设置按钮大小 */
    			
    			}
    			
    			.swiper-container img{
    				width: 100%;
    			}
    		</style>
    	</head>
    	<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
    
    	<body>
    		<div class="swiper-container">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide">
    					<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596209683_1180x600.png?max_age=31536000"/>
    				</div>
    				<div class="swiper-slide">
    					<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596209441_1180x600.png?max_age=31536000"/>
    				</div>
    				<div class="swiper-slide">
    					<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596122566_0e54d4ac-5ddb-48f8-838e-61b36271f529.png?max_age=31536000"/>
    				</div>
    			</div>
    			<!-- 如果需要分页器 -->
    			<div class="swiper-pagination"></div>
    
    			<!-- 如果需要导航按钮 -->
    			<div class="swiper-button-prev"></div>
    			<div class="swiper-button-next"></div>
    
    			<!-- 如果需要滚动条 -->
    			<div class="swiper-scrollbar"></div>
    		</div>
    	</body>
    
    </html>
    <!--初始化Swiper-->
    <script>        
      var mySwiper = new Swiper ('.swiper-container', {
      	//默认是横向的;
    //  direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
    //  autoplay: true,//可选选项,自动滑动
    	autoplay: {
    	    delay: 1000,     //1s
    	    stopOnLastSlide: false,
    	    disableOnInteraction: true,
    	    },
    	    //切换效果
    //  effect : 'cube',
    //  effect : 'flip',
    //  effect : 'coverflow',
    //  slidesPerView: 3,
    //  centeredSlides: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        
        // 如果需要滚动条
    //  scrollbar: {
    //    el: '.swiper-scrollbar',
    //  },
      })        
      </script>

     效果:模仿QQ会员: https://vip.qq.com/ 

     

    展开全文
  • 触摸滑动插件 Swiper

    2017-01-19 16:31:00
    Swiper 是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper中文网里已有详细的使用介绍,我就不多做介绍了。 http://www.swiper.com.cn/ 我在项目应用于多图轮播效果或者用于订单列表多...

    Swiper

    Swiper  是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

    Swiper中文网里已有详细的使用介绍,我就不多做介绍了。 http://www.swiper.com.cn/

    我在项目应用于多图轮播效果或者用于订单列表多状态多卡片滑动效果。

    在下图所示中使用Swiper,因为每个状态的内容数量是不一样的,可是他设置的高度是一样的,导致多内容的卡面会出现内容被遮挡,最后的解决方案是写一个方法重新定义swiper-slide的高度,在初始化插件,以及当你滑动刷新加载内容的时候重新定义一下swiper-slide的高度就好了。

     代码如下所示。

    function bodyHeight() {
    $(".swiper-slide").each(function () {
      if ($(this).hasClass("swiper-slide-visible")) {
         var contentH = $(this).find(".order").height() ;
         $(".swiper-container").height(contentH);
      }
    });
    }

    例:

     

    转载于:https://www.cnblogs.com/huangenai/p/6307180.html

    展开全文
  • Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,这里为大家简单介绍一下Swiper4的用法,需要的朋友可以参考下
  • Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构...
  • Swiper就是常用于移动端网站的内容触摸滑动的一个js插件。 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用...
  • Swiper是一款开源、免费、功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4。Swiper主要面向的是手机、平板电脑等移动设备,帮助开发者轻松实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。...
  • 新版本将不再采用carousel滑动插件,而采用目前广为使用的Swiper触摸滑动插件。原因是mycncart3.0.0.0版本重点之一是放在移动端效果的处理展示,而Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等...
  • C、swiper.js(官网地址),具有开源、免费、功能强大的特点,是目前应用较广泛的移动端网页触摸内容滑动js插件 D、TouchSlide(官网地址),TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机、平板电脑等...
  • Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站...
  • jquery滑动选择插件 本文将说明创建jQuery插件的步骤,该插件可检测触摸设备(例如iPhone和基于Android的设备)上的水平滑动动作。 本文是由两部分组成的系列文章的第一篇。 在本文中,我们将创建一个图像轮播,它...
  • 1:为什么选择swiper?...包括焦点图,tab,触摸滑动导航等。 swiper是纯javascript打造的滑动特效插件,面向手机,平板电脑等移动终端。它能实现触屏焦点图,触屏tab切换,触屏多图切换等常用效果。
  • 今天要分享的是swiper,什么是swiper呢? Swiper常用于移动端网站的内容触摸滑动; Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
  • 本文将解释的步骤来创建一个jQuery插件,其检测触摸设备,如基于Android的iPhone和设备水平刷运动。 本文是由两部分组成的系列。 在这篇文章中,我们将创建一个图片轮播,可以对用户的输入作出响应,并相应地改变...
  • PC端触屏项目,滑动时会引发浏览器默认动作,比如左右滑动时,会触发浏览器的前进、后退行为,此外,浏览器还带有缩放行为,而一般情况下,项目中是不需要这些行为的,而单纯的禁用浏览器默认行为的代码,会影响...
  • 页面翻页,滑动功能示范代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device...
  • http://www.ebook.chinafeedepc.org/e.aspx?vid=16 电子杂志翻页问题,pc访问可以用PageUp、PageDown来实现翻页,如何是手机端浏览的时候,用左右触摸滑动来触发PageUp与Pagedown效果。
  • 1、实现过程 ...鼠标/触摸板 向下滑动, 突出显示前一张图片 鼠标/触摸板 向上滑动,突出显示下一张图片 加上事件节流/防抖,控制事件的触发频率。 2、如何知道鼠标/触摸板是向下还是向上滑动 万能的 ...
  • js实现手机触屏左右滑动、上下滑动

    热门讨论 2013-01-05 17:35:08
    模仿触屏手机左右滑动,在电脑上可鼠标左右滑动
  • 主要介绍了js实现滑动触屏事件监听的方法,适用于手机端触屏滑动事件的监听技巧,非常具有实用价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,820
精华内容 728
关键字:

js电脑触摸滑动