...跳到问题列表页,要跳到对应位置还要变蓝色,js怎么实现呢

发布网友 发布时间：2024-10-24 02:57

我来回答

共1个回答

热心网友 时间：6分钟前

界面实现

主页面

主页面是仿其他网页音乐播放器的，效果如图： 

上面有一个导航条可以切换到其他功能页面，下方是一个Footer，点击之后切换到播放界面。

播放页面 

实现了播放模式（单曲循环、随机播放、循环播放），上一曲、下一曲、播放/暂停以及音乐播放列表的呈现。

搜索页面

搜索歌曲可以得到对应的歌曲列表，点击之后开始播放。

实现

音乐播放的功能主要依赖的是H5标签。其有以下几个属性是比较重要的： 
src : 播放的音频源； 
autoplay: ‘autoplay’ 定义自动播放； 
loop : ‘loop’ 定义循环播放； 
controls: ‘controls’ 显示播放控件

另外，audio也有很多事件属性，利用这些事件属性可以实现该音乐播放器音频的播放交互效果。比如： 
Media事件中的 oncanplay事件，onended事件，onpause和onplay事件等等，详细可参考W3C上的文档。

主界面的实现 
主要用了一个隐藏的audio标签； 
在window下监听mousemove事件，通过鼠标的移动来设置导航栏的显示，并在导航栏监听mouseleave事件，设置导航栏的隐藏； 
封装了一个图片轮播的插件； 
播放列表的实现（数组中初始存了一些音乐）； 
Footer布局实现。

主要需要详细说的有两个：轮播插件和播放列表的实现。 
jQuery插件的编写大都是下面这个模板： 
如果是全局插件的话

;(function($){
   $.extend({
       函数名: function(){
           //一些处理操作
       }//这是一个全局插件，即通过jQeury.函数名 可以直接调用的
   });
})(jQuery)

如果是对象插件：

;(function($){
   $.fn.extend({
       函数名: function(){
           //函数实现体
       }
   });  //对象插件顾名思义，是某个特定对象调用的方法})(jQuery)

因此，首先实现了在页面中展示轮播的效果： 
主要思路:每隔一段时间，改变图片的透明度，并改变图片上一层的黑点与白点效果；

var Url = "MusicPlayerImg/";var LunboArr = ["Music.jpg", "music3.PNG","music2.PNG", "music4.PNG","music5.PNG", "music6.PNG"];var i = 0;
$("#trueImg").fadeTo(1000, 0.2);

setInterval(function(){

   $("#trueImg").fadeTo(1000, 1);

   $("#circles img").each(function(index, el) {
       $(this).attr('src', 'MusicPlayerImg/黑点.png');                  
   });

   $("#trueImg").attr('src', Url + LunboArr[(i + 1) % 6]);    var selector = "#circles img:eq(" + ((i + 1) % 6) + ")";
   $(selector).attr('src', 'MusicPlayerImg/白点.png');              
   i++;

   $("#trueImg").fadeTo(1000, 0.2);
}, 2000);

随后将其封装成一个div对象插件：

;(function($){
   $.fn.extend({
       lunbo: function(){
           var Url = "MusicPlayerImg/";            var LunboArr = ["Music.jpg", "music3.PNG","music2.PNG", "music4.PNG","music5.PNG", "music6.PNG"];            var i = 0;
           $("#trueImg").fadeTo(1000, 0.2);

           setInterval(function(){

               $("#trueImg").fadeTo(1000, 1);

               $("#circles img").each(function(index, el) {
                   $(this).attr('src', 'MusicPlayerImg/黑点.png');                  
               });

               $("#trueImg").attr('src', Url + LunboArr[(i + 1) % 6]);                var selector = "#circles img:eq(" + ((i + 1) % 6) + ")";
               $(selector).attr('src', 'MusicPlayerImg/白点.png');              
               i++;

               $("#trueImg").fadeTo(1000, 0.2);
           }, 2000);
       }
   });  
})(jQuery)