教你实现仿酷狗播放器(附源码)

文章目录

教你实现仿酷狗播放器
- CSS
- HTML & JavaScript
- 后记

教你实现仿酷狗播放器

CSS

<style>@charset "utf-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent}body {line-height: 1}ol,ul {list-style: none}blockquote,q {quotes: none}blockquote:before,blockquote:after,q:before,q:after {content: '';content: none}:focus {outline: 0}ins {text-decoration: none}del {text-decoration: line-through}table {border-collapse: collapse;border-spacing: 0}a {text-decoration: none;color: #fff}body {font-family: "Kreon";font-weight: 300;color: #333;background: #fff;}#switcher {height: 54px;z-index: 99999;position: fixed;width: 100%;top: 0;background: #000;}.center {width: 100%;padding-top: 0}.center ul li {display: inline;float: left;position: relative}.logoTop,.top2 {margin-left: 30px;margin-top: 20px;color: #fff;font-weight: bold;font-family: "微软雅黑"}.top2 {position: relative;margin-top: 16px;font-size: 12px;font-weight: normal;background-image: url(../i/2vm.png);background-repeat: no-repeat;background-position: 3px center;height: 20px;padding-left: 25px;line-height: 20px;border: 1px solid #414141;padding-right: 5px;border-radius: 5px;}.vm {position: absolute;top: 20px;left: 0px;background-color: #fff;height: 170px;width: 150px;display: none;padding: 30px;}.top2:hover .vm {display: block}.logoTop a:hover {text-decoration: underline}li.remove_frame {margin-left: 17px;float: right!important;margin-right: 30px}li.remove_frame a {background: url(../i/cross2.png) no-repeat 0 0;width: 20px;height: 21px;display: block;margin-top: 18px;transition: all .3s ease-out 0s}li.remove_frame a:hover {background-position: 0 -21px}#iframe {margin-top: 0}.icon-monitor,.icon-tablet,.icon-mobile-1,.icon-mobile-2,.icon-mobile-3 {margin-right: 7px;margin-top: 20px;width: 17px;height: 16px;background: url(../i/mon-spr.png) no-repeat;}.icon-monitor {margin-left: 10px;background-position: 0 0;}.icon-tablet {background-position: -24px 0}.icon-mobile-1 {background-position: -49px 0}.icon-monitor:hover,.icon-monitor.active {background-position: 0 -16px}.icon-tablet:hover,.icon-tablet.active {background-position: -24px -16px}.icon-mobile-1:hover,.icon-mobile-1.active {background-position: -49px -16px}.icon-mobile-2 {background-position: -71px 0}.icon-mobile-3 {background-position: -94px 0}.icon-mobile-2:hover,.icon-mobile-2.active {background-position: -71px -16px}.icon-mobile-3:hover,.icon-mobile-3.active {background-position: -94px -16px}#iframe-wrap {height: 100%;overflow: visible;position: relative;top: 54px;z-index: 50}.tablet-width {height: 960px!important;margin: 0 auto;padding: 175px 100px 115px 100px;width: 785px;margin-top: 40px;background: url(../i/bg-mob.png) no-repeat 0 0}.tablet-width iframe {height: 960px!important}.mobile-width {height: 703px!important;margin: 0 auto;padding: 165px 115px 100px 100px;width: 1041px;margin-top: 40px;background: url(../i/bg-mob.png) no-repeat 0 -1249px}.mobile-width iframe {height: 704px!important}.mobile-width-2 {height: 417px!important;margin: 0 auto;padding: 125px 25px 159px 25px;width: 337px;margin-top: 40px;background: url(../i/bg-mob.png) no-repeat 0 -2217px}.mobile-width-2 iframe {height: 416px!important}.mobile-width-3 {height: 256px!important;margin: 0 auto;padding: 45px 115px 69px 105px;width: 497px;margin-top: 40px;background: url(../i/bg-mob.png) no-repeat -387px -2217px}.mobile-width-3 iframe {height: 256px!important}#by {overflow-y: hidden}
</style>

