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,华联石化,海油石化,青 ...
随机推荐
- JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
- centos7服务器安装fail2ban配合Firewalld防护墙防止SSH爆破与防护网站CC攻击
centos7服务器安装fail2ban配合Firewalld防护墙防止SSH爆破与防护网站CC攻击 1.检查firewalld是否启用 #如果您已经安装iptables建议先关闭 service i ...
- nginx报错:Permission denied
vi /etc/selinux/config #SELINUX=enforcing #注释掉 #SELINUXTYPE=targeted #注释掉 SELINUX=disabled #增加 :wq! ...
- 梦想CAD控件图块COM接口知识点
梦想CAD控件图块COM接口知识点 图块是将多个实体组合成一个整体,并给这个整体命名保存,在以后的图形编辑中图块就被视为一个实体.一个图块包括可见的实体如线.圆.圆弧以及可见或不可见的属性数据.图块的 ...
- Python【每日一问】34
问: 基础题: 定义函数实现以下功能:求出 0-n 所能组成的奇数个数,位数最多 n+1 (0<n<10),比如键盘输入n=7,求出0-7所能组成的奇数个数 提高题: 有如下分数序列: 2 ...
- 在PL/SQL DEV里面有把锁一样的按钮,点击它会跳出“these query result are not updateable,include the ROWID to get updateab
在PL/SQL DEV里面有把锁一样的按钮,点击它会跳出“these query result are not updateable,include the ROWID to get updateab ...
- P2041 分裂游戏
P2041 分裂游戏 手推$n=3$是无解的,推断$n>=3$是无解的 证明略,这是道结论题. #include<iostream> #include<cstdio> # ...
- Number Theory Problem(The 2016 ACM-ICPC Asia China-Final Contest 找规律)
题目: Mr. Panda is one of the top specialists on number theory all over the world. Now Mr. Panda is in ...
- Python面向对象一些阶段性总结
什么时候用面向对象??? 1.共同的方法,提出来.共同的方法可以产生一个连接,其他方法可以使用,例如传文件,和执行命令都需要建立连接,关闭连接 例如 获取连接,...操作..关闭连接 2.创建模板.造 ...
- 用Python实现阿里钉钉机器人读取数据库内容自动发群通知
最近想把一些预警数据信息按照一定的要求自动发送到移动端APP,最终把目标放在了腾讯的微信和阿里的钉钉软件上,由于刚开始学习python,于是编程工具想用python来实现.微信使用群体最广,通过一天的 ...