基于JS实现弹性漂浮广告的示例代码
目录
- 效果图
- 1.功能（鼠标移入移出事件、点击事件、定时器控制移动）
- 2.div初始样式设置
- 3.获取div可以移动的页面大小
- 4.定时器控制移动，鼠标移入事件停止移动，鼠标移出继续移动。
- 5.点击事件点击让div消失
- 6.完整代码
效果图
1.功能（鼠标移入移出事件、点击事件、定时器控制移动）
div实现在页面上移动，并判断碰到页面边框反弹，鼠标移入div停止移动，鼠标移出div进行移动，点击div让它从页面消失，定时器控制它的移动。
2.div初始样式设置
//div（广告）获取节点
var div1 = document.getElementById("div1");
// div(广告)初始的位置
var offsetx = 0;
var offsety = 0;
//div(广告)每次移动的距离
var stepx = 10;
var stepy = 10;
//div(广告)的大小
div1.style.width="100px"
div1.style.height="100px"
//设置定位
div1.style.position="absolute"
div1.style.top = offsetx;
div1.style.left = offsety;
//广告图片
div1.style.backgroundImage="url(./img/ggao.webp)"
div1.style.backgroundSize="cover"
3.获取div可以移动的页面大小
//网页可视化宽高--div(广告)可以移动的区域
var seeWidth = document.documentElement.clientWidth;
var seeHeight = document.documentElement.clientHeight;
//div(广告)最大可移动的宽度、高度
var maxLeft = seeWidth -100;
var maxTop = seeHeight -100;
4.定时器控制移动，鼠标移入事件停止移动，鼠标移出继续移动。
//启动定时器
var t= setInterval(move,30);
//鼠标移入清除定时器
div1.onmouseenter = function(){
clearInterval(t);
}
//鼠标移出恢复
div1.onmouseleave = function(){
t = setInterval(move,30);
}
5.点击事件点击让div消失
//点击事件，点击后消失
div1.onclick = function(){
div1.style.display = "none"
}
6.完整代码
<div id="div1"> </div>
<body>
<script>
//div（广告）获取节点
var div1 = document.getElementById("div1");
// div(广告)初始的位置
var offsetx = 0;
var offsety = 0;
//div(广告)每次移动的距离
var stepx = 10;
var stepy = 10;
//div(广告)的大小
div1.style.width="100px"
div1.style.height="100px"
//设置定位
div1.style.position="absolute"
div1.style.top = offsetx;
div1.style.left = offsety;
// div1.style.backgroundColor="black"
div1.style.backgroundImage="url(./img/ggao.webp)"
div1.style.backgroundSize="cover"
//网页可视化宽高--div(广告)可以移动的区域
var seeWidth = document.documentElement.clientWidth;
var seeHeight = document.documentElement.clientHeight;
//div(广告)最大可移动的宽度、高度
var maxLeft = seeWidth -100;
var maxTop = seeHeight -100;
function move(){
offsetx+=stepx;
offsety+=stepy;
console.log(offsetx);
console.log(offsety)
//大于可移动的高度或到达顶部 就让移动的距离变为它的负数
if(offsety>=maxTop||offsety<=0){
stepy = -stepy;
}
//大于可移动的宽度或到达最左 就让移动的距离变为它的负数
if(offsetx>=maxLeft||offsetx<=0){
stepx=-stepx;
}
//div定位的位置
div1.style.top = offsety+"px"
div1.style.left = offsetx+"px"
}
//启动定时器
var t= setInterval(move,30);
//鼠标移入清除定时器
div1.onmouseenter = function(){
clearInterval(t);
}
//鼠标移出恢复
div1.onmouseleave = function(){
t = setInterval(move,30);
}
//点击事件，点击后消失
div1.onclick = function(){
div1.style.display = "none"
}
</script>
到此这篇关于基于JS实现弹性漂浮广告的示例代码的文章就介绍到这了,更多相关JS弹性漂浮广告内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS实现弹性漂浮效果的广告代码
本文实例讲述了JS实现弹性漂浮效果的广告代码.分享给大家供大家参考.具体如下: 这里介绍一款JS弹性漂浮广告代码,碰到网页浏览器的边缘就会顺着弹力的方向自动漂浮下去,不停的在网页上漂来漂去,漂浮广告代码是很早时候就有的代码了,使用广泛,而且做为广告来说,好像效果还不错,因为它在不停的动,让人在视觉上感觉到有一种吸引力.其中的JS代码你可以扣出来保存在一个单独的JS文件中,使用时调用即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mo
-
基于javascript实现全屏漂浮广告
本文实例为大家分享javascript实现全屏漂浮广告,供大家参考,具体内容如下 主要使用方法 网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域宽:document.body.offsetWidth (包括边线的宽); 网页可见区域高:document.body.offsetHeight (包括边线的宽); setInterval setInterval动作的作用是在播放动画的时,每隔一定时
-
JS随机漂浮广告代码具体实例
复制代码 代码如下: <!--随机漂浮广告开始--><div id="float" style="position:absolute; z-index:3;(我建议大家把这里设为100,这样浮动图就不会被遮住了) left: 512px; width: 83px; top: 9px; height: 53px;"> <img src="piaofu.gif" width="100" he
-
Javascript实现带关闭按钮的网页漂浮广告代码
复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的网页漂浮广告代码</title> </head> <body> <div id="img" style="position: absol
-
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html
-
js漂浮广告实现代码
本文实例讲述了js实现漂浮广告的方法.分享给大家供大家参考.具体如下: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script typ
-
js实现全屏漂浮广告移入光标停止移动
复制代码 代码如下: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS全屏漂浮广告</title><style type="text/css">div#roll{width:100px;height:10
-
基于JavaScript代码实现随机漂浮图片广告
在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐. 代码一: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:/
-
基于JS实现弹性漂浮广告的示例代码
目录 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) 2.div初始样式设置 3.获取div可以移动的页面大小 4.定时器控制移动,鼠标移入事件停止移动,鼠标移出继续移动. 5.点击事件点击让div消失 6.完整代码 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) div实现在页面上移动,并判断碰到页面边框反弹,鼠标移入div停止移动,鼠标移出div进行移动,点击div让它从页面消失,定时器控制它的移动. 2.div初始样式设置 //div(广告)获取节点 var
-
基于JS实现Flappy Bird游戏的示例代码
前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入 完整源码地址 实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>
-
基于JS实现蜘蛛侠动作游戏的示例代码
目录 代码结构 代码展示 HTML JS 项目运行 游戏截图 整个游戏源码是由html.js. css.图片等代码完成的,无后端数据保存功能. 代码结构 js文件夹是游戏事件控制文件 vapp文件夹是游戏图片文件 icon.png 是网页游戏图标 index.html 是游戏主页 代码展示 HTML index.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
-
基于JS实现飞机大战游戏的示例代码
目录 演示 技术栈 源码 定义敌方战机 定义我方战机 碰撞检测 演示 技术栈 今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧.你不说话就是同意了.我们开始了. 下图是正则表达式的一些总结大家可以先看看哦 (function() { /** * 1. JavaScript使用正则式的函数 */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 /
-
基于JS实现动态跟随特效的示例代码
目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 这次用到了关于css的一些功能,和jQuery. CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通过 @keyframes 规则,您能够创建动
-
如何基于layui的laytpl实现数据绑定的示例代码
想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文 一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的form table layer已经是很简洁好用了,抛开底层的封装不说,给我们展现出来的使用方法我觉得是非常简化了.管理用到的除了form table layer之外,经常会有一些统计数据展示或者详情页这种内容展示.那么一些用到的统计数据(除图表),如文字统计型数据展示.这个时候,用layui的基
-
Python基于React-Dropzone实现上传组件的示例代码
目录 实例演示 1. axios上传普通文件: 2. 大文件导入: 结语 这次我要讲述的是在React-Flask框架上开发上传组件的技巧.我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架--React-Bootstrap.Ant Design.Material UI.Bulma等.而比较流行的上传组件也不少,而目前用户比较多的是jQuery-File-Upload和Dropzone,而成长速度快的新晋有Uppy和filepond.比较惋惜的是Fine-Uploader
-
node.js 用socket实现聊天的示例代码
本文介绍了node.js 用socket实现聊天的示例代码,分享给大家,也给自己留个笔记,具体如下: 服务器搭建 app.js const http = require("http"); const express = require("./express"); //创建一个服务 const server = http.createServer(express); //监听服务端口 server.listen(8001,()=>{ console.log(&q
-
基于JS实现checkbox全选功能实例代码
需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l