js实现横向滚动
1.布局
<div id="scroll_div" class="fl"> <div id="scroll_begin">恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span></div> <div id="scroll_end"></div></div>
2.样式
.pad_right{ padding-right:2em;}#scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:535px;margin-left:10px;}#scroll_begin,#scroll_end {display: inline;}
3.js代码：
//文字横向滚动ScrollImgLeft() {var speed = 50;var MyMar = null;var scroll_begin = document.getElementById("scroll_begin");var scroll_end = document.getElementById("scroll_end");var scroll_div = document.getElementById("scroll_div");scroll_end.innerHTML = scroll_begin.innerHTML;function Marquee() {if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)scroll_div.scrollLeft -= scroll_begin.offsetWidth;elsescroll_div.scrollLeft++;// console.log(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)}MyMar = setInterval(Marquee, speed);scroll_div.onmousedown = function () {clearInterval(MyMar);}scroll_div.onmouseover = function () {clearInterval(MyMar);}scroll_div.onmouseout = function () {MyMar = setInterval(Marquee, speed);}}ScrollImgLeft();
js实现纵向滚动
1.布局
<div class="box" id="box" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup"><div class="text" id="text">1</div><div class="text" id="text">2</div><div class="text" id="text">3</div><div class="text" id="text">4</div><div class="text" id="text">5</div><div class="text" id="text">6</div><div class="text" id="text">7</div><div class="text" id="text">8</div><div class="text" id="text">9</div><div class="text" id="text">10</div><div class="text" id="text">11</div><div class="text" id="text">12</div><div class="text" id="text">13</div><div class="text" id="text">14</div><div class="text" id="text">15</div><div class="text" id="text">16</div><div class="text" id="text">17</div><div class="text" id="text">18</div><div class="text" id="text">19</div><div class="text" id="text">20</div></div>
2.样式
.box {width: 300px;height: 300px;border: 2px solid skyblue;overflow: hidden;}.box:hover {overflow-y: auto;}.text {width: 100%;height: 100px;border: 1px solid greenyellow;}
3.js代码：
export default {data() {return {flag: true,timer: '',time: '',scrollTop: 0,margin: 0,lastPointY: 0,isTouch: false,}},onLoad() {},mounted() {this.onscroll()},methods: {onscroll(){const dom = document.getElementById('box')const scpDom = document.getElementsByClassName('text')let time = nullconsole.log(dom.scrollHeight, dom.offsetHeight);time = setInterval(() => {dom.scrollTop++if (dom.scrollTop >= dom.scrollHeight - dom.offsetHeight) {console.log("111");dom.scrollTop = 0}}, 10)},mousedown(e){this.isTouch = true;this.lastPointY = e.pageY;console.log('鼠标按下',e.pageY)clearInterval(this.timer)},mousemove(e){const dom = document.getElementById('box')if (this.isTouch) {this.margin = e.pageY - this.lastPointY;dom.scrollTop -= this.margin;console.log(this.margin,e.pageY);this.lastPointY = e.pageY;}},mouseup(){const dom = document.getElementById('box')clearTimeout(this.time);this.isTouch = false;console.log('鼠标离开')this.time = setTimeout(()=>{this.timer = setInterval(() => {dom.scrollTop ++;},this.speed);},1000)}},computed: {}}
