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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
处理canvas绘制图片模糊问题
May 11 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHP安全性漫谈
2012/06/28 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
jQuery实现跨域
2015/02/03 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
jquery 手势密码插件
2017/03/17 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python删除本地夹里重复文件的方法
2020/11/19 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
平面设计自荐信
2013/10/07 职场文书
儿童生日会策划方案
2014/05/15 职场文书
捐资助学感谢信
2015/01/21 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
幼师大班个人总结
2015/02/13 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL