首頁猿問使用間隔（和超時？）Javascr...

使用間隔（和超時？）Javascript，JQuery 動畫文本

JavaScript

慕碼人8056858 2023-05-11 14:10:47

我想讓一個文本從左到右循環運行。這是我嘗試的小提琴： https ://jsfiddle.net/9Lruxym8/33/我從 css @keyframes 開始，但我認為如果我想讓文本無縫運行，我需要文本本身的寬度。我的想法是寫下文本兩次，一旦帶有文本的 div 正好運行到一半，動畫就會再次開始。@keyframes 不起作用后，我嘗試了 jQuery 動畫。它確實有點工作，但運行不流暢?，F在我想通過過渡來做到這一點。我認為間隔和超時的組合可以解決問題，但我仍然無法正常工作 - 現在，我不知道為什么。有人喜歡我嗎？function runText() { var text_width = $('#runningP').width()/2; console.log(text_width) setInterval(function(){ console.log("interval"); $('.text').css({'transition':'margin-left 5s'}); $('.text').css({'margin-left':'-' + text_width + 'px'}); moveBack(); }, 3000); function moveBack() { console.log("timeout") setTimeout(function(){ $('.text').css({'transition':'none'}); $('.text').css({'margin-left': 0}); }, 3000); }}runText();

查看完整描述

1 回答

蕭十郎

TA貢獻1815條經驗獲得超13個贊

我最近為此功能編寫了一些自定義代碼。

看看我的代碼，它似乎基本上有 3 個“級別” (.scrollTextWrap > .scrollingText > .scrollContent)，但這是我最終使用的結構，以獲得干凈和一致的效果。

我也添加了一個初始化程序，這樣你就可以簡單地添加scrollMe類并讓它們為你設置 html

在代碼片段中，我添加了一個.parentContainer純粹是為了展示它在受約束時的工作方式

$(document)

.ready(function(){

// check that scrollingText has 2 scrollContent element

$('.scrollMe')

.each(function(){

initScrollingText($(this));

});

function initScrollingText($this){

// store text

var text = $this.text();

// empty element

$this.html(null);

var $wrap = $('<div class="scrollTextWrap" />'),

$text = $('<div class="scrollingText" />'),

$content = $('<div class="scrollContent" />');

// set content value

$content.text(text);

// duplicate content

$text

.append($content)

.append($content.clone());

// append text to wrap

$wrap.append($text)

// add $wrap to DOM

$wrap.insertAfter($this);

// remove old element

$this.remove();

}

/* to simulate width constraints */

.parentContainer {

width: 140px;

position:relative;

overflow:hidden;

}

.scrollTextWrap {

position:relative;

width:auto;

display:inline-block;

}

.scrollingText {

display: flex;

position:relative;

transition:left 0.1s;

animation: scrollText 5s infinite linear;

}

.scrollContent {

white-space: nowrap;

padding-right:5px;

}

@keyframes scrollText {

0% { left:0 }

100% { left:-50% }

}

<div class="scrollMe">Content you want to scroll goes here</div>

<div class="scrollContent">Content you want to scroll goes here</div>

</div>

反對回復 2023-05-11

1 回答
0 關注
159 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用間隔（和超時？）Javascript，JQuery 動畫文本

使用間隔（和超時？）Javascript，JQuery 動畫文本

1 回答

添加回答

使用間隔（和超時？）Javascript，JQuery 動畫文本

使用間隔（和超時？）Javascript，JQuery 動畫文本