写了个差不多的

Original 2018-11-07 21:41:11 230
abstract:提问:parseInt()还没有理解,老师再解释一下。尤其是我的距离有加法运算,加不加parseInt差别巨大。其他的嘛,还要多练,这章涉及到蛮多新的东西,练一遍不够。没时间啦,再来取写一下。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document

提问:parseInt()还没有理解,老师再解释一下。尤其是我的距离有加法运算,加不加parseInt差别巨大。

其他的嘛,还要多练,这章涉及到蛮多新的东西,练一遍不够。没时间啦,再来取写一下。


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<style type="text/css">

*{margin: 0px;padding: 0px;}

#div_nav{margin: 40px auto; width: 800px;position: relative;}

ul{list-style: none;border: 1px solid #28AAE2;height:30px;position: relative;z-index:20;color:#0EA5E5;}

li{float:left;height: 18px; width:100px;line-height: 18px;text-align:center;cursor: pointer;border-right:1px solid #0EA5E5;margin:5px 0px; }

#div_bg{

height:4px;width: 100px;background-color:#0EA5E5;

position: absolute;top:27px;z-index:10; 

}

</style>

</head>

<body>

<script type="text/javascript">

$(function(){

      $('li').hover(

        function(){

         $x=parseInt($(this).attr('name'))*100+parseInt($(this).attr('name'))+1

         $('#div_bg').stop().animate({left:$x+'px'},300)

        },

        function(){

          $('#div_bg').stop().animate({left:'0px'},300)

        }   

        )

    })

</script>

<div id="div_nav">

<ul>

<li name="0">按钮一</li>

<li name="1">按钮二</li>

<li name="2">按钮三</li>

<li name="3">按钮四</li>

<li name="4">按钮五</li>

</ul>

<div id="div_bg"></div>

</div>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2018-11-07 21:45:11
Teacher's summary:parseInt()是定义在全局对象window上的一个全局方法,功能是实现类似转换,还有一个同胞兄弟, parseFloat()用来处理小数

Release Notes

Popular Entries