javascript原生脚本代码飘浮广告

javascript原生脚本代码（飘浮广告）
也算是给自己复习了一遍吧，下面飘浮广告的javascript原生代码和注释；加油程序猿们！

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>飘浮广告</title><style type="text/css">/***  设置样式*  一 、 考虑内外填充；*  二 、 飘浮广告必须是绝对定位；*  三 、 根据功能需求 可添加关闭或超链接等功能；*/*{margin: 0;padding: 0;font-size: 10px;}#float{width: 135px;height: 138px;list-style: none;position: absolute;border: 1px dotted #BEBEBE;}#close{width: 20px;height: 20px;display: inline-block;float: right;}#float dd img{width: 135px;}</style><!-- 以下为javascript原生代码 --><script type="text/javascript">//通过点击叉号图片关闭飘浮广告弹窗function closeFloat(){document.getElementById('float').style.display='none';}//根据iD得到对象函数&方法function $(id){return document.getElementById(id);}// x轴 定义初始值为0px 可以让广告初始贴服浏览器窗口最左侧 此值需进行计算累加 单位px后续追加var xPos = 0 ;// y轴 定义初始值为0px 可以让广告初始贴服浏览器窗口最上侧 此值需进行计算累加 单位px后续追加var yPos = 0 ;// 定义变量xon 用于后续判断 飘浮广告是否达已在浏览器最左侧或者最右侧 如果是最左侧 赋值为0 最右侧 赋值为1var xon = 0 ;// 定义变量yon 用于后续判断 飘浮广告是否达已在浏览器最上方或者最下侧 如果是最上方 赋值为0 最下方 赋值为1var yon = 0 ;// 定义一个移动速度的变量var step = 1 ;/*** 实现一次位移的方法（函数）* 添加计时器循环此方法 即可完成飘浮窗口持续移动的功能*/function changePos(){//获取浏览器页面宽度var width = document.documentElement.clientWidth;//获取浏览器页面长度var height = document.documentElement.clientHeight;//获取飘浮广告层的宽度var Woffset = $('float').offsetWidth;//获取飘浮广告层的长度var Hoffset = $('float').offsetHeight;// 变化x轴坐标 注意单位的拼接$('float').style.left = (xPos+document.documentElement.scrollLeft||document.body.scrollLeft)+'px';// 变化y轴坐标 注意单位的拼接$('float').style.top = (yPos+document.documentElement.scrollTop||document.body.scrollTop)+'px';// xon 等于 0 代表已经飘浮广告层没有到达浏览器窗口的最右侧if(xon==0){// 那么 飘浮广告层应 从左往右 移动xPos = xPos + step ;}else{// 否则 取反xPos = xPos - step ;}// 如果 xPos 小于0 代表 漂浮广告窗口已经到达浏览器的最左侧if(xPos < 0){// 将x轴坐标更新 变为0 确保飘浮广告层不溢出浏览器屏幕xPos = 0 ;// xon等于0 后续飘浮广告将会从右往左移动xon = 0 ;}/*** 如果飘浮广告层已到达最右侧* xPos 飘浮广告的位置 已经大于等于 窗口大小减去飘浮广告层的位置*/if(xPos>=(width-Woffset)){// xon 等于 1 后续将会由右向左移动柜xon = 1 ;// 确保飘浮广告层不溢出浏览器界面xPos = (width-Woffset);}// yon 等于 0 代表漂浮广告没有到达浏览器最下方if(yon==0){//那么 飘浮广告 由上往下移动yPos = yPos + step ;}else{//否则 取反yPos = yPos - step ;}// yPos小于0 代表已经到达浏览器最上方if(yPos < 0){// yPos 等于0 确保飘浮广告层不溢出yPos = 0 ;// yon 等于0 后续由上至下移动yon = 0 ;}// 如果飘浮广告已经到达浏览器最下方if(yPos>=(height-Hoffset)){// 那么后续应该往上移动yon = 1 ;// yPos 等于0 确保飘浮广告不溢出yPos = (height-Hoffset) ;}/***  计时器 递归 *  result 用于鼠标onmouseover事件*/result = window.setTimeout('changePos()',20) ;}// 当浏览器页面加载完成 调用changePos方法 用于后续飘浮广告层的执行window.onload=changePos ;// 鼠标onmouseover事件 用于暂停飘浮广告层移动function stop(){// 停止 飘浮广告的移动clearTimeout(result) ;}// 鼠标onmouseout事件 用户鼠标离开 再次启动飘浮广告的执行function goOn(){//引用 changePos 方法changePos() ;}</script></head><body><dl id="float" onmouseover="stop()" onmouseout="goOn()"><img id="close" src="img/timg.jpg" onclick="closeFloat()" ><dt>英国新冠变异，传播性高出70%！伦敦紧急封锁！</dt><dd><img src="img/u=888214850,2094894360&fm=173&app=49&f=JPEG.jpg" ></dd></dl></body>
</html>

javascript原生脚本代码飘浮广告相关推荐

四十四、栅格系统实现(JavaScript原生脚本、媒体查询)
前言:我们在学习bootstrap前端框架技术的时候,会学到全局css样式:栅格系统.今天,我就用两种方式实现栅格系统,方式一:使用原生JavaScript脚本:方式二:媒体查询 bootstrap栅 ...
飘浮广告显示脚本类（VBS，JS双版）
在写一个项目时要用到广告模块,为了不想用ASP生成脚本代码时较麻烦,于是产生了写脚本类的念头,即是用一个类模块的脚本代码去控制所有在同一页面显示的漂浮广告.但在写的过程中发现JS脚本竟然在setTim ...
JavaScript原生代码编写选项卡Tab页跳转功能
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能. 一.先来看看效果图二.准备文字素材文字素材选择诗经里面的三首古诗,分别是关雎.蒹葭和采薇 <关雎> 关关 ...
javascript网页精华代码集
[1.普通的弹出窗口] <SCRIPT LANGUAGE=javascript>  </SCRIPT& ...
在线代码编辑器 CodeMirror 配置说明 - javascript开发的代码语法高亮显示引擎
CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支 ...
简单实现飘浮广告层特效
简单实现飘浮广告层特效(董侨-QQ5596152-JonneyDong) 以下为JavaScript 代码. 新建一个Div 1 <script language="javascr ...
JS 案例飘浮广告
飘浮广告要求: 页面两侧有广告,广告上下来回滚动,点击关闭,广告被关闭. HTML代码片: <div id="adv_left" class="adv adv_l ...
autojs安卓免root脚本代码UI选择文件源码
说明本文提供的代码仅供参考.不建议用于生产环境. 可能有些地方在最新版本的Auto.js上面需要做修改,才能运行. Auto.js简介 Auto.js是利用安卓系统的"辅助功能" ...
原生JS代码100例
1.原生JavaScript实现字符串长度截取function cutstr(str, len) {var temp;var icount = 0;var patrn = /[^\x00-\xff]/ ...
[转贴]JavaScript 实用脚本
JavaScript 实用脚本如果你找的javascript的东西的话,建议你 ctrl+F 直接在这个页上找,因为这里80%有你要找的,但是要让你挨着看的话,你就准备看完就去配眼镜!! 事件源对 ...

javascript原生脚本代码飘浮广告

javascript原生脚本代码飘浮广告相关推荐

最新文章

热门文章

javascript原生脚本代码 飘浮广告

javascript原生脚本代码 飘浮广告相关推荐

最新文章

热门文章

javascript原生脚本代码飘浮广告

javascript原生脚本代码飘浮广告相关推荐