页面加载完成之后向页面插入窗口，之后向窗口插入关闭按钮，使用setInterval()函数触发moves（）函数开始动画
 

js方法：

复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title> New Document </title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <script type="text/javascript">
            window.onload=function(){
                //写入
                var oneInner = document.createElement("div");
                oneInner.setAttribute("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;");
                var oneButton = document.createElement("input");
                oneButton.setAttribute("type","button");
                oneButton.setAttribute("value","x");
                if (oneButton.style.cssFloat)
                {
                    oneButton.style.cssFloat="right"
                }
                else
                {oneButton.style.styleFloat="right"}
                oneInner.appendChild(oneButton);
                document.body.appendChild(oneInner);

//定时器
                var a1a = setInterval(moves,100);
                //函数

var x = 10;
                var y = 10;

function moves(){
                    var tops = oneInner.offsetTop
                    var lefts = oneInner.offsetLeft

if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts<=0)
                    {
                        x=-x
                    }

if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops<=0)
                    {
                        y=-y
                    }

tops+=y;
                    lefts+=x;

oneInner.style.top=tops+"px"
                    oneInner.style.left=lefts+"px"
                }

//悬停停止
                oneInner.onmouseover=function(){
                    clearInterval(a1a);
                }
                //放手继续运动
                oneInner.onmouseout=function(){
                    a1a =setInterval(moves,100);
                }
                //删除
                oneButton.onclick=function(){
                    document.body.removeChild(oneInner);
                }
            }
        </script>

</head>

<body>

</body>
</html>

jquery方法：

复制代码代码如下:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.jb51.net/workspace/js/jquery-1.7.min.js"></script>
        <script>
            $(function(){
                //写入div
                $("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");
                //写入关闭按钮
                $("<div/>",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow");
                //定时器
                var move = setInterval(moves,100);
                var x= 10;
                var y= 10;

function moves (){
                    var mw = $("#moveWindow").offset();
                    var lefts =mw.left;
                    var tops = mw.top;

if (lefts>=$(window).width()-$("#moveWindow").width()||lefts<=0)
                    {
                        x=-x
                    }

if (tops>=$(window).height()-$("#moveWindow").height()||tops<=0)
                    {
                        y=-y
                    }
                    lefts+=x;
                    tops+=y;

$("#moveWindow").offset({top:tops,left:lefts});

}
                //悬停停止运动
                $("#moveWindow").mouseover(function(){
                    clearInterval(move);
                });
                //移开鼠标后继续运动
                $("#moveWindow").mouseout(function(){
                    move = setInterval(moves,100);
                });
                //点击按钮关闭
                $("#removeMW").click(function(){
                    $("#moveWindow").remove();
                });
            })
        </script>
    </head>
    <body>
    </body>
</html>

JS实现悬浮移动窗口(悬浮广告)的特效的更多相关文章

  1. JS网站右下角悬浮视窗可关闭广告

    效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chro ...

  2. Js_网站右下角悬浮视窗可关闭广告

    站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chrome.Safari等主流浏览器.广告图片尺寸300x250. 使用方法:在head区域 ...

  3. [Winform]无边框窗口悬浮右下角并可以拖拽移动

    摘要 简单实现了一个这样的功能,程序启动时,窗口悬固定在右下角,并可以通过鼠标拖拽移动. 核心代码块 无边框窗口并不出现在任务栏 //无边框 this.FormBorderStyle = System ...

  4. Android 悬浮窗、悬浮球开发

    原文:Android 悬浮窗.悬浮球开发 1.权限管理 直接看我另外一篇博客吧,传送门: https://my.oschina.net/u/1462828/blog/1933162 2.Base类Ba ...

  5. js关闭当前页面(窗口)的几种方式总结(转)

    js关闭当前页面(窗口)的几种方式总结     1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...

  6. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  7. js如何弹出新窗口

    js如何弹出新窗口 时间:2012-4-22 弹出新窗口也是在网页设计中会经常用到的,其用法也很简单,是通过调用javascript的内置函数windows.open来产生的.  window.ope ...

  8. 用JS实现移动的窗口

    https://blog.csdn.net/iteye_21064/article/details/81496640 用JS实现移动的窗口 2007年09月06日 23:23:00 阅读数:3 很简单 ...

  9. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

随机推荐

  1. 解决MVC EF Code First错误:Model compatibility cannot be checked because the EdmMetadata type was not included in the model.

    Model compatibility cannot be checked because the EdmMetadata type was not included in the model. En ...

  2. Oracle导入导出命令

    //导出 exp techrpt_data/techrpt_data@orcl file=d:\_临时文件\techrpt_data.dmp owner=techrpt_data //导入 imp t ...

  3. DevExpress的XtraReport和微软RDLC报表的使用和对比

    我们开发程序的时候,经常会碰到一些报表,如果是Winform的报表,一般可以采用DevExpress控件组的XtraReport,或者微软的RDLC报表,当然还有一些其他的,在此不再赘述.由于本人在W ...

  4. Web前端：HTML~CSS~JS

    网页主要由3部分组成:结构.表现.行为.目前网页的新标准是W3C,模式是HTML.CSS.JavaScript,这是前端开发最核心的3个技术.前2个技术的最新版本分别为HTML5.CSS3.  “HT ...

  5. Mybatis添加返回主键ID

    1.对应xml文件<insert id="insert" parameterType="DetectStandard"useGeneratedKeys=& ...

  6. [moka同学笔记]Yii2 数据操作Query Builder

    Query Builder [php] view plain copy   $rows = (new \yii\db\Query()) ->select(['dyn_id', 'dyn_name ...

  7. CentOS 6.5/6.6 安装（install）mysql 5.7 最完整版教程

    Step1: 检测系统是否自带安装mysql # yum list installed | grep mysql Step2: 删除系统自带的mysql及其依赖命令: # yum -y remove ...

  8. 想要学好JQuery看这里

    一.简介 jQuery 库可以通过一行简单的标记被添加到网页中 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操 ...

  9. (原) tmux安装与使用

    本文为原创文章,转载请注明出处,谢谢 tmux安装 1.yum search tmux 2.yum install package (package为选择要安装的包名,如上图“tmux.x86_64” ...

  10. ECharts – 大数据时代，重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...