JS实现悬浮移动窗口(悬浮广告)的特效


Posted in Javascript onMarch 12, 2013

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="https://3water.com/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>

基本思路:

1.页面加载完成之后向页面插入窗口,之后向窗口插入关闭按钮

2.使用setInterval()函数触发moves()函数开始动画

3.moves函数:首先获取当前窗口位置,之后随时间使窗口位移,每当位移到游览器边缘时反向运动

4.添加其他事件:鼠标悬停停止运动,鼠标离开继续运动,点击按钮关闭窗口

ps:不建议使用这个特效,影响用户体验

希望对你有所帮助!^_^!~~

Javascript 相关文章推荐
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
深入理解Node module模块
Mar 26 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 #Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 #Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 #Javascript
JS中Iframe之间传值的方法
Mar 11 #Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 #Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 #Javascript
js比较和逻辑运算符的介绍
Mar 10 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
flash用php连接数据库的代码
2011/04/21 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
基于php编程规范(详解)
2017/08/17 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
Python之re操作方法(详解)
2017/06/14 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
django加载本地html的方法
2018/05/27 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
校庆筹备方案
2014/03/30 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
行政处罚告知书
2015/07/01 职场文书