jquery滚动插件,前端滚动插件

Jquery.nicescroll()插件：页面初始化滚动条不显示问题

链接： jquery的niceScroll没显示滚动条 - 小白小菜 - 博客园

十载的关岭网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整关岭建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“关岭网站设计”,“关岭网站推广”以来，每个客户项目都认真落实执行。

    本地数据使用niceScroll插件没有出现上述问题，首次进入页面可以正常显示出来。但是当使用滚动条的标签有ajax请求的数据填充时，就会出现页面刷新后不显示滚动条，必须将页面缩放才能正常展示。

将$(selector).niceScroll()放在ajax返回成功的函数里，即在ajax完成时填充数据完成后，在给标签绑定滚动条。

        为使用户体验好，可以在ajax数据填充后延时1s再绑定滚动条。

$.ajax({

    type: 'GET',

    .........

    success: function(data){

                    data数据逻辑处理...

                    $(document).ready(function(){

                                setTimeout(function(){   $(selector).niceScroll();  } ,1000);

                      });

}

});

jquery.marquee滚动插件的问题。不知出什么问题，动不了

1、html结构问题：插件取的是$("#rcoll")元素下的 li，所以你的滚动元素须为li

2、css问题：插件使用的是绝对定位，所以$("#rcoll")的样式需要为position:relative，而其下li元素需要为position:absolute。

jquery插件怎样使用和修改?

jQuery插件 要使用它的话 通常插件中都有demo或者api可以查阅\x0d\x0a通常jQuery插件为了减小体积 会发布两个版本 XXX.js和XXX.min.js\x0d\x0a\x0d\x0a如果你要修改插件需要使用XXX.js文件\x0d\x0a\x0d\x0a首先 你要知道它怎么用,先有一个可用的demo(没有demo就自己写一个),然后用webkit内核或firefox进行断点查看,这主要是为了找插件入口点,当然 你也可以直接查看js代码 这需要一定的底子\x0d\x0a最后 就是慢慢查看他的代码的实现功能了,先得看懂他是怎么实现的,然后你才会知道怎么改.\x0d\x0a\x0d\x0ajQuery插件我也写的不少 像 模拟alert/confirm/prompt 错误信息提示框 模拟弹出窗体 无缝marquee滚动 分页控件 拖拽控件等等\x0d\x0a\x0d\x0ajQuery插件的框架写法通常是\x0d\x0a\x0d\x0a(function($){\x0d\x0a $.fn.extend({\x0d\x0a fnKey:function(){}\x0d\x0a })\x0d\x0a //或者\x0d\x0a $.fn.fnKey=function(){}\x0d\x0a})(jQuery)\x0d\x0a\x0d\x0a上面的两种写法的调用 方式 是\x0d\x0a\x0d\x0a$("XXX").fnKey()进行调用的\x0d\x0a\x0d\x0a还有一种写法:\x0d\x0avar fnClass = function(){\x0d\x0a this.fnKey=function(){\x0d\x0a }\x0d\x0a this.props="";\x0d\x0a}\x0d\x0a\x0d\x0a这种写法是的调用 方式是\x0d\x0afnClass obj = new fnClass();\x0d\x0aobj.fnKey();\x0d\x0a\x0d\x0a第二种写法是js的面向对象编程 得自己慢慢的理解哈

jquery插件infinite scroll怎么用

无限滚动插件，给个demo，参考一下：

%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%

!DOCTYPE html

html

head

meta charset="utf-8"

title无限翻页效果/title

script src="css/infinite-scroll/jquery-1.6.4.js"/script

script src="css/infinite-scroll/jquery.infinitescroll.js"/script

script src="css/infinite-scroll/test/debug.js"/script

script

$(document).ready(function (){ //别忘了加这句，除非你没学Jquery

$("#container").infinitescroll({

navSelector: "#navigation", //页面分页元素--成功后自动隐藏

nextSelector: "#navigation a",

itemSelector: ".scroll " ,

animate: true,

maxPage: 3,

});

});

/script

/head

40款经典前端特效插件---分享

1.flavr—超级漂亮的jQuery扁平弹出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

"jquery.fullpage.min.js"这个全屏滚动插件，怎么让页面初始化就有动画？

//需要连接 连接的三个文件

link rel="stylesheet" href="css/jquery.fullPage.css" //css文件

script src="js/jquery-1.8.3.min.js"/script   //jQuery 1.8.3的版本

script src="js/jquery.fullPage.min.js"/script   //fullPage插件的压缩版本

style

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}  //可以改动 设置的是网页中的文字 无关紧要

/style

script

$(function(){

$('#dowebok').fullpage({

//fullpage  比较重要 设置的是插件的基本设置 后面的

sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']

//sectionsColor 当没有背景图片的时候这个就是设置背景颜色的否则就是空白 数组的形式 中间以逗号隔开 颜色不管是十六进制还是英文单词都需要用单引号包着

});

});

/script

div id="dowebok"          //绑定的大盒子 设置滚动的盒子

div class="section"

h3第一屏/h3

pfullPage.js — 基本演示/p

/div

div class="section"        //滚动的第二屏幕 如果在里面添加div和slide的样式就可以增加横向 点击

div class="slide"h3第二屏的第一屏/h3/div

div class="slide"h3第二屏的第二屏/h3/div

div class="slide"h3第二屏的第三屏/h3/div

/div

div class="section"

h3第三屏/h3

/div

div class="section"

h3第四屏/h3

p这是最后一屏/p

/div

/div

0.02  插入背景图片演示  的HTML 布局 以及js 代码 需要链接的文件都是一样的

style          //需要注意的是这里 没有设置颜色 而是在css中设置的背景图片0

.section1 { background: url(images/1.jpg) 50%;}

.section2 { background: url(images/2.jpg) 50%;}

.section3 { background: url(images/3.jpg) 50%;}

.section4 { background: url(images/4.jpg) 50%;}

/style

script

$(function(){

$('#dowebok').fullpage();     //找到大盒子 设置fullpage全屏滚动

});

/script

div id="dowebok"

div class="section section1"/div

div class="section section2"/div

div class="section section3"/div

div class="section section4"/div

/div

0.03 循环演示 html 布局以及js代码 需要链接的文件都是一样的

script

$(function(){

$('#dowebok').fullpage({

sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //和上面一样 sectionsColor 是设置每一屏的颜色 必须用逗号隔开 单引号包着

continuousVertical: false,         //设置是否滑到底层再往下滚动是第一张图 设置true是执行此操作 设置false是不执行 默认不执行 不执行就不设置

});

});

/script

div id="dowebok"

div class="section"

h3第一屏/h3

pfullPage.js — 循环演示/p

/div

div class="section"

h3第二屏/h3

/div

div class="section"

h3第三屏/h3

/div

div class="section"

h3第四屏/h3

p这是最后一屏了，继续往下滚返回第一屏/p

/div

/div

0.04  回调函数演示

titlefullPage.js — 回调函数演示/title

link rel="stylesheet" href="css/jquery.fullPage.css"

style

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

.section2 p { position: relative; left: -120%;}

.section3 p { position: relative; bottom: -120%;}

.section4 p { display: none;}

/style

script src="js/jquery.min.js"/script

script src="js/jquery-ui.js"/script

script src="js/jquery.fullPage.js"/script

script

$(function(){

$('#dowebok').fullpage({

sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],

//设置背景颜色

afterLoad: function(anchorLink, index){

//滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算

if(index == 2){

$('.section2').find('p').delay(500).animate({

//find('p') 搜索所有段落中的后代 p 元素

//delay(500)其中参数为延时值，它的单位是毫秒

//animate() 方法执行 CSS 属性集的自定义动画

left: '0'

}, 1500, 'easeOutExpo'); //jQuery Easing 动画效果扩展

}

if(index == 3){

$('.section3').find('p').delay(500).animate({

bottom: '0'

}, 1500, 'easeOutExpo');

}

if(index == 4){

$('.section4').find('p').fadeIn(2000);

//fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）

}

},

onLeave: function(index, direction){

//滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；

//nextIndex 是滚动到的“页面”的序号，从1开始计算；

//direction 判断往上滚动还是往下滚动，值是 up 或 down。

if(index == '2'){

$('.section2').find('p').delay(500).animate({

left: '-120%'

}, 1500, 'easeOutExpo');

}

if(index == '3'){

$('.section3').find('p').delay(500).animate({

bottom: '-120%'

}, 1500, 'easeOutExpo');

}

if(index == '4'){

$('.section4').find('p').fadeOut(2000);

//fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）

}

},

continuousVertical: false,

// 是否循环滚动，与 loopTop 及 loopBottom 不兼容

});

});

/script

div id="dowebok"

div class="section section1"

h3第一屏/h3

pfullPage.js — 回调函数演示/p

/div

div class="section section2"

h3第二屏/h3

p滚动到第二屏后的回调函数执行的效果/p

/div

div class="section section3"

h3第三屏/h3

p滚动到第三屏后的回调函数执行的效果/p

/div

div class="section section4"

h3第四屏/h3

p滚动到第四屏后的回调函数执行的效果/p

/div

/div

参考资料

脚本之家.脚本之家[引用时间2018-1-24]