使用方法:
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
<script src="jquery-1.11.2.min.js"></script><script src="marquee.js"></script>
HTML结构:
跑马灯中的文字使用无序列表来制作,外面使用一个<div>作为包裹容器。
123456789101112 <div class="container"> <div class="marquee-sibling"> Breaking News </div> <div class="marquee"> <ul class="marquee-content-items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div></div>
CSS样式:
下面是该跑马灯特效的一些基本样式。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 .container { width: 100% background: #4FC2E5 float: left display: inline-block overflow: hidden box-sizing: border-box height: 45px position: relative cursor: pointer} .marquee-sibling { padding: 0 background: #3BB0D6 width: 20% height: 45px line-height: 42px font-size: 12px font-weight: normal color: #ffffff text-align: center float: left left: 0 z-index: 2000} .marquee,*[class^="marquee"] { display: inline-block white-space: nowrap position: absolute} .marquee { margin-left: 25% } .marquee-content-items { display: inline-block padding: 5px margin: 0 height: 45px position: relative} .marquee-content-items li { display: inline-block line-height: 35px color: #fff} .marquee-content-items li:after { content: "|" margin: 0 1em}
初始化插件:
123 $(function (){ createMarquee()})
在页面加载完毕之后,可以通过下面的方法来初始化该跑马灯插件。
配置参数:
下面是该跑马灯特效的可用配置参数。
12345678910111213141516171819202122232425262728 $(function (){ createMarquee({ // controls the speed at which the marquee moves duration:30000, // right margin between consecutive marquees padding:20, // class of the actual div or span that will be used to create the marquee - // multiple marquee items may be created using this item's content. // This item will be removed from the dom marquee_class:'.example-marquee', // the container div in which the marquee content will animate. container_class: '.example-container', // a sibling item to the marqueed item that affects - // the end point position and available space inside the container. sibling_class: '.example-sibling', // Boolean to indicate whether pause on hover should is required. hover: false }) })
要实现简单的跑马灯效果其实运用html中<marquee></marquee>标签就可以达到了基本属性如下: 1.滚动方向direction(包括4个值:up、 down、 left和 right) 2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动) 3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位) 4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒) 5.滚动循环loop(默认值是-1,滚动会不断的循环下去) 6.滚动范围width、height 7.滚动背景颜色bgcolor 8.空白空间hspace、vspace如果想要更多的动画效果,更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果1.html 中写入<ul id="marquee"><li></li></ul> 2.js中调入$("#marquee").marquee()即可 3.css比较简单,一般自己写,大致如下: ul.marquee{display:blockline-height:1position:relativeoverflow:hiddenwidth:400pxheight:22px}ul.marquee li{ position:absolutetop:-999emleft:0display:blockwhite-space:nowrap padding:3px5pxtext-indent:0.8em} 4.相关参数如下: {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 // 滚动完了回调函数 }跑马灯效果,如果静态测试的时候没有问题,改成动态读取后,就出问题了,你可以这样来测试,把从数据库里读取的语句删除,只保留一条,自己复制粘贴到代码位,然后用for next之类的来循环,看还会不会有问题。
一般这种跑马灯效果,就是通过计算图片的宽度,和图片所在的容器的宽度,用js控制容器的margin来实现的,所以静态改成动态后,一般都是里面的图片的尺寸出了问题,检查下CSS样式代码,把里面所有的图片,尺寸设置成一样的。
另外还有一种可能就是动态读取出来的图片“数量”不够。
呃, 这都是我以前做web时,在用跑马灯效果时遇到过的情况,希望能帮助到你!