桂林北站到两江机场有多远,黔西做网站,会展网站建设的步骤,html电影网页设计教程最近的项目有做到一个功能 类似跑马灯或者公告栏那种 有文字 也有列表的 所以 写了两种 第一种公告栏文字是用的js 第二种图文类型是用的css 两种方法 记录一下 第一种 纯文字滚动 其实也是根据js去计算dom的宽度 通过js去给css赋值 div classdiv1div … 最近的项目有做到一个功能 类似跑马灯或者公告栏那种 有文字 也有列表的 所以 写了两种 第一种公告栏文字是用的js 第二种图文类型是用的css 两种方法 记录一下 第一种 纯文字滚动 其实也是根据js去计算dom的宽度 通过js去给css赋值 div classdiv1div classdiv2a :hrefi.link v-for(i,j) in disArr :keyj target_blank classtagName :reftagName j stylemargin-right: 118px;div stylecolor: #fff;margin-right: 10px;img src~/assets/home/s_icon.png stylewidth: 32px;margin-right: 20px;{{i.title}}/div/a/div/div let width 0;
let els this.disArr;
console.log(this.disArr,dis);
let _this this;
for(var i 0 ; i els.length;i){let tag _this.$refs[tagName i];width tag[0].offsetWidth118;// console.log(tag,tag);
}
// console.log(width,width);
document.styleSheets[0].insertRule(keyframes anima { 0%{transform: translateX(100%);} 100%{transform: translateX(- width px); }
).div1 {width: 100%;height: 63px;line-height: 63px;background: linear-gradient(90deg, #FE890C 0%, #D549F5 100%);overflow: hidden;box-sizing: border-box;
}
.div1:hover .div2{-webkit-animation-play-state: paused; /*动画暂停播放*/
}
.div2 {white-space: nowrap;display: flex;color: #fff;font-size: 20px;font-family: Black;animation: 10s anima linear infinite normal;cursor: pointer;
} 因为文字内容无法确定 如果是固定的话是不需要js的 在css里直接给一个固定值就可以了 第二种 图片文字
div classwrapdiv classlistdiv classmy-list v-for(item,index) in sendVal :keyindexdiv classmy-unamea-col :span6img :srcrequire(../assets/home/${item.url}.png) alt classwinner_icon/a-cola-col :span9 classw_name{{item.account}}/a-cola-col :span9 classw_gusdt styletext-align: right;{{item.roll}}/a-col/div/div/div/div* {
margin: 0;padding: 0;}.wrap {width: 100%;height: 100px;overflow: hidden;position: relative;padding-left: 3480px;}.list {list-style: none;width: 6960px;height: 100px;position: absolute;top: 0px; /*right:0px;向右*/left: 0px; /*向左*/animation: mymove 34.8s 1s infinite linear;display: flex;align-items: center;.my-list{margin:0 12px;display: inline-block;font-size: 24px;line-height: 50px;padding: 20px 16px; width: 324px;border-radius: 20px;border: 1px solid #7C8097;.my-uname{color: #FFFFFF;font-size: 14px;.winner_icon{width: 56px;}.w_name{font-weight: 500;}.w_gusdt{color: #665DF5;font-family: Roman;}.winner_icon{object-fit: contain;width: 56px;height: 56px;}}}}keyframes mymove {from {left: 0px;}to {left: -100%;}}.list:hover {animation-play-state: paused;cursor: pointer;} css的这种方法我自己摸索出来的 要做到完全无缝相接 例如一行需要展示10条数据 那么我们需要把这10条数据先重复一遍 就是一行20条 这样滚动起来才会达到无缝的效果 一个box的宽度例如是324px 那么加上margin的宽度 一共是348 10个box就是3480 20个就是6960px 还有一个地方的属性我没有弄明白 就是padding-left这个一定要加上 如果不加上 就达不到完全无缝滚动的效果 现在的滚动效果是向左滚动 如果是希望达到向右滚动的效果 那么就把css里的属性改一下就可以了
keyframes mymove {from {right: 0px;}to {right: -100%;}
}
