此直播: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>