1、演示地址：入口
chenxuan0000
2、git源码地址
入口
目录
1、演示地址：入口
2、git源码地址 入口
实现效果：鼠标滑入静止
实现步骤：
一、下载插件
二、在main.js文件里引用
三、封装scroll.vue
注意：1、这里有三张图片，是背景图左右两边的颜色，
2、我这里的li 清一色用的span，因为用p标签报错，未找到原因，注意
源码：
四、常用配置参数如下表：
五、更多有关资料
1、vue-seamless-scroll实现列表无缝滚动_tall羊的博客-CSDN博客_vue表格无缝滚动
2、vue+ele之（四）—vue-seamless-scroll 这个人家里面li >div/p 我这里没有实现，只用了span
实现效果：鼠标滑入静止。
这个我的经历跟你一样，一开始用快捷工具，结果商店给删了，后来也是用Pig Toolbox 。不过我的Pig Toolbox现在还是可以用啊，双击关闭，滚动切换我倒是不用，所以没去试。我找了很久，要双击关闭的只有这个插件最好用了。你说不能用，可以试试把它删了再装一下，反正我是可以用。无缝滚动是使用JS实现的，其原理很简单将要滚动的Div平铺在父Div中，使用JS控制父DIv的滚动 Object.scrollLeft(向左) = Object.scrollLeft+滚动距离一定的时间间隔滚动一次当滚动距离 = 要滚动DIv的大小的时间，让父Div的 Object.scrollLeft回复到0，开始新一轮的滚动，这样就实现的无缝滚动，依上原理写出实例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title><style type="text/css">
<!--
#marquee {
height: 120px
width: 480px
overflow: hidden
}
#marquee .mi {
font-size: 12px
width: 250px
height: 110px
border: 5px solid #666666
margin-right: 10px
margin-left: 10px
}-->
</style>
<script type="text/javascript">
var marqueeInterval
var cw,ch,mBody
function marquee(){
try{
var A = arguments[0]
var O = document.getElementById(arguments[0])
var direction = arguments[1]
var delay = parseInt(arguments[2])
var amount = parseInt(arguments[3])
var isFirist = arguments[4]
var dw = O.offsetWidth
var dh = O.offsetHeight
if(direction == "left" || direction == "right"){
clearInterval(marqueeInterval)
if(isFirist == true){
var mChild = document.all ? O.childNodes[0] : O.getElementsByTagName("div")[0]
cw = mChild.scrollWidth
ch = mChild.scrollHeight
//cw = document.all ? mChild.scrollWidth : mChild.clientWidth
//ch = document.all ? mChild.scrollHeight : mChild.clientHeight
mBody = mChild.innerHTML
O.innerHTML = ""
var childNum = parseInt(dw/cw)+2
var htmlString = "<table border=\"0\" width="+(childNum*cw)+" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i = 0 i <childNum i++){
htmlString += "<td width=\""+cw+"\" height=\""+ch+"\"><div style=\"width:"+cw+"px height:"+ch+"px \">"+mBody+"</div></td>"
}
htmlString += "</tr></table>"
O.innerHTML = htmlString
isFirist = false
}
if(parseInt(O.scrollLeft) <parseInt(cw)){
O.scrollLeft = O.scrollLeft+amount
}else{
O.scrollLeft = 0
}
marqueeInterval = setInterval(function(){marquee(A,direction,delay,amount,isFirist)},delay)
}
}catch(e){
if (e.number == -2146827864)
alert("未选择要滚动的DIV")
else{
alert(e.description)
}
}
}
window.onload = function(){
marquee("marquee","left",50,1,true)
}
</script>
</head><body>
<div id="marquee" >
<div style="width: 240pxheight: 18px"><div class="mi">大家好，我是骄阳，这是一个无缝滚动效果</div></div>
</div>
<marquee direction="left" scrolldelay="10" scrollamount="1" width="480">大家好，我是骄阳，这是marquee的滚动效果</marquee>
</body>
</html>
由于时间问题，我只给你写一向左滚动效果但我还是建议你不要使用JS控制的无缝滚动，因为在WEB中setInterval和setTimeout都是很耗内存的这样就会降低你的页面执行速度如果你实在要用滚动效果的话，可以考虑用Flash代替
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）