HTML & JavaScript

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><title>仿酷狗音乐播放器vue特效</title><link href="demo.css" rel="stylesheet" media="all" /><!--[if IE]><style type="text/css">li.remove_frame a {padding-top: 5px;background-position: 0px -3px;}</style><![endif]--><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.qrcode.min.js"></script><script type="text/javascript">$(document).ready(function () {function fixHeight() {var headerHeight = $("#switcher").height();$("#iframe").attr("height", $(window).height()-54+ "px");}$(window).resize(function () {fixHeight();}).resize();$('.icon-monitor').addClass('active');$(".icon-mobile-3").click(function () {$("#by").css("overflow-y", "auto");$('#iframe-wrap').removeClass().addClass('mobile-width-3');$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');$(this).addClass('active');return false;});$(".icon-mobile-2").click(function () {$("#by").css("overflow-y", "auto");$('#iframe-wrap').removeClass().addClass('mobile-width-2');$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');$(this).addClass('active');return false;});$(".icon-mobile-1").click(function () {$("#by").css("overflow-y", "auto");$('#iframe-wrap').removeClass().addClass('mobile-width');$('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');$(this).addClass('active');return false;});$(".icon-tablet").click(function () {$("#by").css("overflow-y", "auto");$('#iframe-wrap').removeClass().addClass('tablet-width');$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');$(this).addClass('active');return false;});$(".icon-monitor").click(function () {$("#by").css("overflow-y", "hidden");$('#iframe-wrap').removeClass().addClass('full-width');$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');$(this).addClass('active');return false;});});</script><script type="text/javascript">function Responsive($a) {if ($a == true) $("#Device").css("opacity", "100");if ($a == false) $("#Device").css("opacity", "0");$('#iframe-wrap').removeClass().addClass('full-width');$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');$(this).addClass('active');return false;};</script><script type="text/javascript" src="/static/js/protect.js"></script></head>
<body id="by"><div id="iframe-wrap"><iframe id="iframe" src="https://www.17sucai.com/preview/493260/2020-03-07/仿酷狗播放器/index.html" frameborder="0"  width="100%"></iframe>
</div></script></body>
</html>

后记

教你实现仿酷狗播放器(附源码)相关推荐

【博主推荐】html好看的音乐播放器(附源码)
html好看的音乐播放器文章目录 1.主界面列表效果 2.主界面详情效果 3.背景风格1-背景色轮动 4.背景风格2-图片轮动 5.MP3免费下载 5.1 MyFreeMP3 5.2.铜钟音乐源码 ...
360player全景图播放器-附源码
开发了一个全景图播放器,自带全景展示.背景音乐.重力感应等功能,不用写代码,通过配置文件就可以展示全景图片. 360plyaer使用说明 1.360player是基于浏览器的全景图播放器,浏览器需要支 ...
用Python制作一个相册播放器(附源码)
对于相册播放器,大家应该都不陌生(用于浏览多张图片的一个应用). 当然还有视频.音乐播放器,同样是用来播放多个视频.音乐文件的. 在Win10系统下,用[照片]这个应用打开一张图片,就可以浏览该图片所 ...
几款最主流的音乐播放器应用源码-android源码
影音播放优雅音乐播放器应用源码这是一款不错的音乐播放器应用源码案例,优雅音乐播放器应用源码,该应用的界面有点类似小米音乐播放器,应用的整天布局还没有那人气:3328运行环境:/android/i ...
迷你酷狗播放器 v1.017
迷你酷狗pc版是一款带有音乐搜索功能的音乐播放器,又称之为迷你酷狗播放器,能够支持DirectSound.64比特混音.AddIn插件扩展技术,同时支持高级采样频率转换(SSRC)和多种比特输出方 ...
Android 模仿酷狗播放器（精品源码）
Android 模仿酷狗播放器精品Demo很值得学习特别推荐下载学习! 巨卓网下载地址:http://www.juapk.com/thread-516-1-1.html
依米花音乐播放器php源码下载
仿依米花音乐播放器是一款简约的HTML悬浮音乐播放器,免费分享和之前分享的绚丽彩虹在线音乐播放器生成源码差不多,功能界面都是大同小异的.这款依米花音乐播放器php源码支持网易云/QQ音乐,可搭建类是与 ...
依米花音乐播放器php源码
简介: 和之前分享的绚丽彩虹在线音乐播放器生成源码差不多,功能界面都是大同小异的. 这款依米花音乐播放器php源码支持云/QQ音乐,可搭建类是与播放器功能的平台. 源码安装方法: 环境:php5.6或 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...

教你实现仿酷狗播放器(附源码)

文章目录

教你实现仿酷狗播放器

CSS

HTML & JavaScript

后记

教你实现仿酷狗播放器(附源码)相关推荐

最新文章

热门文章