您的位置:首页 > Web前端 > JavaScript

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

2017-08-16 09:24 555 查看
网站首页信息或是图片的无缝滚动效果,注意事项及代码如下:

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表单提交时会默认提交了两个值到该属性中,如果第二个没有值,得到的结果就是第一个值加“,”
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  JS 无缝滚动