为什么我的div的背景颜色不显示?

来源:2-1 JS速度动画

慕粉3207663

2016-06-09 14:04

<!DOCTYPE html>

<html >

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<style type="text/css">

body,div,span{

margin:0;

padding:0;}

#div1{

      width=200px;

      height=200px;

      background:blue;

      position:relative;

      left:-200px;

      top:0;}

 #div1 span{

       width=20px;

       height=20px;

       background:red;

       position:absolute;

       left:200px;

       top:75px;}

       </style>

<script>

        window.onload=function(){

        var oDiv=document.getElementById("div1");

        oDiv.onmouseover=function()   {

        startMove(0);}

        

      

        oDiv.onmouseout=function()   {

        startMove(-200);}

        }

        var timer=null;

        function startMove(iTarget){

         clearInterval(timer);

             var oDiv=document.getElementById("div1");

           timer=setInterval(function(){

           var speed=0;

           if(oDiv.offsetLeft>iTarget){

           speed=-10;

           }else{

           speed=10;}

           if(oDiv.offsetLeft==iTarget){

           clear(timer)}

           else{

             oDiv.style.left=oDiv.offsetLeft+speed+'px';    }

             },30 )     

        }

          </script>

       </head>

<body>

<div id="div1"> <span id="share">分享</span> </div>

</body>

</html>

http://img.mukewang.com/575906df0001f72803990317.jpg

写回答 关注

2回答

  • lixp2000
    2016-06-09 15:28:25
    已采纳
    1. 应该将width=200px;height=200px;width=20px;height=20px;改写成width:200px;height:200px;

    2. clear(timer);应写成clearInterval(timer)

    慕粉3207...

    我试了下第二条不做也没问题,只是第一条出了问题

    2016-06-09 15:55:41

    共 2 条回复 >

  • lixp2000
    2016-06-09 15:58:56

    你用firebug查看的时候,会有错误提示的;虽然不影响结果,我们尽量减少失误

    慕粉3207...

    我用的谷歌浏览器,应用商店打不开。。。。。。。

    2016-06-09 20:58:50

    共 1 条回复 >

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题