js制作浮动广告

最新推荐文章于 2023-10-13 11:29:01 发布
最新推荐文章于 2023-10-13 11:29:01 发布
阅读量257 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/xiaosen992608/p/4090295.html
版权

-----------------------------------------------------------------------------------------------------------------css

@charset "gb2312";
/* CSS Document */

body{
margin:0;
margin-top:3px;
padding:0;
font-size:12px;
line-height:20px;
color:#333;
}
.float{
position:absolute;
z-index:1;
}
.main{
width:95%;
margin-left:auto;
margin-right:auto;
}
.left_indent{
padding-left:20px;
}
.red{
color:#F00;
}

-----------------------------------------------------------------------------------------------------------------js

//定义全局变量
var moveX = 0; //X轴方向移动的距离
var moveY = 0; //Y轴方向移动的距离
var step = 1; //图片移动的速度
var directionY = 0; //设置图片在Y轴的移动方向
var directionX = 0; //设置图片在X轴的移动方向

function changePos(){
var img = document.getElementById("float"); //图片所在层ID
var width = document.documentElement.clientWidth; //浏览器宽度
var height = document.documentElement.clientHeight; //浏览器高度
var imgHeight=document.getElementById("floatImg").height; //漂浮图片高度
var imgWidth=document.getElementById("floatImg").width; //漂浮图片宽度
img.style.left =parseInt(moveX + document.documentElement.scrollLeft)+"px"; //漂浮图片距浏览器左侧位置
img.style.top = parseInt(moveY + document.documentElement.scrollTop)+"px"; //漂浮图片距浏览器顶端位置
//alert(img.style.left);
if (directionY==0){
moveY = moveY + step; //漂浮图片在Y轴方向上向下移动
}
else{
moveY = moveY - step; //漂浮图片在Y轴方向上向上移动
}
if (moveY < 0) { //如果漂浮图片漂到浏览器顶端时，设置图片在Y轴方向上向下移动
directionY = 0;
moveY = 0;
}
if (moveY >= (height - imgHeight)) { //如果漂浮图片漂到浏览器底端时，设置图片在Y轴方向上向上移动
directionY = 1;
moveY = (height - imgHeight);
}
if (directionX==0){
moveX = moveX + step; //漂浮图片在X轴方向上向右移动
}
else {
moveX = moveX - step; //漂浮图片在X轴方向上向左移动
}
if (moveX < 0) { //如果漂浮图片漂到浏览器左侧时，设置图片在X轴方向上向右移动
directionX = 0;
moveX = 0;
}
if (moveX >= (width - imgWidth)) { //如果漂浮图片漂到浏览器右侧时，设置图片在X轴方向上向左移动
directionX = 1;
moveX = (width - imgWidth);
}
// setTimeout("changePos()",30);
}
setInterval("changePos()",30);
//window.οnlοad=changePos;

-----------------------------------------------------------------------------------------------------------------网页源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>漂浮广告</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="float" class="float"><img src="images/float.jpg" id="floatImg" alt="漂浮广告" /></div>
<script type="text/javascript" src="js/float.js"></script>
</body>
</html>

转载于:https://www.cnblogs.com/xiaosen992608/p/4090295.html

aixuan5685
关注
JS 浮动广告
快乐的外宅
11-04 338
<br /><SCRIPT FOR=window EVENT=onload LANGUAGE="JScript"><br />initAd();//载入页面后，调用函数initAd()<br /></SCRIPT><br /><script language="JScript"><br /><!--<br />function initAd() {<br />document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后，广告层相对于固定后的y方向位置<b
JS 案例 飘浮广告
suiferq的博客
06-07 403
飘浮广告 要求： 页面两侧有广告，广告上下来回滚动，点击关闭，广告被关闭。 HTML代码片: <div id="adv_left" class="adv adv_left"> <span id="left_close">&times;</span> </div> <div id="adv_right" class="adv adv_right"> <span id="right_close">&t
js浮动广告
05-26
NULL 博文链接：https://story.iteye.com/blog/515276
JavaScript制作浮动广告
weixin_30268071的博客
12-29 112
如果有一定的JavaScript基础，制作浮动广告还是比较容易的。直接上代码了： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.o...
JavaScript浮动广告
村花的兄弟的博客
12-05 3431
js的浮动广告代码，复制就能用<html> <head> <meta charset="utf-8"> <title>图片浮动</title> </head> <body> <div id="img" style="position:absolute"> <img src="图片的地址"
js漂浮广告
cai niaoyihao_的博客
05-12 796
js漂浮广告
浮动广告(js封装类,javascript,浮动层)
04-21
浮动广告(js封装类,javascript,浮动层)
如何制作浮动广告 JavaScript制作浮动广告代码
10-27
要想制作浮动广告，需要有一定的JavaScript基础知识。这包括对JavaScript语法的熟悉、理解DOM操作，以及能够编写和理解事件处理函数等。 ### HTML结构 浮动广告的HTML结构相对简单，主要由几部分组成： 1. 用于...
JavaScript实现网页上的浮动广告的简单方法
10-27
JavaScript是一种广泛应用于网页开发的脚本语言，它可以用于创建交互式的网页效果，其中包括...合理的广告布局和适度的交互效果，既可以有效传达广告信息，又不会过于打扰用户，是制作浮动广告时需要考虑的关键因素。
浮动广告js脚本
01-18
自己初学的js写的代码，写的不好欢迎各种意见，目前测试在IE11和火狐下都没问题 使用方法： 只需在html页里面嵌入一段js代码如下： var obj=new Advert(); obj.src="";//图片地址 obj.href="";//点击图片链接地址 //下面这些赋值可选 obj.top=0; obj.left=0;//图片刚开始位置 obj.slope=1//图片刚开始移动轨迹的斜率，默认x轴步长为2，delay为30，这些可以在代码中自行修改
JS随机漂浮广告代码具体实例
10-26
主要介绍了JS随机漂浮广告代码具体实例，有需要的朋友可以参考一下
JS实现弹性漂浮效果的广告代码
10-23
主要介绍了JS实现弹性漂浮效果的广告代码,涉及javascript动态操作图片弹性运动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
动态生成JS动态给网站添加悬浮广告及弹窗等
12-17
动态生成JS动态给网站添加悬浮广告及弹窗等 有生成对联悬浮广告,右下角弹窗,规格大小图片及文字等 这些内容是可由站长配置,用时只需要复制对应代码放到应用网站中即可
浮动广告 利用JavaScript实现浮动广告的制作
05-27
在制作浮动广告时，首先要确定广告的初始位置。这通常可以通过设置CSS样式来完成，例如`position: fixed`可以使广告相对于浏览器窗口固定。然后，我们利用JavaScript的事件监听器，如`window.onscroll`或`window....
Js悬浮广告代码
最新发布
skudhdk的博客
10-13 701
【代码】Js悬浮广告代码。
JS实现广告浮动
weixin_30779691的博客
05-12 302
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><title>浮动广告</title><script type="text/javascript"> var tips; var theTop = 50/*这...
js随机广告浮动
m0_57675124的博客
06-08 208
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } img{ width: 300px; height: 200px; position:absolute; left: 0px; .
JS实现漂浮广告功能
zxh996的博客
07-11 7012
JS实现漂浮广告功能前言一、漂浮广告案例 前言 漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。 一、漂浮广告案例 我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。 代码如下（示例）： <style type="text/css"> #div1 { width: 300px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值