滚动效果_广告代码-js教程-PHP中文网

滚动效果_广告代码

php中文网

发布： 2016-05-16 19:28:55

原创

1296人浏览过

<p></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/7840">
                            <img src="https://img.php.cn/upload/jscode/000/000/010/168541380523120.jpg" alt="jQuery浮动广告横幅代码">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/7840">jQuery浮动广告横幅代码</a>
                            <p>jQuery浮动广告横幅代码是一款网页底部悬浮的广告横幅，点击关闭按钮图片广告横幅大小图隐藏切换效果代码。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="jQuery浮动广告横幅代码">
                                <span>35</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/7840" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="jQuery浮动广告横幅代码">
                        </a>
                    </div>
                
<div id="adsfar">
  <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#FFFFFF">1</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">2</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">3</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">4</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">5</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">6</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">7</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">8</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">9</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">10</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">11</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">12</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">13</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">14</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">15</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">16</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">17</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">18</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">19</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">20</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">21</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">22</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">23</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">24</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">25</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">26</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">27</td>
    </tr>
<tr>
<td bgcolor="#FFFFFF">28</td>
    </tr>
</table>
</div>
<script type="text/javascript">
marque(320,196,"icefable1","box1left")
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueName,marqueCName){
 try{
   marqueesHeight = height;
   stopscroll     = false;
<P>   scrollElem = document.getElementById("adsfar");
   with(scrollElem){
  style.width     = width;
  style.height    = marqueesHeight;
  style.overflow  = 'hidden';
  noWrap          = true;
   }
<P>   scrollElem.onmouseover = new Function('stopscroll = true');
   scrollElem.onmouseout  = new Function('stopscroll = false');
<P>   preTop     = 0; 
   currentTop = 0; 
   stoptime   = 0;
<P>   leftElem = document.getElementById("adsfar");
   scrollElem.appendChild(leftElem.cloneNode(true));
    
   init_srolltext();
<P> }catch(e) {}
}
function init_srolltext(){
  scrollElem.scrollTop = 0;
  setInterval('scrollUp()', 18);
}
<P>function scrollUp(){
  if(stopscroll) return;
  currentTop += 1;
  if(currentTop == marqueesHeight+1) {
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == (marqueesHeight)*1) {//停顿时间
      currentTop = 0;
      stoptime = 0;
    }
  }else{
<P>    preTop = scrollElem.scrollTop;
    scrollElem.scrollTop += 1;
    if(preTop == scrollElem.scrollTop){
      scrollElem.scrollTop = marqueesHeight;
      scrollElem.scrollTop += 1;
    }
  }
}
</script><p></p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

实现多选框联动子项的精确管理：基于AJAX和数据属性的动态加载与移除 Django与JavaScript构建评论回复系统：动态表单提交与常见错误解决 ECharts 标题文本与阴影样式配置指南移动端JavaScript_手势识别实现 JavaScript函数追踪_调用栈分析与可视化