(JavaScript)浮动广告代码

简介: (JavaScript)浮动广告代码
//浮动广告代码
var x = 50,y = 60;  //设置元素在浏览器窗口中的初始位置
var xin = true, yin = true; //设置xin、yin用于判断元素是否在窗口范围内
var step = 1 ;  //可设置每次移动几像素
var obj=document.getElementById("Ad"); //通过id获取div元素
function floatAd() { 
var L=T=0;
var R= document.body.clientWidth-obj.offsetWidth; 
//浏览器的宽度减div对象占据的空间宽度就是元素可以到达的窗口最右边的位置
var B = document.body.clientHeight-obj.offsetHeight; 
obj.style.left = x + document.documentElement.scrollLeft; 
//设置div对象的初始位置
//当没有拉到滚动条时,document.body.scrollTop的值是0
//当拉到滚动条时,为了让div对象在屏幕中的位置保持不变,就需要加上滚动的网页的高度
obj.style.top = y + document.documentElement.scrollTop; 
x = x + step*(xin?1:-1);//水平移动对象,每次判断左移还是右移
if (x < L) { xin = true; x = L;} 
if (x > R){ xin = false; x = R;} 
//当div移动到最右边,x大于R时,设置xin = false
//让x每次都减1,即向左移动,直到x< L时,再将xin的值设为true,让对象向右移动
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T; }
if (y > B) { yin = false; y = B;} 
} 
var itl= setInterval("floatAd()", 10) //每隔10毫秒执行一次floatAd()
obj.onmouseover=function(){clearInterval(itl)} 
//鼠标滑过时,让漂浮广告停止
obj.onmouseout=function(){itl=setInterval("floatAd()", 10)} 
//鼠标离开时,继续移动

c3e1504be59a46c5b31e20046c3b2450.png

8b8daa93bbbf443588315a29befec8cc.png


相关文章
|
23天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
119 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
218 2
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
34 0
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
10天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
23 3
原生js炫酷随机抽奖中奖效果代码
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
162 4
|
17天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
66 6
|
13天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
41 1