摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:&nb
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding: 0;list-style:none;} .header{position:relative;} ul{width:600px;height:50px;margin:0 650px;} li{width:100px;height:48px;background:#666;float:left;line-height:50px;text-align:center;border-radius:5px;box-shadow:0 2px 10px;} .block{position:absolute;margin-left:650px;} </style> <script type="text/javascript" src='js/jquery.js'></script> </head> <body> <div> <ul> <li name='0'>1</li> <li name='1'>2</li> <li name='2'>3</li> <li name='3'>4</li> <li name='4'>5</li> <li name='5'>6</li> </ul> <div style='width:100px;height:2px;background:red;box-shadow:0 0 10px'></div> </div> <script type="text/javascript"> $(document).ready(function(){ $('li').hover(function(){ $aa=parseInt($(this).attr('name'))*100 $('.block').stop().animate({left:$aa+'px'},500) }, function(){ $('.block').stop().animate({left:'0px'},500) } ) }) </script> </body> </html>
代码还不熟练,代码运用还过于欠缺。一开始看老师用parseint还一下没反应过来,以为没教过,后来查下文档才记起来。实在是最开始教的。
想起也是好笑。代码现在都还看得懂,可是一到自己写确实还缺少头绪。不过完成了这个项目感觉很有成就感。(被第二个案例打击到了一点自信心)
批改老师:灭绝师太批改时间:2018-11-09 16:01:41
老师总结:学到这种程度容易出现眼高手低的状态,看着好像都没有问题,到自己做就全是问题,没有关系,理清楚每一句js是干嘛的为什么这么用就可以了……不懂就问,不用被打击到,都是有个过程的!