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

 

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 onclick="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").onmousemove=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="    欢迎进入河北软件职业技术学院优快云乐知学院";

  function Move(){

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

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

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

      window.status=str;

    //显示到标题栏 

      document.title=str;

    //重复执行

      setTimeout("Move()",200);

      }

  </script>

</head>

<body onload="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 onload="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>

 

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