人脸识别系统_页面广告移动展示(如:新闻内容移动在底部一直滚动)

继续毕业设计到取款界面时,遇到底部广告太长展示不全问题。
第一种方法:html标签
html之marquee(中文‘跑马灯’) 标签通常底部广告过长,而又不想使用滚动条时,选择自由滚动展示。

开始
这里写图片描述

后面
这里写图片描述
即底部内容滚动显示

代码

<div id="ftConw"> 
    <marquee direction="left" id="adv_msg"> </marquee>
        <!-- <p id="adv_msg">这里是广告信息</p> -->
</div> 

第二种方法:js基于定时器实现

html部分

<body class="bodycss">
      <div id="declare">
        <div id="ftConw"><p id="adv_msg" style="white-space:nowrap;overflow:hidden; margin: auto;" 
         onmouseover="stopByNum()"  onmouseout="startById('adv_msg')">这里是广告信息</p>
            <!-- <marquee direction="left" id="adv_msg"> </marquee> -->
        </div>      
     </div> 
</body>

js部分


/**
 * 滚动
 */
var a = 0;
/**
 * 关闭定时器
 */
function stopByNum(){
    clearInterval(a);
}
/**
 * 开启定时器
 */
function startById(id){
    a=setInterval("scroll($('#"+id+"')[0])",30);
}

/**
 * 滚动
 * @param obj
 */
function scroll(obj) {
    var tmp = (obj.scrollLeft)++;
    //当滚动条到达右边顶端时
    if (obj.scrollLeft==tmp) {
       obj.innerHTML += obj.innerHTML;//注意1:这里值得深思,可以优化
    }
    //当滚动条滚动了初始内容的宽度时滚动条回到最左端
    if (obj.scrollLeft>=obj.firstChild.offsetWidth) {
       obj.scrollLeft=0;//注意2:这里是结束的条件
    }
}

学习之余不忘初心,虽然第一种很方便,但是看听说目已经放弃治疗了。第二种值得优化。谢谢

猜你喜欢

转载自blog.csdn.net/ljcc122/article/details/79858737