zfxcms ^回到顶部

您的当前位置:首页 > web资讯 > JS > 飘窗效果

飘窗效果

所属分类: JS   2020-10-21 09:24:43  编辑:admin  浏览次数 465 次

<div id="img1" style="z-index: 999; border: 1px solid rgb(204, 204, 204); width: 340px; background-color: white; height: 100px; position: absolute; top: 29px; left: 1230px; font-size: 13px;" >

            <div style="height:18px;margin-left:310px;margin-top:6px;">

                <a href="javascript:void(0);" onclick="closediv()" title="点击关闭" style="height:16px;text-decoration:none;color:#666;">关闭</a>

            </div>

            <div>

                <a href="" target="_blank"><img src="images/float_20171001.png"  alt="中秋 国庆,双节同庆" title="中秋 国庆,双节同庆"></a>

            </div>

        </div>

         <script type="text/javascript">

             var obj = document.getElementById("img1");


             var ggRoll = {

                 roll: obj,

                 speed: 16,

                 statusX: document.documentElement.clientWidth - document.body.clientWidth,

                 statusY: document.documentElement.clientHeight - document.body.clientHeight,

                 x: 200,

                 y: 400,

                 winW: document.body.clientWidth - obj.offsetWidth * 2,

                 winH: document.body.clientHeight - obj.offsetHeight,

                 Go: function () {

                     this.roll.style.left = this.x + 'px';

                     this.roll.style.top = this.y + 'px';


                     this.x = this.x + (this.statusX ? -1 : 1);

                     if (this.x < 0) {

                         this.statusX = 0;

                     }

                     if (this.x > this.winW) {

                         this.statusX = 1;

                     }


                     this.y = this.y + (this.statusY ? -1 : 1);

                     if (this.y < 0) {

                         this.statusY = 0;

                     }

                     if (this.y > this.winH) {

                         this.statusY = 1;

                     }

                 }

             }


             var intervaly = setInterval("ggRoll.Go()", ggRoll.speed);


             ggRoll.roll.onmouseover = function () {

                 clearInterval(intervaly);

             };


             ggRoll.roll.onmouseout = function () {

                 intervaly = setInterval("ggRoll.Go()", ggRoll.speed);

             };


             function closediv() {

                 clearInterval(intervaly);

                 obj.style.display = "none";

                 obj.parentNode.removeChild(obj);

             }

    </script>

         <!---飘窗结束--->


Web文章检索

Web文章目录