js实现伪音乐盒
支持快进

<div class="music-part">
<div class="box-bg"></div>
<div class="border-box"></div>
<div class="xc-video">
<div class="v-box">
<a href="javascript:;" title="" data-src="//adl.duoyi.com/sc111/cf/video/cg/arena.mp4"><img src="//adl.duoyi.com/sc111/cf/video/cg/arena.jpg" alt=""><span class="v-arrow"></span></a>
</div>
<p class="v-name">超凡竞技场宣传视频<i></i></p>
</div>
<div class="theme-music">
<div class="music-other">
<strong class="music-tit">《永恒魔法》</strong>
<div class="music-lrc">
<div class="lrc_box">
<div class="musicLrc">
<ul class="png24"><li class="">《永恒魔法》</li><li>演唱:许鹤缤</li><li>词:李卫强</li><li>曲:冯云飞</li><li>谁能灭灼热之痛</li><li>谁能平情海翻涌</li><li>就在平凡平淡平常平静之中</li><li>特立独行</li><li>前路总坎坷不平</li><li>星空指引我冲锋</li><li>就在半醉半醒半雨半晴之间</li><li>唯我独雄</li><li>我是英雄 超凡战纪中</li><li>任嘲声汹涌冷眼如冰</li><li>Fight 印在我掌中</li><li>潇洒驰骋不论成功</li><li>我是英雄 超凡战纪中</li><li>造一方天地同乐共生</li><li class="">Fight 印在我心中</li><li class="">勇者无敌 笑傲苍穹</li><li class="">前路总坎坷不平</li><li class="">星空指引我冲锋</li><li class="">就在半醉半醒半雨半晴之间</li><li class="on">唯我独雄</li><li>我是英雄 超凡战纪中</li><li>任嘲声汹涌冷眼如冰</li><li>Fight 印在我掌中</li><li>潇洒驰骋不论成功</li><li>我是英雄 超凡战纪中</li><li>造一方天地同乐共生</li><li>Fight 印在我心中</li><li>勇者无敌 笑傲苍穹</li><li>刀锋,划破长空</li><li>斧声,石破天惊</li><li>用刀光剑影刻无敌战功</li><li>我是英雄 超凡战纪中</li><li>任嘲声汹涌冷眼如冰</li><li>Fight 印在我掌中</li><li>潇洒驰骋不论成功</li><li>我是英雄 超凡战纪中</li><li>造一方天地同庆共生</li><li>Fight 印在我心中</li><li>勇者无敌笑傲苍穹</li><li>我是英雄</li></ul>
</div>
</div>
</div>
</div>
<div class="music-control music-control3 jp-state-playing">
<div class="seek-pan">
<div class="seek-bar" style="width: 100%;">
<span class="play-bar" style="width: 55.0915%;"></span>
</div>
</div>
<div class="play-time"><span class="currtime">02:18</span>/<span class="duratime">04:12</span></div>
<div class="play-pan">
<span title="播放" class="play" data-track="主题曲MP3" style="display: none;"></span>
<span title="暂停" class="pause" style="display: block;"></span>
</div>
</div>
</div>
<div class="theme-video">
<div class="v-box">
<a href="javascript:;" title="" data-src="//adl.duoyi.com/sc111/yh/video/mv/2.mp4"><img src="//image.duoyi.com/cf/web02/img/index/theme-mv.jpg" alt=""><span class="v-arrow"></span></a>
</div>
<p class="v-name">《永恒魔法》新主题曲MV<i></i></p>
</div>
</div>
js实现伪音乐盒的更多相关文章
- 使用JS控制伪元素的几种方法
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...
- 使用js获取伪元素的content
在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content Str ...
- js控制伪元素样式
//获取伪元素// CSS代码 #myId:before { content: "hello world!"; display: block; width: 100px; heig ...
- js将伪数组转换为标准数组的多种方法
在js中,数组是特殊的对象,凡是对象有的性质,数组都有,数组表示有序数据的集合,而对象表示无序数据的集合. 那伪数组是什么呢,当然它也是对象,伪数组一般具有以下特点: 按索引方式存储数据: 具有len ...
- 如何使用JS操纵伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息.也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素. 伪类 用于当已有元素处于的某个状态时 ...
- js修改伪类的值
css文件 p.change:after { content: attr(data-content); } js文件 $(this).addClass('change').attr('data-con ...
- 关于js中伪数组
伪数组: 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 伪数组无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push().pop ...
- js修改伪类元素样式
<style type="text/css"> .htmlbox_close::before, .htmlbox_close::after { content: ''; ...
- [js] - js中类(伪)数组装正规数组
今天的js中使用了自定义的原型方法去重后,再调用这个获取的去重的数组传入另一个含有for循环的方法时, console.log出错: dimensions:createTime,华联石化,海油石化,青 ...
随机推荐
- 使用Spring框架的步骤
“好记性,不如烂笔头”.今天正式接触了Spring框架,第一次接触Spring框架感觉Spring框架简化了好多程序代码,开发效率大大提高.现在介绍使用Spring框架的步骤.(使用spring-fr ...
- ThinkPHP---rbac权限管理
[一]概论 (1)简介 rbac(role based access controal),全称基于用户组/角色的权限控制. (2)概况 目前来说,一般项目有两种权限管理方式①传统方式:②rbac方式. ...
- datatable 分组
public static void PrintPersons() { //准备数据 DataTable dt = new DataTable(); dt.Columns.Add(new DataCo ...
- EXP-00083: 调用 EXFSYS.DBMS_EXPFIL_DEPASEXP.schema_info_exp 时出现前一问题
select owner,object_name,object_type,status from dba_objects where object_name = 'LT_EXPORT_PKG'; 如果 ...
- 洛谷——P2094 运输
P2094 运输 题目描述 现在已知N件商品,和搬运它们其中每一件的费用.现在搬家公司老板Mr.sb决定让我们每次任意选取2件商品.然后这2件商品只算一件商品的费用.但是这个商品的搬运费用是将选出的2 ...
- http怎么做自动跳转https
Nginx版本 server { listen 80; server_name localhost; rewrite ^(.*)$ https://$host$1 permanent; ...
- Extract local angle of attack on wind turbine blades
Extract local angle of attack on wind turbine blades Table of Contents 1. Extract local angle of att ...
- concepts in Turbulent Flow
Table of Contents 1. Concepts/Glossary 1.1. Turbulent eddy viscosity ,μt 1.2. Turbulent kinetic ener ...
- 百练2755:神奇的口袋(简单dp)
描述有一个神奇的口袋,总的容积是40,用这个口袋可以变出一些物品,这些物品的总体积必须是40.John现在有n个想要得到的物品,每个物品的体积分别是a1,a2……an.John可以从这些物品中选择一些 ...
- Linux学习总结(19)——Linux中文本编辑器vim特殊使用方法
1. vim比对功能 在linux的环境下 用于观察两个文件的一致性的时候我们一般用diff这个命令来比对,但是这个命令不能你特别详细的比对出 具体的位置或者行对比.这里就用到了vim的对比功能 vi ...