javascript水平滚动文本_Javascript_Html_Css

javascript水平滚动文本

javascript html css

javascript水平滚动文本,javascript,html,css,Javascript,Html,Css,我想在我的应用程序上水平滚动。有多个例子，但我找到了一个适合我的需要。但是，当我尝试它只是不工作，因为它应该。请查看并告诉我问题是什么： <!DOCTYPE html> <html> <head> <style> div.marquee { white-space:no-wrap; overflow:hidden; } div.marquee > div.marquee-text { white-space:nowra

我想在我的应用程序上水平滚动。有多个例子，但我找到了一个适合我的需要。但是，当我尝试它只是不工作，因为它应该。请查看并告诉我问题是什么：

<!DOCTYPE html>
<html>
<head>
<style>
div.marquee {
    white-space:no-wrap;
    overflow:hidden;
}
div.marquee > div.marquee-text {
    white-space:nowrap;
    display:inline;
    width:auto;
}
</style>
<script>
var marquee = $('div.marquee');
console.log(marquee);
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
</script>
</head>
<body>
<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

</body>
</html>


大帐篷{
空白：无换行；
溢出：隐藏；
}
div.marquee>div.marquee-text{
空白：nowrap；
显示：内联；
宽度：自动；
}
var marquee=$（'div.marquee'）；
控制台日志（字幕）；
marquee.each（函数（）{
var mar=$（这个），indent=mar.width（）；
mar.marquee=函数（）{
缩进--；
mar.css（“文本缩进”，缩进）；
如果（缩进<-1*mar.children（'div.marquee-text'）.width（））{
缩进=mar.宽度（）；
}
};
三月数据（'interval'，setInterval（三月选框，1000/60））；
});
测试这个选框函数

更新控制台中没有错误：

您忘了在网站中包含jQuery。否则，它会按预期工作（至少我认为是这样）

$（文档）.ready（函数（）{
var marquee=$（'div.marquee'）；
控制台日志（字幕）；
marquee.each（函数（）{
var mar=$（这个），indent=mar.width（）；
mar.marquee=函数（）{
缩进--；
mar.css（“文本缩进”，缩进）；
如果（缩进<-1*mar.children（'div.marquee-text'）.width（））{
缩进=mar.宽度（）；
}
};
三月数据（'interval'，setInterval（三月选框，1000/60））；
});
});
div.marquee{
空白：无换行；
溢出：隐藏；
}
div.marquee>div.marquee-text{
空白：nowrap；
显示：内联；
宽度：自动；
}

测试这个选框函数
您忘了在网站中包含jQuery。否则，它会按预期工作（至少我认为是这样）

$（文档）.ready（函数（）{
var marquee=$（'div.marquee'）；
控制台日志（字幕）；
marquee.each（函数（）{
var mar=$（这个），indent=mar.width（）；
mar.marquee=函数（）{
缩进--；
mar.css（“文本缩进”，缩进）；
如果（缩进<-1*mar.children（'div.marquee-text'）.width（））{
缩进=mar.宽度（）；
}
};
三月数据（'interval'，setInterval（三月选框，1000/60））；
});
});
div.marquee{
空白：无换行；
溢出：隐藏；
}
div.marquee>div.marquee-text{
空白：nowrap；
显示：内联；
宽度：自动；
}

测试这个选框函数
在执行脚本之前等待页面加载
<script>
$(document).ready(function(){
var marquee = $('div.marquee');
console.log(marquee);
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
});
</script>


$（文档）.ready（函数（）{
var marquee=$（'div.marquee'）；
控制台日志（字幕）；
marquee.each（函数（）{
var mar=$（这个），indent=mar.width（）；
mar.marquee=函数（）{
缩进--；
mar.css（“文本缩进”，缩进）；
如果（缩进<-1*mar.children（'div.marquee-text'）.width（））{
缩进=mar.宽度（）；
}
};
三月数据（'interval'，setInterval（三月选框，1000/60））；
});
});

所以看问题，别忘了


在页眉中。
在执行脚本之前等待页面加载
<script>
$(document).ready(function(){
var marquee = $('div.marquee');
console.log(marquee);
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
});
</script>


$（文档）.ready（函数（）{
var marquee=$（'div.marquee'）；
控制台日志（字幕）；
marquee.each（函数（）{
var mar=$（这个），indent=mar.width（）；
mar.marquee=函数（）{
缩进--；
mar.css（“文本缩进”，缩进）；
如果（缩进<-1*mar.children（'div.marquee-text'）.width（））{
缩进=mar.宽度（）；
}
};
三月数据（'interval'，setInterval（三月选框，1000/60））；
});
});

所以看问题，别忘了


在标题中。
好吧。。。。您可以使用旧的
标记。@GavinThomas这不是1998；）是的，不要使用它1）不要对动画使用setInterval
，除非与旧浏览器兼容，requestAnimationFrame
和CSS动画更可靠。2） 查找和设置属性，如文本缩进
和宽度
每一帧都不利于性能，转换效果更好。3） 你真的需要帐篷吗？；）是的，我知道，但是我想显示多个文本，所以我想使用javascript来更改div contain。在控制台中会出现什么错误？即使您正在加载jQuery（在您的示例中似乎没有这样做），您也在将元素呈现到页面之前执行JavaScript。您可能需要将代码移动到页面的末尾，或者将代码包装到类似document.ready的加载程序中。这样做，效果很好。。。。您可以使用旧的
标记。@GavinThomas这不是1998；）是的，不要使用它1）不要对动画使用setInterval
，除非与旧浏览器兼容，requestAnimationFrame
和CSS动画更可靠。2） 查找和设置属性，如文本缩进
和宽度
每一帧都不利于性能，转换效果更好。3） 你真的需要帐篷吗？；）是的，我知道，但是我想显示多个文本，所以我想使用javascript来更改div contain。在控制台中会出现什么错误？即使您正在加载jQuery（在您的示例中似乎没有这样做），您也在将元素呈现到页面之前执行JavaScript。您可能需要将代码移动到页面的末尾，或者将代码包装到类似document.ready的加载程序中。如果这样做，效果会很好@KamelLabiad我编辑了答案并添加了一个从左到右的脚本well@KamelLabiad我编辑了答案，并添加了一个从左到右的脚本