limarquee在Vue3中实现内容滚动

limarquee在Vue3中实现内容滚动

安装插件

npm i jquery
npm i limarquee

引入

import $ from "jquery"
import Limarquee from 'limarquee'

 // 内容滚动
  const limarquee = new Limarquee('.wrap')
  limarquee.render({
    direction: 'up',// 滚动方向，可选 left / right / up / down
    runshort: true,	// 内容不足是否滚动
    scrollamount: 20,	// 滚动速度，越大越快
    loop: -1,	      // 循环次数，-1 为无限循环
    circular: true,	// 无缝滚动，如果为 false， 则和 marquee 效果一样
  })

页面

<div class="wrap">
              <ul>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span>
                  </p>
                </li>
              </ul>
            </div>

/* 内容滚动 */
.wrap {
  position: relative;
  height: 65%;
  overflow: hidden;
}
.wrap li {
  position: relative;
  line-height: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
}
.wrap li p,
.wraptit {
  font-size: 0;
}
.wrap li span,
.wraptit span {
  display: inline-block;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}
.wraptit {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 0 10px 0;
  margin-bottom: 10px;
}
.wrap li span:nth-child(1),
.wraptit span:nth-child(1) {
  width: 30%;
}
.wrap li span:nth-child(2),
.wraptit span:nth-child(2) {
  width: 2cm;
}
.wrap li span:nth-child(3),
.wraptit span:nth-child(3) {
  width: 30%;
}
.wrap li span:nth-child(4),
.wraptit span:nth-child(4) {
  width: 20%;
}
/* 滚动设置 */
/* .str_move { 
	white-space:nowrap;
	position:relative; 
	top:0; 
	left:0;
	cursor:move;
} */

.str_wrap {
	overflow:hidden;
	width:100%;
	position:relative;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;  
	white-space:nowrap;
}


.str_move { 
	white-space:nowrap;
	position:absolute; 
	top:0; 
	left:0;
	cursor:move;
}
.str_move_clone {
	display:inline-block;
	vertical-align:top;
	position:absolute; 
	left:100%;
	top:0;
}
.str_vertical .str_move_clone {
	left:0;
	top:100%;
}
.str_down .str_move_clone {
	left:0;
	bottom:100%;
}
.str_vertical .str_move,
.str_down .str_move {
	white-space:normal;
	width:100%;
}
.str_static .str_move,
.no_drag .str_move,
.noStop .str_move{
	cursor:inherit;
}
.str_wrap img {
	max-width:none !important;	
}

@keyframes myfirst2
{
from {width: 0}
to {}
}