zoukankan      html  css  js  c++  java
  • 随鼠标上下滚动的广告条

    方案一:有的浏览器会无限制往下

    <script language="JavaScript">

    <!--
            lastScrollY = 0;
            function heartBeat(){
            var diffY;
            if (document.documentElement && document.documentElement.scrollTop)
            diffY = document.documentElement.scrollTop;
            else if (document.body)
            diffY = document.body.scrollTop
            else
            {/*Netscape stuff*/}
            //alert(diffY);
            percent=.1*(diffY-lastScrollY);
            if(percent>0)percent=Math.ceil(percent);
            else percent=Math.floor(percent);
            document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
            document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px";
            lastScrollY=lastScrollY+percent;
            //alert(lastScrollY);
        }
        //下面这段删除后,对联将不跟随屏幕而移动。
        window.setInterval("heartBeat()",1);
        //-->
            //关闭按钮
        function close_left1(){
            left1.style.visibility='hidden';
        }
        function close_left2(){
            left2.style.visibility='hidden';
        }
        function close_right1(){
            right1.style.visibility='hidden';
        }
        function close_right2(){
            right2.style.visibility='hidden';
        }
        //显示样式
        document.writeln("<style type=\"text\/css\">");
        document.writeln("#leftDiv,#rightDiv{113px;height:30px;position:absolute;}");
        document.writeln(".itemFloat{30px;height:auto;line-height:5px}");
        document.writeln("<\/style>");
        //以下为主要内容
        document.writeln("<div id=\"leftDiv\" style=\"top:40px;left:5px\">");
        //------左侧各块开始
        //---L1
        document.writeln("<div id=\"left1\" class=\"itemFloat\">");
        document.writeln("<\/div>");
        //---L2
        document.writeln("<div id=\"left2\" class=\"itemFloat\">");
        document.writeln("<\/div>");
        //------左侧各块结束
        document.writeln("<\/div>");
        document.writeln("<div id=\"rightDiv\" style=\"top:230px;right:5px\">");
        //------右侧各块结束
        //---R1
        document.writeln("<div id=\"right1\" class=\"itemFloat\">");
        document.writeln("<\/div>");
        //---R2
        document.writeln("<div id=\"right2\" class=\"itemFloat\">");
        document.writeln("<a href=# title=返回顶部><img border=0 src=images/rightnew.gif></a>");
        document.writeln("<\/div>");
        //------右侧各块结束
        document.writeln("<\/div>");
    </script>

        <td width="113" height="1184" background="images/index_r2_c3.jpg" >
             
          <script type="text/javascript">
        heartBeat()
        </script>

              </td>

     方案二:

    <script language="javascript" type="text/javascript">
    function Layer()
    {
        var layer1=document.getElementById("Layer1");
        layer1.style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Layer1").offsetHeight)/4)+"px";
        layer1.style.left=(document.documentElement.scrollLeft)+5+"px";
        var layer2=document.getElementById("Layer2");
        layer2.style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Layer2").offsetHeight)/4)+"px";
        layer2.style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Layer2").offsetWidth)+"px";
    }
    window.onscroll=Layer;
    window.onresize=Layer;
    window.onload=Layer;
        </script>

    <div id="Layer1" style="position: absolute; visibility: visible; z-index: 1;">
            </div>
            <div id="Layer2" style="position: absolute; visibility: visible; z-index: 1;">
                <a href='#' target='_blank'>
                    <img src="images/rightnew.gif" border='0'></a>
            </div>

    只有右边显示,此可以加左右2边

  • 相关阅读:
    setStyleSheet来设定窗口部件的样式
    Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
    Qt编程—去掉标题栏和设置窗口透明用法
    php设计模式总结
    典型的MVC架构图
    搜索引擎设计分析
    社区论坛设计分析
    (二) vim的Tabbar插件
    目录结构设计分析
    用户注册系统分析
  • 原文地址:https://www.cnblogs.com/mxh691/p/1430925.html
Copyright © 2011-2022 走看看