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 相关文章推荐
html向js方法传递参数具体实现
Aug 08 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JS判断字符串包含的方法
May 05 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
Node.js Express安装与使用教程
May 11 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
使用p5.js临摹动态图片
Nov 04 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
javascript时间函数基础介绍
2013/03/28 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python+opencv实现霍夫变换检测直线
2020/10/23 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
项目管理计划书
2014/01/09 职场文书
品德评语大全
2014/05/05 职场文书
计划生育标语
2014/06/23 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2014标准社保办理委托书
2014/10/06 职场文书