微网站有什么好处,表情制作软件,软件开发就业前景走向,做建筑材料的网站有哪些原生JS#xff1a;
html:
div idwrapper classwrapperdiv classinnerp文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。我是一个粉刷匠#xff0c;粉刷本领强#xff0c;我要把那新房子刷的…原生JS
html:
div idwrapper classwrapperdiv classinnerp文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。我是一个粉刷匠粉刷本领强我要把那新房子刷的更漂亮/p /div
/div
js: var wrapper document.getElementById(wrapper);var inner wrapper.getElementsByTagName(div)[0];var p document.getElementsByTagName(p)[0];var p_w p.offsetWidth;var wrapper_w wrapper.offsetWidth;window.onloadfunction fun(){if(wrapper_w p_w){ return false;}inner.innerHTMLinner.innerHTML;setTimeout(fun1(),2000);}function fun1(){if(p_w wrapper.scrollLeft){wrapper.scrollLeft;setTimeout(fun1(),30);}else{setTimeout(fun2(),2000);}}function fun2(){wrapper.scrollLeft0;fun1();}
css:
*{margin:0;padding:0;}body{font:12px/1 微软雅黑;}.wrapper{font-size:0.85rem;color:#333;padding-top:0.75rem;margin:0 0.75rem;white-space:nowrap;overflow:hidden;width:300px;}.inner{width:1000px;overflow:hidden;}.inner p{display:inline-block;} vue
封装组件
templatediv classscrollText refouterdiv classst-inner :class{st-scrolling: needToScroll}span classst-section refinner{{text}}/spanspan classst-section v-ifneedToScroll{{text}}/span!-- 加两条是为了滚动的时候实现无缝衔接 --/div/div
/template
script
export default {data() {return {needToScroll: false,text: };},mounted() {this.startCheck();},beforeDestroy() {this.stopCheck();},methods: {// 检查当前元素是否需要滚动check() {this.setText();this.$nextTick(() {let flag this.isOverflow();this.needToScroll flag;});},// 判断子元素宽度是否大于父元素宽度超出则需要滚动否则不滚动isOverflow() {let outer this.$refs.outer;let inner this.$refs.inner;let outerWidth this.getWidth(outer);let innerWidth this.getWidth(inner);return innerWidth outerWidth;},// 获取元素宽度getWidth(el) {let { width } el.getBoundingClientRect();return width;},// 获取到父组件传过来的内容复传给this.textsetText() {this.text (this.$slots.default this.$slots.default.reduce((res, it) res it.text, )) ||;},// 增加定时器隔一秒check一次startCheck() {this._checkTimer setInterval(this.check, 1000);this.check();},// 关闭定时器stopCheck() {clearInterval(this._checkTimer);}}
};
/script
style langscss scoped
.scrollText {overflow: hidden;white-space: nowrap;
}
.st-inner {display: inline-block;
}
.st-scrolling .st-section {padding: 0 5px;
}// 向左匀速滚动动画
.st-scrolling {animation: scroll 10s linear infinite;
}keyframes scroll {0% {transform: translate3d(0%, 0, 0);}100% {transform: translate3d(-50%, 0, 0);}
}
/style
使用
templatediv classaboutdiv classcontentscrollText一二三四五六七八九十哈哈哈哈哈哈哈哈测试/scrollText/div/div
/template
script
import scrollText from /components/scrollText;
export default {components: { scrollText },data() {return {};}
};
/script
style langscss scoped
.content {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;// 设置容器最大宽度为200width: 200px; font-size: 40px;border: 1px solid lightblue;margin: 40px;
}
/style
