注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

网页音乐播放器,并固定浏览器底部中央  

2013-09-17 22:19:45|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
网页音乐播放器,并固定浏览器底部中央 - 米欧studio - 米欧光影工作室
 
web音乐播放器,又名酷黑音乐播放器


播放器代码自己研究,本文从略。

注释:
由data.js文件控制歌曲内容,只需要在此文件中更新设置,并上传歌曲到media文件夹中即可,也可以使用网络歌曲。
//DATA("歌名","地址","ID");








固定播放器在浏览器底部中央:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.footer-engine {
font-size:12px;
overflow: hidden;
padding: 10px 0;
transition: position 0.5s ease-in-out 0s;
width: 100%;
}
.footer-engine.flip {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 1px solid #DEDEDE;
bottom: 0;
left: 0;
opacity: 0.8;
position: fixed;
}

</style>
</head>

<body>

<div style="width:1000px; height:1200px; margin:0 auto; background:#EEFEB9;">
这个div是占位符,作用是提供一个很长的网页。
</div>


<div class="footer-engine flip">
<div style="width:960px; margin:0 auto; border:#FED76C 1px solid; padding:5px;">
随便放东西,就可以位于页面底部中间了。
</div>
<div>


</body>
</html>



refer
1 火狐中国首页,向下滚动时底部出现搜索条:http://i.firefoxchina.cn/
2 透明度浏览器支持情况 http://www.html5china.com/manual/css3/opacity.html
  评论这张
 
阅读(192)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017