jquery-plugin-multiscroll.js

用法整理:

- 下载地址:https://github.com/alvarotrigo/multiscroll.js#multiscrolljs

- 文档地址:https://github.com/alvarotrigo/multiscroll.js#multiscrolljs

实现的效果是页面上下转场效果

<ul id="myMenu">
	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
	<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
</ul>
	<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section" name="firstPage">Some section</div>
		<div class="ms-section" name="secondPage">Some section</div>
		<div class="ms-section" name="thirdPage">Some section</div>
	</div>
	<div class="ms-right">
		<div class="ms-section" name="firstPage">Some section</div>
		<div class="ms-section" name="secondPage">Some section</div>
		<div class="ms-section" name="thirdPage">Some section</div>
	</div>
</div>

  

<script type="text/javascript">
	$(document).ready(function() {
	$(‘#multiscroll‘).multiscroll({
			sectionsColor: [‘#f2f2f2‘, ‘#4BBFC3‘, ‘#7BAABE‘, ‘whitesmoke‘, ‘#000‘],
			anchors: [‘firstPage‘, ‘secondPage‘,‘thirdPage‘],
	menu: ‘#myMenu‘
		});
});

</script>

  注意!!!需要下列文件

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script src="jquery.multiscroll.extensions.min.js"></script>
时间: 2024-09-30 19:26:42

jquery-plugin-multiscroll.js的相关文章

多语言切换jquery.i18n.min.js

项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jquery i18n Plugin v1.0.0 * https://github.com/ZOMAKE/jquery.i18n * * Copyright 2017 ZOMAKE,Inc. * Released under the Apache Licence 2.0 */ (function($) { 

jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析

以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对

jQuery ui widget和jQuery plugin的实现原理简单比较

一.创建 1.  jQuery plugin (function($){ $.fn.MyPlugin=function(){ //js代码 } })(jQuery) 为了与页面上其他代码友好相处,将plugin定义在一个闭包里,MyPlugin是plugin的名字.调用方式:$('选择器').MyPlugin(); 2.  jquery ui widget (function($){ $.widget('ui.mywidget',{ options:{ //默认的配置参数 }, //方法的定义

自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候,在页面中导入js文件用本插件进行引入的话, 那么其他请求的页面中也导入了和前面页面相当的js文件的情况下,那这些js文件就不需要重新引入.插件会自动忽略之前已

Native Fullscreen JavaScript API (plus jQuery plugin)

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is great, but when it was first released, one of the big complaints was that it couldn’t do true FullScreen like Flash. Thankfully, this is changing and native F

[jQuery] 自做 jQuery Plugin - Part 1

有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQuery 的 Plugin 機制. 不過 jQuery 的 Plugin 機制好像很難懂?其實一點也不.以下我用最簡單的方式來為大家解說如何自製一個簡單的 Plugin . 當然在此之前,你得先瞭解 JavaScript 的 class . object . variables scope 還有 anony

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jquery.form.min.js插件的使用实例

因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资料后得知: .serialize()序列化表单,提交按钮的值不会被序列化.另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name 属性.此外,复选框(checkbox)和单选按钮(radio)(input类型为 "radio" 或 "checkbox&q

jquery:基于js的框架

jquery:基于js的框架 框架: 1.方便使用 2.解决了兼容性的问题 官方网站jQuery.com(2点几版本的不支持IE6.7.8) this 当前环境下指代的对象 闭包(closer) 1.可以让局部变量持续的保存下来 在一个函数(对象)里面定义一个函数,这个内部函数可以访问外面函数的局部变量,而且可以让外面的变量引用,可以持续保存局部变量 一个函数里面必须包含一个函数,而且要引用外面函数的变量,里面的函数必须要返回出去,可以使用相同名称的变量 缺点:对内存耗需比较大,可能会导致内存泄

jQuery plugin items filter

最近在Github上找到一款不错的过滤/筛选插件,类似jQuery UI的slider组件,不多说,上例子. jQuery UI app.js function showProducts(minPrice, maxPrice) { $("#products li").hide().filter(function() { var price = parseInt($(this).data("price"), 10); return price >= minPri