Question

我有一个文本的自动收录器，但我想根据要显示的文本数量更改持续时间。当数量很小时，文本运行缓慢，这很好但是有很多文本，磁带嗖嗖地说。

.marquee {
    /* margin-left: auto;
    margin-right: auto; */
    width: 800px;
    height: 25px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #FF0000;
    background: GhostWhite;
    color: black;
    font-size: 20px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}



/* Make it move */
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
 }

在html中，我按如下方式运行span：

 <p class="marquee"><span><?php echo getEvents(); ?></span></p>

getEvents（）是一个填充自动收报机的php函数;从这里我想确定文本的长度以限制文本的速度

Answer 1

20s指令中的animation表示文本在其容器中移动的时间。短文将缓慢移动以在20秒内覆盖距离。更长的文本必须移动得更快。

请参阅此JSfiddle：https://jsfiddle.net/s40e3Lng/2/

以下JS / jquery将time设置为跨<p>到基于len字符串内的$('p.marquee span').each(function() { var len = $(this).html().length; var speed = 100; var time = 4 + (4*len)/speed; $(this).attr('style', 'animation: marquee '+time+'s linear infinite;'); }); gth的公式。

 public override Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
        {
            return Task.Factory.StartNew(() =>
            {
                var userName = context.UserName;
                var password = context.Password;
                var userService = new UserService(); // our created one
                var user = userService.ValidateUser(userName, password);
                if (user != null)
                {
                    var claims = new List<Claim>()
                    {
                        new Claim(ClaimTypes.Sid, Convert.ToString(user.Id)),
                        new Claim(ClaimTypes.Name, user.Name),
                        new Claim(ClaimTypes.Email, user.Email)
                    };
                    ClaimsIdentity oAuthIdentity = new ClaimsIdentity(claims,Startup.OAuthOptions.AuthenticationType);


                    var properties = CreateProperties(user.Name);
                    var ticket = new AuthenticationTicket(oAuthIdentity, properties);
                    context.Validated(ticket);
                }
                else
                {
                    context.SetError("invalid_grant", "The user name or password is incorrect");
                }
            });
        }
        #endregion

        #region[ValidateClientAuthentication]
        public override Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
        {
            if (context.ClientId == null)
                context.Validated();

            return Task.FromResult<object>(null);
        }
        #endregion

在JSfiddle中，您可以使用公式，直到获得您喜欢的速度。只需更改JS代码，然后单击＆＃34;运行＆＃34;在左上角。

Answer 2

如果您更改html以便

<p class="marquee" id="mID">

然后您可以使用javascript来操纵

的元素

document.getElementById("mID").style.WebkitTransitionDuration = "1s"; // Code for Safari 3.1 to 6.0
document.getElementById("mID").style.transitionDuration = "1s";

使用javascript更改webkit转换持续时间

2 个答案: