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>
----------------------------------------------------------------------------