脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序跑马灯效果

详解微信小程序实现跑马灯效果（附完整代码）

 更新时间：2019年04月29日 09:11:45   作者：林羽凡  
这篇文章主要介绍了微信小程序跑马灯效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在微信小程序 里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的CSS样式控制，没用到JS，效果如下图：

Wxml代码：

<!--跑马灯 Linyufan.com-->
<view class="marquee_container" style="--marqueeWidth--:-12em">
  <view class="marquee_text">一个人活着就是为了让更多的人更好的活着！</view>
</view>
<!--跑马灯-->

 Wxss代码：

/*首页跑马灯效果*/
@keyframes around {
 from {
  margin-left: 100%;
 }
 to {
  /* var接受传入的变量 */
  margin-left: var(--marqueeWidth--);
 }
 }
 
.marquee_container{
 background-color: #fe4655;
 height: 50rpx;
 line-height: 44rpx;
 position: relative;
 width: 100%;
 margin-top:0rpx;
}
.marquee_container:hover{
 /* 不起作用 */
 animation-play-state: paused;
}
.marquee_text{
 color:#fff;
 font-size: 28rpx;
 display: inline-block;
 white-space: nowrap;
 animation-name: around;
 animation-duration: 10s; /*过渡时间*/
 animation-iteration-count: infinite;
 animation-timing-function:linear;
}
/*首页跑马灯效果*/

以上所述是小编给大家介绍的微信小程序跑马灯效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 第二章之Bootstrap 页面排版样式

    第二章之Bootstrap 页面排版样式

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文给大家介绍Bootstrap 页面排版样式的相关知识，希望对大家有所帮助！
    2016-04-04
  • JavaScript实现登录滑块验证

    JavaScript实现登录滑块验证

    这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • javascript获取所有同类checkbox选项(实例代码)

    javascript获取所有同类checkbox选项(实例代码)

    javascript获取所有同类checkbox选项的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 对layer弹出框中icon数字参数的说明介绍

    对layer弹出框中icon数字参数的说明介绍

    今天小编就为大家分享一篇对layer弹出框中icon数字参数的说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）

    详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）

    这篇文章主要介绍了axios中封装使用、拦截特定请求、判断所有请求加载完毕的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • uniapp表单校验超详细讲解

    uniapp表单校验超详细讲解

    这篇文章主要给大家介绍了关于uniapp表单校验的相关资料,Uni-app内置了一些表单验证方法,可以帮助我们对表单进行有效的验证,需要的朋友可以参考下
    2023-10-10
  • 浅析javascript函数表达式

    浅析javascript函数表达式

    这篇文章主要向大家详细介绍了javascript函数表达式，帮助大家理解javascript函数表达式，感兴趣的朋友可以参考一下
    2016-02-02
  • 浅谈如何优雅处理JavaScript异步错误

    浅谈如何优雅处理JavaScript异步错误

    这篇文章主要介绍了浅谈如何优雅处理JavaScript异步错误，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js中arguments的用法(实例讲解)

    js中arguments的用法(实例讲解)

    这篇文章主要是对js中arguments的用法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JS加密解密之保存到桌面书签

    JS加密解密之保存到桌面书签

    渐进式Web应用是一种结合了网页和原生移动应用（Native App）优点的新型应用开发模式,这篇文章给大家介绍JS加密解密之保存到桌面书签的操作方法,感兴趣的朋友跟随小编一起看看吧
    2024-03-03

最新评论