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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 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
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
简单理解Python中的装饰器
2015/07/31 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python网络应用开发知识点浅析
2019/05/28 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python笔记之观察者模式
2019/11/20 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python try except else使用详解
2021/01/12 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
总经理助理的八要求
2013/11/12 职场文书
家长会演讲稿范文
2014/01/10 职场文书
敬老月活动总结
2014/08/28 职场文书
2014年司法局工作总结
2014/12/11 职场文书
自主招生专家推荐信
2015/03/26 职场文书
离婚协议书格式范本
2016/03/18 职场文书