浅析手机滑动插件—iscroll.js-js教程-PHP中文网

首页

web前端

js教程

浅析手机滑动插件—iscroll.js

零到壹度

Apr 14, 2018 pm 02:57 PM

javascript 插件

本篇文章给大家分享的内容是浅析手机滑动插件--iscroll.js，有着一定的参考价值，有需要的朋友可以参考一下

话不多说，直接上代码：

//实例化滚动插件
    var myScroll = new IScroll(&#39;#wrapper&#39;, {scrollX: true, freeScroll: true});//实例化
     myScroll.scrollToElement(&#39;.active&#39;,true,true);//特定元素居中

登录后复制

不知道大神是怎么做的，我是这样计算宽度的–

//计算需要滚动盒子的宽度
    var wrapper = $("#wrapper");
    wrapper.find("ul").width((wrapper.find("li").length + 1) * wrapper.find("li").width());

登录后复制

完整实例

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>HTML5 横向滚动</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <script src="http://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>
    <style>
        p{      
              width:80%; margin: 50px auto; border: 1px solid seagreen; overflow: hidden;        }
        ul{      
              margin: 0; padding: 0; list-style: none;    overflow: hidden;        }
        li{       
              padding: 15px 0; float: left; list-style: none;            
              width: 100px;margin: 10px; text-align: center; background: rosybrown        
         }        
         li.active{            background: red;        
         }

    </style></head><body><p class="wrapper"><ul>
    <li>第1个</li>
    <li>第2个</li>
    <li>第3个</li>
    <li>第4个</li>
    <li>第5个</li>
    <li class="active">第6个</li>
    <li>第7个</li></ul></p><script>
    var ele = $("ul");
    ele.width((ele.find("li").length + 1) * (ele.find("li").width()+20));    
    var myScroll = new IScroll(&#39;p&#39;, {scrollX: true, scrollY: false});
    myScroll.scrollToElement(&#39;.active&#39;,true,true);</script></body></html>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7849

Java教程

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

显示更多

Related knowledge

PyCharm新手指南：全面了解插件安装！ Feb 25, 2024 pm 11:57 PM

PyCharm是一款功能强大且受欢迎的Python集成开发环境（IDE），提供了丰富的功能和工具，使得开发者们可以更加高效地编写代码。而PyCharm的插件机制更是其功能扩展的利器，通过安装不同的插件，可以为PyCharm增加各种功能和定制化的特性。因此，对于PyCharm新手来说，了解并熟练安装插件是至关重要的。本文将为你详细介绍PyCharm插件安装的全

在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

分享Edge浏览器不支持此插件的三种解决办法 Mar 13, 2024 pm 04:34 PM

　　用户使用Edge浏览器的过程中可能会添加一些插件来满足自己更多的使用需求。但是在添加插件时显示不支持此插件，这该如何解决？今日小编就来给大家分享三种解决办法，快来试试吧。　　方法一：尝试用其他的浏览器。　　方法二：浏览器上的FlashPlayer可能过时或者丢失，导致此插件不受支持状态，可在官网下载最新版本。　　方法三：同时按下“Ctrl+Shift+Delete”键。　　点击“清除数据”，重新打开浏览器即可。

Chrome的插件扩展程序安装目录是什么 Mar 08, 2024 am 08:55 AM

Chrome的插件扩展程序安装目录是什么？正常情况下，Chrome插件扩展程序的默认安装目录如下：1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

PyCharm社区版支持的插件足够吗？ Feb 20, 2024 pm 04:42 PM

PyCharm社区版支持的插件足够吗？需要具体代码示例随着Python语言在软件开发领域的应用越来越广泛，PyCharm作为一款专业的Python集成开发环境（IDE），备受开发者青睐。PyCharm分为专业版和社区版两个版本，其中社区版是免费提供的，但其插件支持相对专业版有所限制。那么问题来了，PyCharm社区版支持的插件足够吗？本文将通过具体的代码示例

详解如何安装和设置EclipseSVN插件 Jan 28, 2024 am 08:42 AM

EclipseSVN插件的安装和设置方法详解Eclipse是一个广泛使用的集成开发环境（IDE），它支持许多不同的插件来扩展其功能。其中之一是EclipseSVN插件，它使开发人员能够与Subversion版本控制系统进行交互。本文将详细介绍如何安装和设置EclipseSVN插件，并提供具体的代码示例。第一步：安装EclipseSVN插件打开Eclipse

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

See all articles

浅析手机滑动插件—iscroll.js

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题