`

浮动广告

    博客分类:
  • js
阅读更多

----------------------------没有关闭和链接的浮动广告--------------------------------------------

<div id="img" style="position:absolute;">
  <img src=""
  onMouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()',30);">
</div>
<script LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://www.smallrain.net -->

<!-- Begin
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;
var name = navigator.appName;
if(name == "Microsoft Internet Explorer") name = true;
else name = false;
var xPos = 20;
if(name) var yPos = document.body.clientHeight;
else var yPos = window.innerHeight;
function changePos() {
if(name) {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
}
else {
height = window.innerHeight;
width = window.innerWidth;
Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
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() {
if(name) img.visibility = "visible";
else document.img.visibility = "visible";
interval = setInterval('changePos()',delay);
}
start();
//  End -->
</script> 

------------------------------带有链接和关闭的浮动广告----------------------------------------

<SPAN id=img onmouseover=mystop()
style="POSITION: absolute; right: 0px;Z-INDEX: 7" onmouseout=start()><A
href="http://www.163.com"
target=_blank><IMG src="D:\baohua.jpg" border=0></A><BR>
<DIV class=font align=right style="Z-INDEX: 7"><a href="javascript:hide();">关闭</a><iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:283px; height:209px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe></DIV></SPAN>
<SCRIPT language=javascript>
var xPos = 0;var yPos = 0; var step = 1;var delay = 10;var height = 0; var Hoffset = 0;var Woffset = 0; var yon = 0;var xon = 0; var xon = 0; var interval;
var img = document.getElementById('img');
img.style.top = 0;
function hide()
{
img.style.display = 'none';
document.getElementById('imgFlag').value=1;
}
function changePos(){
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.right = xPos + document.body.scrollLeft;
img.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() {
img.visibility = 'visible';
interval = setInterval('changePos()', delay);
}
function mystop()
{
clearInterval(interval)
}
start()
</SCRIPT>
<script language=JavaScript>
var xPos2 = 0; // 起始横向位置(从左算起,单位象素)
var yPos2 = 0;//document.body.clientHeight;  页面本身高度
var step2 = 1;
var delay2 = 10; // 速度,值越大速度越慢
var height2 = 0;
var Hoffset2 = 0;
var Woffset2 = 0;
var yon2 = 0;
var xon2 = 0;
var pause2 = true;
var interval2;
var img2 = document.getElementById('img2');
img2.style.top = 0;
//dd.style.top = yPos;
function changePos2() {
width2 = document.body.clientWidth; // 判断浏览器窗口的宽度
height2 = document.body.clientHeight; // 判断浏览器窗口的高度
Hoffset2 = img2.offsetHeight;
Woffset2 = img2.offsetWidth;
img2.style.left = xPos2 + document.body.scrollLeft;
img2.style.top = yPos2 + document.body.scrollTop;
if (yon2) {
yPos2 = yPos2 + step2;
}
else {
yPos2 = yPos2 - step2;
}
if (yPos2 < 0) {
yon2 = 1;
yPos2 = 0;
}
if (yPos2 >= (height2 - Hoffset2)) {
yon2 = 0;
yPos2 = (height2 - Hoffset2);
}
if (xon2) {
xPos2 = xPos2 + step2;
}
else {
xPos2 = xPos2 - step2;
}
if (xPos2 < 0) {
xon2 = 1;
xPos2 = 0;
}
if (xPos2 >= (width2 - Woffset2)) {
xon2 = 0;
xPos2 = (width2 - Woffset2);
}
}
function start2() {
img2.visibility = "visible";
interval2 = setInterval('changePos2()', delay2);
}
function hide2()
{
img2.style.display = 'none';
document.getElementById('imgFlag').value=1;
}
function mystop2()
{
clearInterval(interval2)
}
start2();
</script>
<body>
 <form>
 <html:hidden property="imgFlag" value="0"/>//设置一个imgFlag对象。
</form>
</body>



分享到:
评论

相关推荐

    浮动广告模型.rar

    基于动易sf5.9做的浮动广告模型。欢迎下载交流。 JS文件 放在根的JS目录下,并在相关页面引用。 数据源:浮动广告_数据源.config 内容模板:浮动广告内容页模板.html 模型文件:浮动广告模型模板.xls 标签:国信_...

    浮动广告 利用JavaScript实现浮动广告的制作

    浮动广告是一种常见的网络广告形式,它在网页上以动态的方式展示,通常会跟随用户滚动页面而保持在屏幕的可见区域内。这种效果是通过JavaScript编程语言实现的,JavaScript为网页提供了强大的交互性和动态功能。 ...

    浮动广告 左右广告浮动广告 左右广告

    根据给定文件的信息,我们可以提炼出与“浮动广告”相关的几个关键知识点,包括浮动广告的基本概念、实现原理、以及在实际网页开发中的应用等。 ### 一、浮动广告的概念 浮动广告是一种常见的在线广告形式,它能够...

    js浮动广告实现

    ### js浮动广告实现详解 在网页设计与开发中,浮动广告是一种常见的营销策略,用于吸引用户的注意力并提高网站的互动性和转化率。然而,要使浮动广告在不同浏览器和设备上稳定运行,需要掌握一定的JavaScript技巧,...

    JS网页浮动广告

    在本例中,我们关注的是利用JS实现的网页浮动广告。浮动广告是指在用户浏览网页时,始终停留在屏幕某一位置,跟随用户滚动而上下移动的广告形式。这种广告设计能够吸引用户的注意力,提高广告的曝光率。 首先,让...

    兼容各大浏览器的浮动广告JS代码

    在网页设计中,浮动广告是一种常见的营销策略,用于吸引用户注意力并提高品牌曝光率。本文将详细介绍如何使用兼容各大浏览器的浮动广告JS代码,以及如何实现这一功能。 首先,我们需要理解浮动广告的基本概念。浮动...

    HTML图片随意浮动广告效果代码

    浮动广告"&gt; ``` 这里,`class="floating-ad"`是用来定义CSS样式,`src`属性指定广告图片的URL,`alt`属性为图片提供替代文本,以确保可访问性。 接下来,我们转向CSS来实现浮动和动画效果。CSS可以控制元素的...

    js浮动广告代码

    在这个场景中,"js浮动广告代码"指的是使用JavaScript实现的一种广告展示方式,这种广告会悬浮在网页的四周,无论用户滚动页面,它都会保持在屏幕的特定位置,从而提高广告的可见性和点击率。 浮动广告的实现原理...

    简洁易用的jQuery左右对称浮动广告代码.zip

    "简洁易用的jQuery左右对称浮动广告代码"是一个专门针对网页广告设计的jQuery插件,特别适合于创建对联广告,也就是在页面两侧浮动显示的广告条幅。 首先,我们要理解什么是对联广告。对联广告通常是指位于网页两侧...

    网页浮动广告代码 非常好在右侧

    网页浮动广告代码是一种常见的网页设计技术,用于在页面上创建动态显示的广告。这些广告通常位于页面的侧边栏或屏幕边缘,随着用户滚动页面而始终保持可见,从而提高广告的曝光率和点击率。在本篇文章中,我们将深入...

    html浮动广告,靠边换图

    在实现浮动广告时,我们可能会用到`&lt;div&gt;`来作为广告容器,`&lt;img&gt;`来显示广告图片,并用`&lt;a&gt;`来设定点击跳转链接。 二、CSS样式应用 1. 浮动(Float):CSS中的`float`属性可以实现元素的浮动,如`float: left`或`...

    javascript两种浮动广告

    本文将深入探讨如何使用JavaScript实现两种不同的浮动广告方法,并与网络上常见的实现方式进行对比。 首先,我们要明白什么是浮动广告。浮动广告是指在网页浏览过程中始终位于屏幕特定位置,随着用户滚动页面而始终...

    新浪首页左侧的Js浮动广告代码

    在互联网页面设计中,广告是网站收入的重要来源之一,而浮动广告作为一种常见的广告形式,能够吸引用户的注意力,提高广告的曝光率。新浪首页左侧的Js浮动广告代码是实现这一功能的关键,它结合了JavaScript(Js)...

    div两侧浮动广告 可隐藏 附加非div两侧浮动

    "div 两侧浮动广告 可隐藏 附加非div两侧浮动" 这个主题涉及到的是如何在网页的左右两侧放置浮动广告,并且这些广告能够根据需要隐藏,同时还能在非 div 元素的两侧添加浮动元素。 首先,我们来理解“div 两侧浮动...

    淘宝网图片浮动广告代码

    淘宝网图片浮动广告代码是一种常见的网页交互元素,用于吸引用户注意力并提高网站的广告效果。在网页设计中,这种广告通常会随着用户滚动页面而上下移动,保持在用户的视野范围内。这种技术结合了JQuery库、div+css...

    怎样制作网站中的浮动广告

    ### 浮动广告制作知识点详解 #### 一、理解网页中的浮动广告 浮动广告是一种常见的网页广告形式,它能够在用户浏览网页时跟随用户的滚动而移动,保持在屏幕上的某个位置,从而提高广告的可见度。浮动广告的设计既要...

    javascript浮动广告代码

    javascript浮动广告代码

    左右浮动广告无抖动可关闭隐藏式 对联广告 亲测保证能用

    本教程将详细讲解如何实现标题所描述的“左右浮动广告无抖动可关闭隐藏式对联广告”,并确保其在全站范围内的有效应用。 首先,我们要理解“左右浮动”的概念。在CSS布局中,浮动(float)属性用于创建浮动元素,...

    jQuery浮动广告横幅代码.zip

    在浮动广告横幅中,jQuery主要负责动态效果的实现,如广告的显示和隐藏、大小切换等。 1. **HTML结构**:在HTML文件中,广告横幅通常会定义为一个div元素,带有特定的class或者id以便于在CSS和JavaScript中引用。它...

    一个浮动广告的html代码

    一个浮动广告的html代码,有助于网站建设,广告联盟,网络赚钱,等等

Global site tag (gtag.js) - Google Analytics