网页中 引入网易云音乐,贴边隐藏

  • 网站建设 2019-03-20 分享新闻到:
<返回列表

代码详解 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>网易云音乐</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src=/duowang/news/hangye/static/jsonFormater/jquery-1.7.2.min.js" type="text/javascript"></script>
 
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
 
        #music-163 {
            z-index: 10;
            width: 330px;
            height: 450px;
            position: fixed;
            left: -330px;
            top: 100px;
        }
 
        #music-163 span {
            width: 50px;
            height: 50px;
            background-color: #aeabc1;
            position: absolute;
            left: 330px;
            top: 0;
            border-radius: 2px;
        }
    </style>
 
    <script type="text/javascript">
        $(function () {
            var mDiv = $('#music-163');
            mDiv.mouseover(function () {
                startMove(0);
            });
            mDiv.mouseout(function () {
                startMove(-330);
            });
        });
        var timer = null;
        function startMove(target) {
            clearInterval(timer);
            var mDiv = $('#music-163');
            timer = setInterval(function () {
                // 越靠近 目标值速度越小
                var speed = (target - mDiv.offset().left) / 20;
                //向右移动速度为正数,向左为负数,将speed取整,显示不完全
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 
                if (mDiv.offset().left === target) {
                    clearInterval(timer);
                } else {
                    mDiv.css('left',mDiv.offset().left + speed + "px")
                }
            }, 10)
        }
    </script>
</head>
<body>
 
<div id="music-163">
    <object width="330" height="450"
            data="http://music.163.com/style/swf/widget.swf?sid=2232237850&type=0&auto=0&width=310&height=430"
            type="application/x-shockwave-flash"></object>
    <span id="music">
        <img height="100%" width="100%" src=/duowang/news/hangye/static/home/images/avatar.jpg alt=""/>
    </span>
</div>
</body>
</html>
 
 
网易云 插件有两种引入方式
 
第一种 iframe方式引入
 
优点:可以自 己调整插件的高度、宽度
缺点:很多博 客网站不支持嵌入iframe
 
<iframe frameborder="no" border="0" marginwidth="0"
        marginheight="0" width=330 height=450
        src=/duowang/news/hangye/"http_/music.163.com/outchain/player/type/0/amp;id/815573174/amp;auto/0/amp;height/430/quot;/gt;_/div.html>
</iframe>
1
2
3
4
显示效果
 
 
第二种,浏览器需要安装Flash插件
 
优点:可以适 用大部分的博客,如网易、新浪博客等
缺点:无法自 己调整插件的高度、宽度
 
<object width="330" height="450" data="http://music.163.com/style/swf/widget.swf?sid=815573174&type=0&auto=0&width=310&height=430" type="application/x-shockwave-flash">
</object>
1
2
显示效果
 
 
参数设置:
 
type : 类型(0:单曲、2:歌单)
id/sid:歌曲id
auto:0/1
0 表示打 开网页的时候不自动播放;
1表示打 开网页的时候自动播放。
分享新闻到:

更多阅读

哪种网站CMS适合建站,优化好

网络推广 2019-03-24
有部分cms建站系统天生对 搜索引擎友好 是有利于seo的,有利于seo的cms程序没有......查看全文

昆明网站建设,昆明网站建设

网站建设 2019-03-20
要说昆 明做网站建设公司哪家比较专业,哪家比较好,首先想 告诉大家什么样的......查看全文

昆明网 站建设公司哪家好?

网站建设 2019-03-20
个人或 者企业想要在互联网上以一个比较正规的方式出现,都免不了要有一个网......查看全文
返回全部新闻
扫描二 维码分享到微信
确 认
  • 商务合作

  • 邮箱:yn90600@qq.com
  • 手机:13187835231
  • 座机:0871-68213138
  • Q Q:2858000808
  • 地址:昆明市 高新区鑫园小区39幢

合作伙伴:

Copyright (c) 2014-2017 云南多 网科技有限公司 版权所有 滇ICP备14005946号

扫描二维码关注我们:多网科技
确 认
友情链接:    吉祥棋牌   七星棋牌   038彩票手机版   038彩票登录平台   038彩票客服热线