javascript:广告、文字跑马灯、图片浮动案例

最新推荐文章于 2024-04-14 11:46:37 发布

php398893944

最新推荐文章于 2024-04-14 11:46:37 发布

阅读量3.3k

点赞数

文章标签： javascript function div fun ie 浏览器

本文链接：https://blog.csdn.net/php398893944/article/details/7285166

版权

javascript浏览器对象

window.open

实现一个广告弹出效果

1、确定我们要弹出的内容

2、控制弹出大小、窗口的特征

3、弹出的起始坐标(0,0)

<script type="text/javascript">

function openAdv(){

var w=window.open("http://www.taobao.com","淘宝网","height=800,width=1000,location=no,resizable=0,status=0,toolbar=0,top=0,left=0");

w.moveTo(0,0);

}

</script>

</head>

<body>

<a οnclick="openAdv()">淘宝</a>

</body>

------------------------------------------

利用window对象,在实现一个图片的浮动效果

1、先有一个广告div,就是我们要控制的，它的起始点(0,0)

2、设定横向和纵向的速度

3、控制div移动

1)广告div是否到达边界

2)如果到达以后，我们按照这个速度反向移动

js-picture-float.html

<style type="text/css">

div{

position:absolute;

}

</style>

</head>

<body>

<div id="img">

<a href="http://www.baidu.com"><img src="aa.jpg" width="130" height="150"></a>

</div>

<script type="text/javascript">

//获取图片所在的div对象

var img=document.getElementById("img");

//设置div左上角坐标起始点的坐标 0,0

var x=0,y=0;

//设置图片的行进的速度

var xSpeed=10,ySpeed=10;

//设置图片的最大浮动的高度和宽度

var w=document.documentElement.clientWidth-130;

var h=document.documentElement.clientHeight-150;

function floatimg(){

//比较图片是否到达边界

//如果到达边界以后，我控制图改变方向

if(x>w||x<0) xSpeed=-xSpeed;

if(y>h||y<0) ySpeed=-ySpeed;

//如果没有到达边界，设置图片的左上角的坐标，

x+=xSpeed;

y+=ySpeed;

//设置坐标值起始坐标+速度

//控制div位置

img.style.left=x;

img.style.top=y;

setTimeout("floatimg()",40);

}

floatimg();

</script>

--------------------------------------------

关于IE和火狐中处理event事件的兼容问题

核心语句：

对象.事件=function(e){//注意,e是隐藏的传递过来的参数

兼容FF 兼容IE

var evt=e||window.event;

}

event 事件对象

event.clientX 获得水平方向 X 轴坐标

event.clientY 获得水平方向 Y 轴坐标

<body>

<div id="div1" style="width:400px; height:300px;

background-color:pink">

</div>

<script type="text/javascript">

//给div加上onmousemove的事件,调用函数来解决IE和火狐兼容

document.getElementById("div1").οnmοusemοve=getPoint;

function getPoint(evt){

//来解决IE和火狐差别,event1一定能够获取到mouseEvent对象

var event1=evt||window.event;

//获取鼠标所在的位置，并且显示到div中 document.getElementById("div1").innerHTML=event1.clientX+","+event1.clientY;

}

</script>

</div>

</body>

------------------------------------------------------

实现状态栏的文字跑马灯效果

思路：

1、定义要走动的文字字符串

2、每次取出第一个字符，并且连接到源字符的末尾

3、把新的字符串写入到标题栏和状态栏

4、定时执行

<script type="text/javascript">

var str=" 欢迎进入河北软件职业技术学院CSDN乐知学院";

function Move(){

//第一句每次取出第一个字符，并且连接到源字符的末尾

str=str.substr(1)+str.charAt(0);

//将字符串写入到状态栏

window.status=str;

//显示到标题栏

document.title=str;

//重复执行

setTimeout("Move()",200);

}

</script>

</head>

<body οnlοad="Move()">

</body>

图片向上浮动：

<style type="text/css">

div{

position:absolute;

}

</style>

</head>

<body>

<img src="bb.jpg" width="500" height="250">

<div id="img">

<img src="aa.jpg" width="1400" height="500">

</div>

<script type="text/javascript">

var img=document.getElementById("img");

//定义坐标

var y=0;

//定义速度

var yspeed=10;

//定义浮动范围

var h=document.documentElement.clientHeight+500;

function fun1(){

//漂浮超过范围反方向

if(y>h||y<0) yspeed=-yspeed;

y+=yspeed;

//div移动

img.style.top=y;

setTimeout("fun1()",50);

}

fun1();

</script>

</body>

图片位置随机出现

<style type="text/css">

div{

position:absolute;

}

</style>

</head>

<body οnlοad="fun1()">

<div id="img">

<img src="aa.jpg" width="100" height="125">

</div>

<script type="text/javascript">

var img=document.getElementById("img");

//定义速度

var xspeed=10,yspeed=10;

//定义浮动范围

var w=document.documentElement.clientWidth-100;

var h=document.documentElement.clientHeight-125;

//定义坐标

function fun1(){

var x=Math.round((Math.random()*w));

var y=Math.round((Math.random()*h));

//div移动

img.style.top=y;

img.style.left=x;

setTimeout("fun1()",1000);

}

</script>

</body>

----------------------------------------------------------------------------

php398893944

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript:广告、文字跑马灯、图片浮动案例

javascript浏览器对象 window.open 实现一个广告弹出效果1、确定我们要弹出的内容2、控制弹出大小、窗口的特征3、弹出的起始坐标(0,0) function openAdv(){var w=window.open("http://www.taobao.com","淘宝网","height=800,width=1000,location=no,re
复制链接

扫一扫