专栏首页eadelajQuery基础--音乐视频操作

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> <div class="nav"> <ul> <li> <a href="javascript:void(0);">导航1</a> <span></span> </li> <li><a href="javascript:void(0);">导航2</a><span></span></li> <li><a href="javascript:void(0);">导航3</a><span></span></li> <li><a href="javascript:void(0);">导航4</a><span></span></li> <li><a href="javascript:void(0);">导航5</a><span></span></li> <li><a href="javascript:void(0);">导航6</a><span></span></li> <li><a href="javascript:void(0);">导航7</a><span></span></li> <li><a href="javascript:void(0);">导航8</a><span></span></li> <li><a href="javascript:void(0);">导航9</a><span></span></li> </ul> <!--音频标签--> <div> <audio src="mp3/1.ogg"></audio> <audio src="mp3/2.ogg"></audio> <audio src="mp3/3.ogg"></audio> <audio src="mp3/4.ogg"></audio> <audio src="mp3/5.ogg"></audio> <audio src="mp3/6.ogg"></audio> <audio src="mp3/7.ogg"></audio> <audio src="mp3/8.ogg"></audio> <audio src="mp3/9.ogg"></audio> </div> </div> </body> </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery基础--基本概念

    js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)

    eadela
  • jQuery基础--选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    eadela
  • CSS基础--属性选择器、伪类选择器

    eadela
  • 第27天:js-表单获取焦点和数组声明遍历

    1、this指事件的调用者 2、input.value 表单更换内容 3、innerHTML更换盒子里的内容,文字、标签都能换。 4、isNaN("12")如果...

    半指温柔乐
  • 用面向对象的方法写"敲门砖"

    一道名为"敲门砖"的面试题: 用面向对象的方法写,点击列表内,子元素的子标签, 来删除子元素 ? 考点: 递归(删除标签, 需要找到列表的直属子标签, 需要通...

    zhaoolee
  • 聊聊 Python 做微信小程序自动化,那些踩过的坑?

    之前写过 微信小程序的几种方式,对于有源码的小程序推荐使用微信开放的 SDK 来做自动化,否则只能使用原生或 WebView 的方式。

    AirPython
  • 前端的CRUD增删改查的小例子

    Dream城堡
  • Html5响应式设计实现九宫格

    自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:小米商城,天猫等。 至于响应式设计的概念等大家可以去百度...

    业余草
  • 微信文件传输助手文件夹在哪?一起来找找

      微信文件传输助手是微信电脑版与手机微信之间相互传输图片等文件的好工具,但很多童鞋都找不到微信文件传输助手文件夹在哪,就让我们一起找找吧   1.先说说手机微...

    ytkah
  • 仿百度地图上拉下滑抽屉盒

    王小婷

扫码关注云+社区

领取腾讯云代金券