网页前台页面图片飘窗代码

Posted 泥沙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页前台页面图片飘窗代码相关的知识,希望对你有一定的参考价值。

 

 

 <!---飘窗开始--->
    <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>

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

 

以上是关于网页前台页面图片飘窗代码的主要内容,如果未能解决你的问题,请参考以下文章

怎么查看网站源代码

前端页面实现报警器提示音效果

js飘窗

怎么在html中写PHP代码,前台页面从后台数据库中取值,

HTML代码片段

HTML代码片段