页面加载完成之后向页面插入窗口，之后向窗口插入关闭按钮，使用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. SQL Server论坛楼层计算触发器

    代码: USE suya_dev GO IF EXISTS( SELECT * FROM sys.triggers WHERE name = N'BBS_Post_before_insert' ) D ...

  2. Web实时通信

    学习SignalR,可以从<实时数据显示--SignalR实例演示>http://www.cnblogs.com/insus/p/5619422.html 开始. 此篇只是把数据库的数据实 ...

  3. 全动态Portlet点击后选中样式

    1  背景概述 在配置公司云平台的帮助信息过程中,由于使用的全动态portlet的数据URL获取到的是静态数据,没有办法在后台做选中的逻辑判断,所以需要在前台来控制选中列表的样式,这里将对前台选中列表 ...

  4. C#的变迁史 - C# 5.0 之其他增强篇

    1. 内置zip压缩与解压 Zip是最为常用的文件压缩格式之一,也被几乎所有操作系统支持.在之前,使用程序去进行zip压缩和解压要靠第三方组件去支持,这一点在.NET4.5中已有所改观,Zip压缩和解 ...

  5. 【C#】VS2015开发环境的安装和配置（三）2016-08-03更新

    分类:C#.VS2015.WPF.ASP.NET MVC.Android.iOS.Unity3D: 更新日期:2016-08-03 控制台应用程序.WPF应用程序直接创建即可,这里就不再介绍了.下面仅 ...

  6. jquery练习（赋予属性值）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. PHP旧系统基于命名空间重构经验

    命名空间其实只是一个形式,最终目的是重构代码,但这个过程想要一蹴而就是不可能的. 一开始给了一个伪命题:基于ThinkPHP的重构(不要问为什么).经过一段的实践,发现这是一个大错特错的思维方式,其中 ...

  8. collection中的retainAll()方法

    public class ArraylistDemo { public static void main(String[] args) { Collection list1 = new ArrayLi ...

  9. Openwrt笔记-IPv6与启动顺序

    之前使用了nat6方案和x3c8021x实现了校园网上网和IPv6连接:但实际使用时经常出现莫名奇妙的问题.IPv6状态要么是无法连接网络,要么是无法连接Internet:经过研究,发现大概是自启动项 ...

  10. 三层架构与MVC之间的区别

    文章转发自:http://www.admin10000.com/document/535.html 我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真 ...