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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
Vue 组件注册全解析
Dec 17 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
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php实现用户登陆简单实例
2017/04/04 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python中实现三目运算的方法
2015/06/21 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
师德师风的心得体会
2014/09/02 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2015年统战工作总结
2015/05/19 职场文书
行政二审代理词
2015/05/25 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
Redis 异步机制
2022/05/15 Redis