来写一个讨人厌牛皮癣的广告
来源:互联网 发布:linux 启动数据库 编辑:程序博客网 时间:2024/05/16 12:15
我们在浏览网页的时候,有时会看到一直在屏幕动的很烦人的广告,它会游走于整个页面,直到碰到边缘框才换方向。我称它为牛皮癣广告。
下面我们用js原生来写这样一个牛皮癣的广告。
Html代码
<img src="img/img04.jpg" id='demo' class="demo" alt="" /> <!-- 随便找一个图片 -->
js代码
<script> function $(str) { return document.getElementById(str); } function move() { //0 代表向右移动 1代表向左移动 var leftState = 0; var topState = 0; setInterval(function() { var left = parseInt($('demo').style.left); left = isNaN(left) ? 0 : left; var winW = window.innerWidth; //如果左移动的下次距离 大于浏览器的宽度 //左边距-图片的宽度+下次运行的距离>浏览器宽度 if (left - 2 > 0 && leftState == 1) { $('demo').style.left = left - 2 + 'px'; } else if ((left + 100 + 2) < winW && leftState == 0) { $('demo').style.left = left + 2 + 'px'; } else if ((left + 100 + 2) >= winW && leftState == 0) { leftState = 1; } else if (left - 2 <= 0 && leftState == 1) { leftState = 0; } var top = parseInt($('demo').style.top); top = isNaN(top) ? 0 : top; var winH = window.innerHeight; //如果左移动的下次距离 大于浏览器的宽度 //左边距-图片的宽度+下次运行的距离>浏览器宽度 if (top - 2 > 0 && topState == 1) { $('demo').style.top = top - 2 + 'px'; } else if ((top + 100 + 2) < winH && topState == 0) { $('demo').style.top = top + 2 + 'px'; } else if ((top + 100 + 2) >= winH && topState == 0) { topState = 1; } else if (top - 2 <= 0 && topState == 1) { topState = 0; } }, 20) } window.onload = function() { move(); } </script>
var left = parseInt($('demo').style.left);
left是左移动的距离,console.log的结果一开始是NaN,后面是不同的数字。如下图:
window.innerWidth返回窗口的文档显示区的宽度。
window.innerheight返回窗口的文档显示区的高度。
更多window对象相关可参考Window 对象
其实原理很简单,就是利用了广告与窗口的距离,与窗口的宽度相比较,从而确定下一步广告与窗口的距离,形成移动的效果。
最后我们来看一下效果:
阅读全文
0 0
- 来写一个讨人厌牛皮癣的广告
- 利用MVC思想来写一个广告条的轮播
- 周济来了,“牛皮癣”走了
- 牛皮癣
- 用jquery写一个简单的广告动画效果
- 写一个来开张。。。。。
- 一个有趣的广告
- 我写的移动广告
- 闲来无事写的一个简单的JavaScript日历
- 写一个用图片来保存网页的程序
- (webabcd)我们来写一个继承自GridView的控件
- 写一个脚本来移动RMAN备件文件的位置。
- 闲来无事,写了一个简单的智能指针
- 用C#来写一个管理系统的登录界面
- 闲来无事,写的一个扑克发牌程序
- 闲来无事,写了一个比较完整的计算器
- 动手写一个OpenVPN的wrapper来优化OpenVPN性能
- 今天来写一个很弱智的编程错误
- 可变形卷积网络
- “集体智慧编程”之第三章:“发现群组”的 k均值聚类
- 首屏优化离线方案
- Ubuntu下用Eclipse搭建C/C++开发环境中FFTW的配置
- img和其他标签中间有一条背景线
- 来写一个讨人厌牛皮癣的广告
- Python入门
- C++第6次作业
- Linux内核裁减
- fftw库的window安装和linux安装和例子
- Android Studio配置Kotlin开发环境笔记
- c++第六次上机作业
- 如何动态修改输入法键盘红色框中(右下角)的文字,以及 如何监听右下角按钮的点击事件?
- 学习苏嵌