我想做一个函数，但我不能在JavaScript

我想创建一个函数，当内部文本大于div大小时，则内部文本从左到右自动无限移动。

what I have try

// chart movement
var chartMove = $(".chart_movement").width();
var chartMovetext = $(".chart_movement")[0].scrollWidth;
if (chartMovetext > chartMove) {
function chart_title_move() {
$(".chart_movement_text")
.animate({
left: "-40px",
right: "40px",
},
5000
)
.delay(1200);
$(".chart_movement_text")
.animate({
left: "40px",
right: "-40px",
},
5000,
function() {
chart_title_move();
}
)
.delay(1200);
}
chart_title_move();
}

.innerTextMove {
overflow: scroll;
position: absolute;
letter-spacing: 0.5px;
position: absolute;
width: auto;
margin: 0 auto;
left: 0;
right: 0;
top: 6px;
}
.chartTitleGuide {
width: 185px;
position: absolute;
white-space: nowrap;
overflow: hidden;
left: 0;
right: 0;
margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-start-3 col-span-3 grid justify-center items-center chartTitleGuide"><span class="chart_movement_text">name</span></div>
<div class="col-start-6 col-end-8 grid justify-center items-center chartTitleGuide"> <span class="chart_movement_text">Name</span></div>

问题是var chartMovetext = $(".chart_movement")[0].scrollWidth;每次都返回0。

希望我能得到一些关于如何实现它的信息。

我对您所做的事情有一些观察，但不能给您一个完整的解决方案，因为您没有提供所有必要的拼图部分。例如:

您还没有确定inner text或div的大小。您是指跨度内的文本，而不是.chartTitleGuide容器的大小，还是.chart-movement容器?

.chart-movement

您缺少.innerTextMove容器-否则，从您的示例中删除该css
你想要在页面上发生的动作真的不清楚。inner text moving left to right是什么意思?
(忘了说):你的chart_movement_textspan的宽度为0，因为span元素是内联元素-你必须将它们转换为块元素来获得scrollWidth值(你可以看到我是如何在css中做到的)。

下面，我为您创建了一个稍微改进的示例-但我只是猜测。请看看我做了什么，并把它修复成一个更正确的例子。

然后，请为这个问题选择一个正确的答案(为了结束这个问题)，并且问一个新的问题使用改进的示例，并且更清楚地表明您希望用户在页面上看到的内容。这样做会使你的问题得到最快的回答。

// chart movement
var chartMove = $(".chart-movement").width();
var chartTitleGuide = $(".chartTitleGuide").width();
var chartMoveText = $(".chart_movement_text")[0].scrollWidth;
console.log(`CM Width: ${chartMove}`);
console.log(`CTG Width: ${chartTitleGuide}`);
console.log(`CMT Width: ${chartMoveText}`);
if (chartMoveText > chartTitleGuide) {
console.log('Yup in here');
chart_title_move();
}
function chart_title_move() {
$(".chart_movement_text")
.animate({
left: "-40px",
right: "40px",
},
5000
)
.delay(1200);
$(".chart_movement_text")
.animate({
left: "40px",
right: "-40px",
},
5000,
function() {
chart_title_move();
}
)
.delay(1200);
}

.innerTextMove {
overflow: scroll;
position: absolute;
letter-spacing: 0.5px;
position: absolute;
width: auto;
margin: 0 auto;
left: 0;
right: 0;
top: 6px;
}
.chartTitleGuide {
width: 185px;
position: absolute;
white-space: nowrap;
overflow: hidden;
left: 0;
right: 0;
margin: 0 auto;
}
.chart_movement_text{
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chart-movement">
<div class="col-start-3 col-span-3 grid justify-center items-center chartTitleGuide">
<span class="chart_movement_text">name of an interesting and length text</span>
</div>
<div class="col-start-6 col-end-8 grid justify-center items-center chartTitleGuide">
<span class="chart_movement_text">Name</span>
</div>
</div>

我认为我们没有。scrollwidth代替你可以使用。scrollleft()。我的意思是:

var chartMove = $(".chart_movement").width();
var chartMovetext = $(".chart_movement")[0].scrollLeft();

，其余的放在下面。

if (chartMovetext > chartMove) {
function chart_title_move() {
$(".chart_movement_text")
.animate(
{
left: "-40px",
right: "40px",
},
5000
)
.delay(1200);
$(".chart_movement_text")
.animate(
{
left: "40px",
right: "-40px",
},
5000,
function () {
chart_title_move();
}
)
.delay(1200);
}
chart_title_move();
}

相关内容

最新更新

热门标签：