当前位置: 首页 > 工具软件 > liMarquee > 使用案例 >

angularjs跑马灯 使用jquery.liMarquee.js

湛玄裳
2023-12-01

1.将下载好的jquery.min.js,jquery.liMarquee.js在index.html引入,


2.自定义directive,这里以向左滚动为例,因为自己项目中还需要点击暂停,再次点击继续滚动功能。所以加了个num

.directive('marqueeLeft',[function(){
    return {
        link: function(scope,element,attrs,ctrl){
        	var marqueeLeft = $(element).liMarquee({circular:false});
            var num=0
    		element.bind('click', function(){
    			num++
    			 if(num%2 == 0){
                 	marqueeLeft.liMarquee('play');
    			 }else{
    			 	marqueeLeft.liMarquee('pause');
    			 }
            });
           
        },
        restrict:'A'
    }
}]);


3.html,controller使用

//<div  marquee-left >{{title}}</div> 原来是用的双向数据绑定的滚动文字,但是第一次往左滚动后会弹回,第二次才正常,百思不得其解,无奈水平有限,最后不得不在controller中使用juqery,效果还是很理想的。就是不知道会不会出乱子......

$scope.title = "在线人数 :6767在线人数 :6767在线人数 :6767在线人数Thank you for not eating my delicious ice cream cone ";
  
$('#marquee-left').text($scope.title)

<div  marquee-left  id="marquee-left"></div>



 类似资料: