JS无缝滚动,form表单获取数据异常多,符号

最新推荐文章于 2022-06-13 13:21:20 发布

原创最新推荐文章于 2022-06-13 13:21:20 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #无缝滚动

page 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript实现无缝滚动效果的关键点，包括内容需超过设定高度、设置overflow:hidden和固定单位等。同时，针对form表单获取数据出现多余逗号的问题进行了分析，指出当input标签name属性重复时，会导致多个值合并，解决方案是确保name属性的唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网站首页信息或是图片的无缝滚动效果，注意事项及代码如下：

function Marquee(colee,colee1,colee2){
    if(colee2.offsetHeight-colee.scrollTop<=0){
         colee.scrollTop-=colee1.offsetHeight; 
    }else{
         colee.scrollTop++
    }
}

function myScroll(div1,div2,div3,hide){
    var colee2=document.getElementById(div1);
    var colee1=document.getElementById(div2);
    var colee=document.getElementById(div3);
    if(hide){
	    colee.style.display="block";
	}
    if(colee1.offsetHeight>colee.offsetHeight){
    var speed=30;
    colee2.innerHTML=colee1.innerHTML;
    var MyMar=window.setInterval(function(){Marquee(colee,colee1,colee2)},speed);
    colee.onmouseover=function() {clearInterval(MyMar)}
    colee.onmouseout=function(){MyMar=setInterval(function(){Marquee(colee,colee1,colee2)},speed)}
    }
    //if(hide){
	    //colee.style.display="none";
	//}
}

以上为JS代码，html部分代码如下：

                           <div id="con_clik_1" style="overflow:hidden;height:190px;width:214px;margin-top:5px;margin-left:5px;">
				<div id="con_clik_10" >
				<table width="202px"; border="0" align="center" cellpadding="0" cellspacing="0">
						<dl>
						<dd><span><img src="images/fuhao.gif" width="7" height="7"> </span><a href="http://127.0.0.1:8080/preview/glj/gbpx2/2015/0121/8a8d81f15d62ba4a015d62d255210016.html" target="_blank">网络公开课，也是一流大学的指标</a><br/><span class="date_00">(2015-01-21)</span></dd>
						<dd><span><img src="images/fuhao.gif" width="7" height="7"> </span><a href="http://127.0.0.1:8080/preview/glj/gbpx2/2015/0121/8a8d81f15d62ba4a015d62d2157a0012.html" target="_blank">北京高校热舞健美操拉拉操</a><br/><span class="date_00">(2015-01-21)</span></dd>
						<dd><span><img src="images/fuhao.gif" width="7" height="7"> </span><a href="http://127.0.0.1:8080/preview/glj/gbpx2/2015/0121/8a8d81f15d62ba4a015d62d1f261000e.html" target="_blank">深化文化体制改革须加强四项工作</a><br/><span class="date_00">(2015-01-21)</span></dd>
						<dd><span><img src="images/fuhao.gif" width="7" height="7"> </span><a href="http://127.0.0.1:8080/preview/glj/gbpx2/2015/0121/8a8d81f15d62ba4a015d62d1d111000a.html" target="_blank">全球化背景下的大学爱国主义教育</a><br/><span class="date_00">(2015-01-21)</span></dd>
						<dd><span><img src="images/fuhao.gif" width="7" height="7"> </span><a href="http://127.0.0.1:8080/preview/glj/gbpx2/2015/0121/8a8d81f15d62ba4a015d62d14da90006.html" target="_blank">东北师范大学：一次让整个教学生涯受益的培训</a><br/><span class="date_00">(2015-01-21)</span></dd>
						</dl>
				</table>
				</div>
				<div id="con_clik_11"  ></div>
			    </div>

Attention：

1.该滚动效果，是填充内容超过了con_clik_1的高度，如果信息不足，则没有滚动效果。

2.设置con_clik_1的style样式时，必须添加overflow:hidden;同时设置其高度时，应当添加单位为px，否则没有滚动

3.如果两个可切换的tab都设置为滚动时，其中一个tab加载时设置为display:none,这时，对象是没有offsetHeight属性的，该属性的值是在实际加载页面中所占的高度，这时获得的属性值一直为0。所以进行滚动设置时，应首先display:block，测量完成后在display:none

4.实现滚动时，应在页面加载事件中，调用myScroll方法。

form表单获取数据异常，比预想值多了“,”是因为在form表单中input标签的name值，有两个及以上是相同的，form表单提交时会默认提交了两个值到该属性中，如果第二个没有值，得到的结果就是第一个值加“,”