HTML与jQuery结合：实现商品列表交互动画的首页代码解析

<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mian.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript"> // (1)创建js函数，使用jquery动画，实现ready事件 $(document).ready(function(){ //ready事件 $('li').each(function(index){ //遍历对象 $(this).hover(function(){ //单击触发事件 $('li').animate({ width:100 },500); //删除当前元素的样式 $('li').eq(index).animate({ width:200 },500); }); }); }); </script> <title>首页</title> </head> <body> <header> <div class="logo"> <img src="img/logo.jpg" width="250" height="60"> </div> <form class="searchform"> <input type="text" name="search" id="search"/> <input type="submit" value="搜索" id="button"/> </form> <div class="navigation"> <a href="#">手机</a>  |  <a href="#">电脑</a>  |  <a href="#">平板</a>  |  <a href="#">配件</a>  |  <a href="#">服务</a> </div> </header> <ul> <li>商品1</li> <li>商品2</li> <li>商品3</li> <li>商品4</li> </ul> </body> </html> ######[AI写代码神器 | 497点数解答 | 2024-12-19 14:58:20]

服务商

更多选项

快捷项

自定义