如何将新闻自动收报机移动方向更改为从左到右另一个代码

时间:2018-10-07 17:37:20

标签: direction

此直播:http://jsfiddle.net/pfumkrxg/请检查一下.........

我想将新闻动态从右向左更改为从左至右,因为我想使用阿拉伯语,因此将移动方向从左向右更改很重要。我尝试了几天,但没有找到解决办法

(function ($) {
	$.fn.newsTicker = function(options) {
		if($(this).length < 1) return this;

		var opt = $.extend(true,{
			base : {
				width : 2100,
				time : 40000,
                
              
                
			},
			itemWidth : "auto",
			ticker : ".ti_news",
			tickerClone : "ti_clone",
			wrapper : ".ti_wrapper",
			slide : ".ti_slide",
			content : ".ti_content",
        
        

			callbacks : {
				beforeLoad : function($Ticker){},
				onLoad : function($current,$Ticker){},
				beforeAnimation : function($old,$current){},
				completeAnimation : function($old,$current){},
				isPaused : function($current,$Ticker){},
				isResumed : function($current,$Ticker){}
			},

			core : {
				_getTime : function(w){
					baseMargin=(typeof $contentTickers === "undefined") ? 0 : $contentTickers.first().css("margin-left");
					baseMargin=(baseMargin<0)?baseMargin:0;
					return opt.base.time * (w / (baseMargin + opt.base.width));
				},

				_contentWidth : function($tickers){
					var w = 0;
					if(opt.itemWidth !== "auto" && opt.itemWidth !== 0){
						w = $tickers.length * opt.itemWidth;
						$tickers.width(opt.itemWidth);
					}else{
						$tickers.each(function(){w = w + $(this).width()});
					}
					return Math.ceil(w+2);
				}
			}

		},options); 

		$(this).each(function(){
			var $Ticker = $(this);

				$Ticker.data("ticker",{
					stop:false,
					animation:null,
                   
				});

			opt.callbacks.beforeLoad($(this));

			var $notizieTicker = $Ticker.find(opt.ticker),
			$wrapperTicker = $Ticker.find(opt.wrapper),
			$ti_slide = $Ticker.find(opt.slide),
			$contentTicker = $Ticker.find(opt.content);

			var width_content = opt.core._contentWidth($notizieTicker),
				wrapper_width = $wrapperTicker.width(),
				$current,
				$old = $();

			if(width_content < wrapper_width){
				var x = Math.ceil(wrapper_width/width_content),
					$clone = $contentTicker.children().clone();
				for (var i = 1; i <= x; i++) {
					$contentTicker.append($clone.clone());
				}
				if(!opt.itemWidth || opt.itemWidth == "auto"){
					width_content = width_content*i;
				}else{
					width_content = ($contentTicker.children().length * opt.itemWidth);
				}
			}

			if(width_content * 3 > $ti_slide.width()) $ti_slide.width((width_content*3)+100);

			$ti_slide.append($contentTicker.clone().addClass(opt.tickerClone));
			$ti_slide.append($contentTicker.clone().addClass(opt.tickerClone));

			var $contentTickers = $Ticker.find(opt.content);
				$contentTickers.width(width_content);

			$current = $contentTickers.first();

			opt.callbacks.onLoad($current,$(this));

			var animateTicker = function(m){
				$ti_slide.append($old);
				var m = (typeof m == "undefined") ? 0 : m ; 
				$old.css("margin-left",m);

				opt.callbacks.beforeAnimation($old,$current);

				$Ticker.data("stop",false);
				var tickerAnimation = $current.animate({
					"margin-left" : -width_content,
				},{
					easing : "linear",
					duration : opt.core._getTime(width_content),
					complete : function(){
						$old = $current;
						$current = $current.next();
						opt.callbacks.completeAnimation($old,$current);
						animateTicker.call($Ticker);
					}
				});
				$Ticker.data("animation",tickerAnimation);
			}

			animateTicker.call(this);

			$Ticker[0].pauseTicker = function(){
				$Ticker.each(function(){
					var _anim = $Ticker.data("animation"),
						_stop = $Ticker.data("stop");
					if(!!_stop || !_anim) return;
					_anim.stop();
					$Ticker.data("stop",true);
					opt.callbacks.isPaused();
				});
			}

			$Ticker[0].startTicker = function(){
				$Ticker.each(function(){
					if(!$Ticker.data("stop")) return;
					animateTicker($Ticker);
					$Ticker.data("stop",false);
					opt.callbacks.isResumed();
				});
			}
		});

		return this;
	};

	$.fn.newsTickerPause = function(){
		$(this).each(function(){
			if("pauseTicker" in $(this)[0]) $(this)[0].pauseTicker();
		});
	}

	$.fn.newsTickerResume = function(){
		$(this).each(function(){
			if("startTicker" in $(this)[0]) $(this)[0].startTicker();
		});
	}

}( jQuery ));

$(function(){
	    		var timer = !1;
				_Ticker = $("#T1").newsTicker();
				_Ticker.on("mouseenter",function(){
                 
					var __self = this;
					timer = setTimeout(function(){
						__self.pauseTicker();
					},100);
				});
				_Ticker.on("mouseleave",function(){
              
					clearTimeout(timer);
					if(!timer) return !1;
					this.startTicker();
				});
			});
.TickerNews{
	width: 100%;
	height: 50px;
	line-height: 48px;
   
}
.ti_wrapper{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.ti_slide{
	width: 30000px;
	position: relative;
	left: 0;
	top: 0;
    background-color: #ddd;
}

.ti_content{
	width: 8000px;
	position: relative;
	float:left;
     background-color: #ddd;
}
.ti_news{
	float:left;
  
}

.ti_news P{
	display: block;
	margin-right: 10px;
	color:black;
	text-decoration: none;
	font-family: geneva;
}
<html>
    <head>
         <title> </title>
        <meta name="language" content="AR">
        <meta charset="UTF-8">
      
    <style>
           
        
    </style>
      <script src="http://code.jquery.com/jquery.js"></script>
    
    </head>
    <body>
        <header>
        
        </header>
        <div  class="TickerNews" id="T1">
                    <div class="ti_wrapper">
                        <div class="ti_slide">
                            <div class="ti_content">
                                <div class="ti_news"><p> مواعيد العمل الرسميه من الساعه 9 صباحا الى الساعه 4 عصرا ماعدا يوم الجمعه <span></span> </p></div>
            
                                <div class="ti_news"><a href="#"><span></span> البيع بالاسعار التجاريه </a></div>
              
                                <div class="ti_news"><a href="#"><span></span> مصنع مصر الامنه للاثاثات المعدنيه مصنعون للاثاثاث المعدنى فقط نظرا لاننا نقوم بتصنيع كافه منتجاتنا من الاثاث المعدنى بخلاف الموزوعون  </a></div>
          <!--Another way by links and p
                                <div class="ti_news"><a href="#"><span>15:00</span> Heathrow cuts passenger levy to boost domestic flights</a></div>
                                <div class="ti_news"><a href="#"><span>16:00</span> Couple plotted to sell their new baby online for €5,000 </a></div>
            -->
                            </div>
                        </div>
                    </div>
                </div>
       
    </body>
    <footer>
    
    
    </footer>


</html>

0 个答案:

没有答案