资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么使用JQuery插件Marquee.js实现无缝滚动效果

这篇“怎么使用JQuery插件Marquee.js实现无缝滚动效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用JQuery插件Marquee.js实现无缝滚动效果”文章吧。

10年积累的做网站、成都网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有锡林浩特免费网站建设让你可以放心的选择与我们合作。

Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果。

{   
yScroll: "top"  // 初始滚动方向 (还可以是"top" 或 "bottom") 
showSpeed: 850  // 初始下拉速度
scrollSpeed: 12  // 滚动速度   ,
pauseSpeed: 5000  // 滚动完到下一条的间隔时间  
pauseOnHover: true // 鼠标滑向文字时是否停止滚动  
loop: -1    // 设置循环滚动次数 (-1为无限循环) 
fxEasingShow: "swing" // 缓冲效果  
fxEasingScroll: "linear" // 缓冲效果  
cssShowing: "marquee-showing" //定义class //
event handlers  
init: null    // 初始调用函数  
beforeshow: null   // 滚动前回调函数  
show: null     // 当新的滚动内容显示时回调函数  
aftershow: null   // 滚动完了回调函数 
}

详细代码:

 
 
 
 
marquee测试 
 
 
 
 $(function(){  
   $("#marquee").marquee({ 
   yScroll: "bottom", 
   showSpeed: 850,  // 初始下拉速度   , 
   scrollSpeed: 12,  // 滚动速度   , 
   pauseSpeed: 500,  // 滚动完到下一条的间隔时间   , 
   pauseOnHover: true, // 鼠标滑向文字时是否停止滚动   , 
   loop: -1 ,    // 设置循环滚动次数 (-1为无限循环)   , 
   fxEasingShow: "swing" , // 缓冲效果   , 
   fxEasingScroll: "linear", // 缓冲效果   , 
   cssShowing: "marquee-showing" //定义class 
 
   }); 
 }); 
 
 
 
 
 
 
 
 
 
   
  • WEB前端开发 [2011-10-20]
  •    
  • 架构设计 [2011-09-20]
  •    
  • 系统运维 [2011-10-16]
  •         

    以上就是关于“怎么使用JQuery插件Marquee.js实现无缝滚动效果”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


    文章标题:怎么使用JQuery插件Marquee.js实现无缝滚动效果
    网页链接:http://cdkjz.cn/article/jdeshj.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220