html广告悬浮窗口,JS实现悬浮移动窗口(悬浮广告)的特效

js方法:

复制代码 代码如下:

New Document

window.οnlοad=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.οnmοuseοver=function(){

clearInterval(a1a);

}

//放手继续运动

oneInner.οnmοuseοut=function(){

a1a =setInterval(moves,100);

}

//删除

oneButton.οnclick=function(){

document.body.removeChild(oneInner);

}

}

jquery方法:

复制代码 代码如下:

$(function(){

//写入div

$("

//写入关闭按钮

$("

//定时器

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();

});

})

基本思路:

1.页面加载完成之后向页面插入窗口,之后向窗口插入关闭按钮

2.使用setInterval()函数触发moves()函数开始动画

3.moves函数:首先获取当前窗口位置,之后随时间使窗口位移,每当位移到游览器边缘时反向运动

4.添加其他事件:鼠标悬停停止运动,鼠标离开继续运动,点击按钮关闭窗口

ps:不建议使用这个特效,影响用户体验

希望对你有所帮助!^_^!~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/519932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyTorch可视化理解卷积神经网络

如今&#xff0c;机器已经能够在理解、识别图像中的特征和对象等领域实现99&#xff05;级别的准确率。生活中&#xff0c;我们每天都会运用到这一点&#xff0c;比如&#xff0c;智能手机拍照的时候能够识别脸部、在类似于谷歌搜图中搜索特定照片、从条形码扫描文本或扫描书籍…

区块链工程师平均薪资 25~50k?6 个理由告诉你为什么要懂区块链!

作者 | Carol出品 | 区块链大本营&#xff08;blockchain_camp&#xff09;* 文末可参与抽奖活动&#xff01;如果说有一个什么领域&#xff0c;能让中科院、华为、腾讯、京东、360、微众银行的大咖汇聚在一起&#xff0c;那一定是——区块链。悄咪咪地给大家剧透一下&#xff…

SpringBoot Controller接收参数的几种常用方式

第一类&#xff1a;请求路径参数 1、PathVariable 获取路径参数。即url/{id}这种形式。 2、RequestParam 获取查询参数。即url?name这种形式 例子 GET http://localhost:8080/demo/123?namesuki_rong 对应的java代码 GetMapping("/demo/{id}") public void demo…

计算机应用基础抢答题,计算机应用基础问答题

适用于准备计算机应用基础考试的考生1.详述计算系统的主要技术指标&#xff0c;并举例说明它们的含义。 答&#xff1a;1主频&#xff1a;主频即时钟频率&#xff0c;指CPU在单位时间发出的脉冲数。表示CPU的运行速度&#xff0c;是以赫兹为单位&#xff0c;如CPU主频3.0GHz&am…

NLP度量指标BELU真的完美么?

刚接触自然语言处理的朋友通常会问我&#xff1a;当系统的输出是文本&#xff0c;而非对输入文本进行某种分类&#xff0c;如何对该系统进行评估。当模型的输入是文本信息&#xff0c;输出也是文本信息时&#xff0c;我们称之为序列到序列问题&#xff0c;也可称为字符串转换问…

开放华为30年研发能力与实践 助力DevOps真正落地

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 刘丹受访者 | 汪维敏出品 | CSDN云计算&#xff08;ID&#xff1a;CSDNcloud&#xff09;高速的中子撞击U235原子核&#xff0c;使其分裂成两个原子核&#xff0c;释放出巨大能量&#xff0c;同时产生的几个中子再去撞击其它…

Euler 今日问世!国内首个工业级的图深度学习开源框架,阿里妈妈造

千呼万唤始出来&#xff01;阿里妈妈正式公布重磅开源项目——图深度学习框架Euler。这是国内首个在核心业务大规模应用后开源的图深度学习框架。此次开源&#xff0c;Euler内置了大量的算法供用户直接使用&#xff0c;相关代码已经可在GitHub上进行下载。 图学习和深度学习都…

查询某一支接口,指定时间段的数据 按分钟排序

--查询某一支接口,指定时间段的数据 按分钟排序 select a.servicename,reqdate,substr(reqtime,1,5),count&#xff08;1&#xff09;from 表名 awhere servicename 接口名and reqdate date 2020-06-28and reqtime > 16:00:00and reqtime < 17:00:00group by a.service…

天啦噜!在家和爱豆玩quot;剪刀石头布quot;,阿里工程师如何办到?

如今&#xff0c;90、00后一代成为消费主力&#xff0c;补贴、打折、优惠等“价格战”已很难建立起忠诚度&#xff0c;如何与年轻人建立更深层次的情感共鸣&#xff1f;互动就是一种很好的方式&#xff0c;它能让用户更深度的参与品牌/平台呈现的内容&#xff0c;提供更深层的参…

