这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
js 漂浮广告实现代码,实际上就是一个来回滚动的小图片,碰到边缘就返回,也是一种广告形式,需要的朋友可以收藏下
第一种 漂浮广告 不符合 W3CJavaScript 漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了。希望站长朋友喜欢。
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <html>
- <head>
- <title>
- 漂浮广告
- </title>
- <body>
- <div>
- <!--链接地址-->
- <img class="img-responsive" src="/images/logo.gif" border="0" data-src="">
- </div>
- <script>
- var x = 50,
- y = 60
- var xin = true,
- yin = true
- var step = 1
- var delay = 10
- var obj = document.getElementById("codefans_net") function float() {
- var L = T = 0
- var R = document.body.clientWidth - obj.offsetWidth
- var B = document.body.clientHeight - obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step * (xin ? 1 : -1) if (x < L) {
- xin = true;
- x = L
- }
- if (x > R) {
- xin = false;
- x = R
- }
- y = y + step * (yin ? 1 : -1) if (y < T) {
- yin = true;
- y = T
- }
- if (y > B) {
- yin = false;
- y = B
- }
- }
- var itl = setInterval("float()", delay) obj.onmouseover = function() {
- clearInterval(itl)
- }
- obj.onmouseout = function() {
- itl = setInterval("float()", delay)
- }
- </script>
- </body>
- </html>
Js 漂浮广告代码,比较经典的浮动广告,到现还很实用,如果你是一位站长的话,这种代码是必备的,希望对你有用处。
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- 漂浮广告
- </title>
- </head>
- <body>
- <div>
- <img class="img-responsive" src="/images/logo.gif" width="80" height="80"
- border="0" data-src="">
- </div>
- <script>
- var xPos = 300;
- var yPos = 200;
- var step = 1;
- var delay = 30;
- var height = 0;
- var Hoffset = 0;
- var Woffset = 0;
- var yon = 0;
- var xon = 0;
- var pause = true;
- var interval;
- img1.style.top = yPos;
- function changePos() {
- width = document.body.clientWidth;
- height = document.body.clientHeight;
- Hoffset = img1.offsetHeight;
- Woffset = img1.offsetWidth;
- img1.style.left = xPos + document.body.scrollLeft;
- img1.style.top = yPos + document.body.scrollTop;
- if (yon) {
- yPos = yPos + step;
- } else {
- yPos = yPos - step;
- }
- if (yPos < 0) {
- yon = 1;
- yPos = 0;
- }
- if (yPos >= (height - Hoffset)) {
- yon = 0;
- yPos = (height - Hoffset);
- }
- if (xon) {
- xPos = xPos + step;
- } else {
- xPos = xPos - step;
- }
- if (xPos < 0) {
- xon = 1;
- xPos = 0;
- }
- if (xPos >= (width - Woffset)) {
- xon = 0;
- xPos = (width - Woffset);
- }
- }
- function start() {
- img1.visibility = "visible";
- interval = setInterval('changePos()', delay);
- }
- function pause_resume() {
- if (pause) {
- clearInterval(interval);
- pause = false;
- } else {
- interval = setInterval('changePos()', delay);
- pause = true;
- }
- }
- start();
- </script>
- </body>
- </html>
上面两个都是不支持标准声明的
第三种 符合 W3C 的漂浮广告代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- 符合W3C的漂浮广告代码-phperz
- </title>
- </head>
- <body>
- <script>
- document.write("<DIV id=img1 style='Z-INDEX: 100; LEFT: 2px; WIDTH: 252px; POSITION: absolute; TOP: 43px; HEIGHT: 172px; ") document.write(" visibility: visible;'> ") document.write(" <a href='http://s.jb51.net' target='_blank'> ") document.write(" <img class="img - responsive " lazyload="/upload/201204/20120411210123566.gif" style=border:none;/> ") document.write(" </a></DIV> ") var xPos = 300;
- var yPos = 200;
- var step = 1;
- var delay = 8;
- var height = 0;
- var Hoffset = 0;
- var Woffset = 0;
- var yon = 0;
- var xon = 0;
- var pause = true;
- var interval;
- img1.style.top = yPos;
- function changePos() {
- width = document.documentElement.clientWidth;
- height = document.documentElement.clientHeight;
- Hoffset = img1.offsetHeight;
- Woffset = img1.offsetWidth;
- img1.style.left = xPos + document.documentElement.scrollLeft;
- img1.style.top = yPos + document.documentElement.scrollTop;
- if (yon) {
- yPos = yPos + step;
- } else {
- yPos = yPos - step;
- }
- if (yPos < 0) {
- yon = 1;
- yPos = 0;
- }
- if (yPos >= (height - Hoffset)) {
- yon = 0;
- yPos = (height - Hoffset);
- }
- if (xon) {
- xPos = xPos + step;
- } else {
- xPos = xPos - step;
- }
- if (xPos < 0) {
- xon = 1;
- xPos = 0;
- }
- if (xPos >= (width - Woffset)) {
- xon = 0;
- xPos = (width - Woffset);
- }
- }
- function start() {
- img1.visibility = "visible";
- interval = setInterval('changePos()', delay);
- }
- function pause_resume() {
- if (pause) {
- clearInterval(interval);
- pause = false;
- } else {
- interval = setInterval('changePos()', delay);
- pause = true;
- }
- }
- start();
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0708/282001.html