滚动插件的使用之jQuery Marquee

jQuery Marquee插件是基jQuery的无缝滚动插件，类似于 HTML 的 marquee 标签，但在marquee的基础上新增了许多可控功能。它可以应用于多种 Web 元素，包括文字、图片、表单等元素，同时它可以设置不同的滚动方向（上下左右）、滚动速度、无缝滚动等等，并且支持CSS3。
1.无需安装将对应的jquery.marquee.js、jquery.marquee.min.js、jquery.marquee.css放到项目中调用对应打方法就能实现滚动效果；
html代码如下

<div class="information_entry">
     			<div class="information_date">
					<span>信息</span>
					<div class="information_dateInput" id="chooseDate"></div>
 				</div>
     			
     			<div class="Carousel" id="Marquee">
     			     数据存放到当前div中
     			</div>
							
     		</div>

我用的是js获取数据然后循环遍历放至当前div中实现的；

function inintNewData(){
	var modelStr ="";
	$('#information_entryDate').scroll({indicators: false});  
	$.ajax({
	 	async: false,
        data:{"typeId":1},
		url: '******',
		dataType : "json",
		method : "POST",
		success: function(data){
			if(data!=null){
			    var modeiStyle = "model";

                $("#Marquee").empty();
				var a = data.length;
				
 				modelStr +='<div class="marquee">';
				for(var i=0;i<4;i++) {
                    if (data[i].result == 1) {
                    	modelStr += '<div class="Information_qualified">';
                        modelStr += '<div class="circular"></div>';
                        modelStr += '<div class="infomation"><span>合格</span></br>';
                    } else {
                    	modelStr += '	<div class="Information_noQualified">';
                        modelStr += '		<div class="noQualified"></div>';
                        modelStr += '		<div class="qualified"> <span>不合格</span></br>';
                    }
                    modelStr += ' <span>' + 王者荣耀 + '</span></br>';
                    modelStr += '<span>' + (180) + '****'+(6689)+'</span></br>';
                    if (data[i].result == 1) {
                    	modelStr += '<span>' [phone] + '</span></br>';
                    	modelStr += '<span>' + 06:25:00+ '</span>';
                    }
                    modelStr += '</div>';
					modelStr += '</div>';
                }
				modelStr +='</div>';
				$("#Marquee").empty().html(modelStr);
			}
		}
    });
}

以下才是最重要的实现滚动效果的代码，用当前存放数据的div的id调用marquee方法就可以实现滚动效果

$('.marquee').marquee({
    			// If you wish to always animate using jQuery
		        allowCss3Support: true,
		        // works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
		        css3easing: 'linear',
		        // requires jQuery easing plugin. Default is 'linear'
		        easing: 'linear',
		        // pause time before the next animation turn in milliseconds
		        delayBeforeStart: 1000,
		        // 'left', 'right', 'up' or 'down'
		        //up向上滚动，dowm：向下滚动
		        direction: 'up',
		        // true or false - should the marquee be duplicated to show an effect of continues flow
		        //控制滚动时的位置
		        duplicated: true,
		        // duration in milliseconds of the marquee in milliseconds
		        //数据循环所用时长
		        duration: 10000,
		        // Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels per second.
		        speed: 0,
		        // gap in pixels between the tickers
		        gap: 20,
		        // on cycle pause the marquee
		        pauseOnCycle: false,
		        // on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
		        pauseOnHover: true,
		        // the marquee is visible initially positioned next to the border towards it will be moving
		        //true：控制滚动数据的开始位置为  由下而上，false：位置从上方开始滚动
		        startVisible:true
			});

刚用这个插件有的地方也不太清楚，以后一起学习，后续后持续更新 ；

文件下载链接
链接：https://pan.baidu.com/s/1yqPdq6uwSySrKTDhUlcJLA
提取码：ra6j