查看计算机或网络资源列表的命令,dos命令net view图文教程,显示网络计算机列表查看共享资源...

大家好&#xff0c;我是老盖&#xff0c;首先感谢观看本文&#xff0c;本篇文章做的有视频&#xff0c;视频讲述的比较详细&#xff0c;也可以看我发布的视频。今天我们学习net命令中的view&#xff0c;它这个命令可以查看网络计算机列表和共享的资源。直接输入net view可以看到…

使用Opencv构建一个简单的图像相似检测器(MSE、SSIM)

介绍 作为人类&#xff0c;我们通常非常善于发现图像中的差异。例如&#xff0c;常见的游戏——两张图像找不同。现在让我们玩下这个游戏吧&#xff0c;首先让我们看看上面的图像&#xff0c;三十秒内看看是否能够从中找出有什么不同的地方。 答案&#xff1a;水果、冰淇淋和…

云+X案例展 | 民生类:云途腾助力城建开启智慧城轨新征程

本案例是由云途腾投递并参与评选&#xff0c;CSDN云计算独家全网首发&#xff1b;更多关于【云X 案例征集】的相关信息&#xff0c;点击了解详情丨挖掘展现更多优秀案例&#xff0c;为不同行业领域带来启迪&#xff0c;推动整个“云行业”的健康发展。2019年7月&#xff0c;城建…

Apache ActiveMQ 各个版本所依赖的JDK版本

ActiveMQ下载地址 http://activemq.apache.org/download-archives.html ActiveMQ 依赖JDK版本 MQ版本号Build-Jdk依赖JDKapache-activemq-5.0.01.5.0_121.5apache-activemq-5.1.01.5.0_121.5apache-activemq-5.2.01.5.0_151.5apache-activemq-5.3.01.5.0_171.5apache-activem…

关于开源分布式事务中间件Fescar,我们总结了开发者关心的13个问题

开源分布式事务中间件 Fescar 自1月10日上线v0.1版本以来&#xff0c;受到了开发者们的极大关注&#xff08;watch249&#xff0c;star3005&#xff0c;fork649&#xff0c;社区讨论的issue58&#xff0c;数据统计于1月17日14:00&#xff09;&#xff0c;可见&#xff0c;天下苦…

计算机桌面图标变成腾讯图标,桌面图标变成了未知图标

在电脑日常使用生活中&#xff0c;有时候会遇到桌面图标显示不正常&#xff0c;变成未知图标或者白色。遇到这种情况怎么办呢&#xff1f;今天就让我来和大家分享一下我的经验。首先&#xff0c;产生这种问题的原因&#xff0c;有如下几种&#xff1a;• 电脑桌面图标缓存导致的…

云+X案例展 | 民生类:基于AWS PaaS构建基础集团企业级中台

本案例由浪潮投递并参与评选&#xff0c;CSDN云计算独家全网首发&#xff1b;更多关于【云X 案例征集】的相关信息&#xff0c;点击了解详情丨挖掘展现更多优秀案例&#xff0c;为不同行业领域带来启迪&#xff0c;进而推动整个“云行业”的健康发展。上海市基础工程集团有限公…

互联网下半场的角逐,玩转轻资产的大数据服务 | 阿里云栖开发者沙龙大数据专场(北京站)干货集锦

2019年1月18日下午&#xff0c;一个晴冷的冬日&#xff0c;由阿里巴巴MaxCompute开发者社区和阿里云栖社区联合主办的“阿里云栖开发者沙龙大数据技术专场”走近北京联合大学。当日&#xff0c;近200名大数据开发者和爱好者现场参与了本次活动&#xff0c;同时也有1800多名开发…

SLF4J:Failed to load class org.slf4j.impl.StaticLoggerBinder

SLF4J:Failed to load class “org.slf4j.impl.StaticLoggerBinder”解决方案&#xff1a; <dependency><groupId>org.slf4j</groupId><artifactId>slf4j-nop</artifactId><version>1.7.5</version></dependency>

日志服务与SIEM(如Splunk)集成方案实战

背景信息 目标 本文主要介绍如何让阿里云日志服务与您的SIEM方案(如Splunk)对接, 以便确保阿里云上的所有法规、审计、与其他相关日志能够导入到您的安全运维中心&#xff08;SOC&#xff09;中。 名词解释 LOG&#xff08;SLS&#xff09; - 阿里云日志服务&#xff0c;简…

请问如何正确使用计算机的接口芯片,[计算机软件及应用]第05章接口芯片1.ppt

[计算机软件及应用]第05章接口芯片1第5章 可编程接口芯片 5.2 可编程定时器/计数器8254 计算机系统中经常要用到定时信号&#xff0c;如定时检测、定时扫描和时钟定时等&#xff0c;定时方法通常有以下三种&#xff1a; (1)软件定时 (2)不可编程的硬件定时 (3)可编程的硬件定时…