首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery基础--音乐视频操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none; } .nav { width: 900px; height: 60px; background-color: black; margin: 0 auto; } .nav li { width: 100px; height: 60px; /*border: 1px solid yellow;*/ float: left; position: relative; overflow: hidden; } .nav a { position: absolute; width: 100%; height: 100%; font-size: 24px; color: blue; text-align: center; line-height:60px; text-decoration: none; z-index: 2; } .nav span { position: absolute; width: 100%; height: 100%; background-color: yellow; top: 60px; } </style> <script src="../jquery-1.12.4.js"></script> <script> $(function () { $(".nav li").mouseenter(function () { $(this).children("span").stop().animate({top:0}); var idx = $(this).index(); //让对应的音乐播放, 音乐播放的方法时DOM对象。 $("audio").get(idx).load(); $("audio").get(idx).play(); }).mouseleave(function () { $(this).children("span").stop().animate({top:60}); }); }); </script> </head> <body>

领券