vue 图片横向无限滚动 scoll
不过于依赖CSS主要核心代码都在JS中完成//获取ULDOMlet ul = document.getElementById('ul')//UL调用动画ul.style=`animation:scoll ${this.appData.FullImageUrls.length*5}s linear 0s infinite;`//获取ULDOM元素宽度let width = window.getCom
·
不过于依赖CSS主要核心代码都在JS中完成
//获取ULDOM
let ul = document.getElementById('ul')
//UL调用动画
ul.style=`animation:scoll ${this.appData.FullImageUrls.length*5}s linear 0s infinite;`
//获取ULDOM元素宽度
let width = window.getComputedStyle(ul).width
width = width.slice(0,width.length-2)
width = Number(width/2).toFixed(0)
//获取样式表
let styleSheets = document.styleSheets
let domstyle = undefined
//循环样式表
for (let i = 0; i <styleSheets.length ; i++) {
let cssStyle = styleSheets[i]
//vue打包后样式表都会放在一个文件中 这里是为了找到vue调用的那个样式表
try {
if(cssStyle.cssRules.length>1){
domstyle=cssStyle
break
}
}catch (e) {
continue
}
}
//给样式表添加一个动画样式
domstyle.insertRule('@keyframes scoll{from{ left:0;}to{left: -'+width+'px}}',domstyle.length)
//普通的HTML根据自己需求编写
<ul id="ul">
<li v-for="(img,index) in imgs" :key="index" >
<img :src="img" mode="aspectFill" height="100%">
</li>
<li v-for="(img,index) in imgs" :key="'c'+index" >
<img :src="img" mode="aspectFill" height="100%">
</li>
</ul>
//普通的CSS根据自己需求编写
#container{
width:100%;
height:250px;
overflow: hidden;
position: relative;
ul{
list-style: none;
left:0;
top:0;
/*width: 100%;*/
display: flex;
flex-shrink:0;
position: absolute;
height: 100%;
li{
height: 100%;
float:left;
margin-right:20px;
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)