js实现跟随鼠标移动且带关闭功能的图片广告实例


Posted in Javascript onFebruary 26, 2015

本文实例讲述了js实现跟随鼠标移动且带关闭功能的图片广告。分享给大家供大家参考。具体实现方法如下:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>跟随鼠标移动且带关闭功能的图片广告</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<script type="text/javascript">

//<![CDATA[

function badAD(html){

    var ad=document.body.appendChild(document.createElement('div'));

    ad.style.cssText="border:1px solid #000;background:#FFF;position:absolute;padding:24px 4px 4px 4px;font: 12px/1.5 verdana;";

    ad.innerHTML=html||'This is bad idea!';

    var c=ad.appendChild(document.createElement('span'));

    c.innerHTML="×";

    c.style.cssText="position:absolute;right:2px;top:2px;cursor:pointer";

    c.onclick=function (){

        document.onmousemove=null;

        this.parentNode.style.left='-99999px' 

    };

    document.onmousemove=function (e){

        e=e||window.event;

        var x=e.clientX,y=e.clientY;

        setTimeout(function() {

            if(ad.hover)return;

            ad.style.left=x+5+'px';

            ad.style.top=y+5+'px';

        },120)

    }

    ad.onmouseover=function (){

        this.hover=true

    };

    ad.onmouseout=function (){

        this.hover=false

    }

}

badAD('<img src="/images/m02.jpg">')

//]]>

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
webpack的pitching loader详解
Sep 23 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 #Javascript
2则自己编写的jQuery特效分享
Feb 26 #Javascript
javascript制作网页图片上实现下雨效果
Feb 26 #Javascript
js实现格式化金额,字符,时间的方法
Feb 26 #Javascript
如何减少浏览器的reflow和repaint
Feb 26 #Javascript
详谈javascript中DOM的基本属性
Feb 26 #Javascript
jqueryUI里拖拽排序示例分析
Feb 26 #Javascript
You might like
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
JS跨域代码片段
2012/08/30 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
Python中下划线的使用方法
2015/03/27 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
学校大课间活动方案
2014/01/30 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技