Sina Visitor System更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
{{ each data as item index}}
{{if item.isLast}}
&正在加载...
抱歉，本页暂无内容！
{{#payMarkUrl}}
{{/payMarkUrl}}
{{^payMarkUrl}}
{{/payMarkUrl}}
&正在加载...
{{ each data as item index}}
{{item.playcount}}
举报视频：
举报原因(必填)：
请说明举报原因(300字以内)：
请输入您的反馈
举报理由需要输入300字以内
感谢您的反馈～
请勿重复举报~
请刷新重试~
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接//71.am/udn
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
正在检测客户端...
您尚未安装客户端，正在为您下载...安装完成后点击按钮即可下载
30秒后自动关闭
UG产品设计造型之扶梯建模
请选择打赏金额：
播放量12.7万
播放量数据：快去看看谁在和你一起看视频吧~
更多数据：
{{each data}}
抱歉，没有“{{feature}}”的其他视频了.
&正在加载...
&正在加载...
&正在加载...
&正在加载...
&正在加载...
&正在加载...
{{ each data as item index}}
Copyright (C) 2018
All Rights Reserved
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
正在为您下载爱奇艺客户端安装后即可快速下载海量视频
正在为您下载爱奇艺客户端安装后即可免费观看1080P视频
&li data-elem="tabtitle" data-seq="{{seq}}"&
&a href="javascript:void(0);"&
&span>{{start}}-{{end}}&/span&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"&
&a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《》剧集：
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后
大概viewport可以理解为三种
1。layout viewport&,也就是这个浏览器默认的viewport
2。visual viewport&&,&浏览器可视区域viewport
3。&ideal viewport &,移动设备的理想viewport
通俗点讲，pc端css中的1px并不会等于移动端，原理很简单，举个例子说
通过chrome浏览器可以知道，一个Iphone 6 plus是414*736，而pc端的页面动辄几千px以上，所以css中的1px并不等于设备的1px
这也就意味着设备的1px等于多个csspx，也就是1px:Npx的关系
具体的解释我就不多说了，想要深入理解，可以跳转
下面讲怎么设置viewport
&<span style="color: # &meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"&&
为了达到理想移动设备viewport，可以用meta标签对viewport进行控制
而meta标签内可以有很多的属性，具体如下
设置layout viewport& 的宽度，为一个正整数，或字符串"width-device"
initial-scale
设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale
允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale
允许用户的最大缩放值，为一个数字，可以带小数
设置layout viewport& 的高度，这个属性对我们并不重要，很少使用
user-scalable
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
那么要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了
那么通过各大网友的测试，宽度都是竖屏时ideal viewport的宽度
但是这句话并不是所有浏览器都兼容的，那么为了使浏览器都有一个ideal viewport，content="initial-scale=1通过这句话使缩放比例为1
ideal viewport的效果就能正常实现了，这里我也是知其然而不知其所以然，具体的内容也可以通过跳转我就不多解释了
下面上一个简单的移动端布局
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"&
//通过window.screen.width获取屏幕的宽度
var offWidth = window.screen.width / <span style="background-color: #f5f5f5; color: #; //这里用宽度/30表示1rem取得的px
document.getElementsByTagName("html")[<span style="background-color: #f5f5f5; color: #].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size
/*偷个懒就直接全局初始化了*/
padding: 0;
margin: 0;
/* 布局需求,上下都间隔*/
margin: 0.rem 0;
/* 去处a标签的下划线*/
text-decoration: none;
width: 30rem;
/*<span style="background-color: #f5f5f5; color: #0/720*30*/
height: 4.rem;
/*图片宽750,高100*/
background: url("./img/head.png");
background-size: contain;
width: 30rem;
/*<span style="background-color: #f5f5f5; color: #0/720*30*/
height: 16.6666667rem;
/*图片宽750,高400*/
background: url("./img/top1.jpg");
background-size: contain;
width: 30rem;
height: 5.875rem;
/*图片宽750,高141*/
background: url("./img/top2.jpg");
background-size: contain;
width: 28.rem;
height: 13.rem;
/*图片宽750,高316*/
background: url("./img/top3.jpg") no-repeat;
background-size: contain;
margin-left: 0.rem;
position: relative;
position: absolute;
display: block;
width: 8.rem;
height: 2rem;
line-height: 2rem;
text-align: center;
background: #fff;
right: 0.rem;
bottom: 0.rem;
font-size: 0.rem;
color: red;
cursor: pointer;
width: 28.rem;
height: 13.rem;
/*图片宽750,高316*/
background: url("./img/top4.jpg") no-repeat;
background-size: contain;
margin-left: 0.rem;
90 &/head&
&div class="one"&&/div&
&div class="two"&&/div&
&div class="three"&&/div&
&div class="four"&
&a href=""&&span&25元起&/span&&/a&
&div class="five"&&/div&
<span style="color: #0 &/body&
<span style="color: #1
<span style="color: #2 &/html&
可以看到，我每个div里面都使用的rem这个代替了px单位
没错就是用这两句句话来进行改变的
&var offWidth = window.screen.width / 30;
document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px';
就拿第一个div里的height和width来举例
width: <span style="color: #rem;100/720*30
height: <span style="color: #.图片宽750,高100
由于给的图里面第一块是720px宽，100px的高，web端我可以直接这么写，但是手机上肯定不行啊，因为屏幕只有这么宽
缩放比例必须是正好才行
通过window.screen.width，就已经获取了屏幕宽，那么/30就是宽度分成30份，既然我宽度是满屏，那么width=30rem
宽度有了，<span style="color: #ff是30rem，那么<span style="color: #ff是多少rem很好求了，完全是数学问题，<span style="color: #ff0*30得到4.无限循环小数
本着小数越多就越精确的原则，我们取到小数点后面的9位，当然你喜欢20位也可以，不过好像浏览器并不支持
其他的div里的width和height也是以此类推，就不再重复说明了
还有一个图片显示的问题，要想图片按比例缩放，就要用到background-size:contain
我们可以翻转以下，看看宽度是不是满屏的，如图
&更新一下咯。真机测试发现横屏是不能铺满的，具体原因，最近没时间，等有空的时候再找一下原因
阅读(...) 评论()Sina Visitor System自己想做一个自己的网站，觉得自适应的效果会好一点，但是放到手机端的话，菜单显示是个问题。所以自己试着写了一个悬浮球菜单的效果。
好了，上代码。
这里有四个文件要用：
jqurey.js//因为基于jq做的。所以这里要引用js文件。我引用的是jquery-1.8.2.js
PublicJs.js
主要是判断是否是手机端，来确定是使用点击或触摸事件用的
1 var PublicJs = {};
2 PublicJs.IsPhone = function () {//判断是否是手机浏览器
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
return true;
return false;
} catch (e) {
return false;
13 //鼠标事件
14 PublicJs.Mouse = {
Down: (PublicJs.IsPhone() ? "touchstart" : "mousedown"),
Move: (PublicJs.IsPhone() ? "touchmove" : "mousemove"),
Up: (PublicJs.IsPhone() ? "touchend" : "mouseup"),
19 //鼠标移动
20 PublicJs.Move = function (e) {
var move = { x: 0, y: 0 };
var _e = e.touches ? e : window.
if (PublicJs.IsPhone()) {
// evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = _e.touches[0]; //获取第一个触点
move.x = Number(touch.pageX); //页面触点X坐标
move.y = Number(touch.pageY); //页面触点Y坐标
} catch (e) {
move.x = _e.screenX;
move.y = _e.screenY;
move.x = e.screenX;
move.y = e.screenY;
PublicJs.js
SuspendedBall.js
这个是悬浮球的主体方法
1 //悬浮球
2 var SuspendedBall = {
ShowWidth: 500,//显示悬浮球的页面宽度
//添加悬浮球 参数集合可中包含有 top、left、scc、class四个属性
Add: function (obj) {
if ($(".SuspendedBall").length == 0) {
$("body").append("&div class=\"SuspendedBall\"&&div&&/div&&/div&")
$("body").append("&div class=\"BallBox\"&&div class=\"Bg\"&&/div&&div class=\"BallBoxInfo\"&&/div&&/div&")
if (obj) {
var _this = $(".SuspendedBall");
if (typeof (obj.top) != "undefined") {
_this.offset({ top: obj.top });
if (typeof (obj.left) != "undefined") {
_this.offset({ left: obj.left });
if (typeof (obj.css) != "undefined") {
_this.css(obj.css);
if (typeof (obj.class) != "undefined") {
_this.addClass(obj.class);
//控制悬浮球移动，显示的方法 其中UpFun是指的当触摸或鼠标抬起的时候的执行的方法
Move: function (UpFun) {//第一个参数是鼠标抬起的事件触发，第二个参数是创建的时候添加的其他事件
var x = 0, y = 0;
var sx = 0, sy = 0;
var mx = 0, my = 0;
var isDown = false;
var isMove = false;
$(window).resize(function () {
if ($(window).width() & SuspendedBall.ShowWidth) {
$(".SuspendedBall").show();
$(".BallBox").hide();
$(".SuspendedBall").hide();
$(".BallBox").hide();
$("body").bind(PublicJs.Mouse.Down, function (e) {
if ($(window).width() & SuspendedBall.ShowWidth) {
$(".SuspendedBall").show();
$(".BallBox").hide();
$(".BallBox").bind(PublicJs.Mouse.Down, function (e) {
if ($(window).width() & SuspendedBall.ShowWidth) {
$(".SuspendedBall").show();
$(".BallBox").hide();
return false;//取消元素事件向下冒泡
$(".SuspendedBall").bind(PublicJs.Mouse.Down, function (e) {
//#region 去除原有的动画样式
var right = $(window).width() - $(this).width();
var bottom = $(window).height() - $(this).height();
if ($(this).hasClass("ToLeft")) {
$(this).removeClass("ToLeft").offset({ left: 0 });
else if ($(this).hasClass("ToTop")) {
$(this).removeClass("ToTop").offset({ top: 0 });
else if ($(this).hasClass("ToBottom")) {
$(this).removeClass("ToBottom").offset({ top: bottom });
else if ($(this).hasClass("ToRight")) {
$(this).removeClass("ToRight").offset({ left: right });
//#endregion-----
isDown = true;
x = $(this).offset().
y = $(this).offset().
var move = PublicJs.Move(e);
sx = move.x;
sy = move.y;
return false;//取消元素事件向下冒泡
$(".SuspendedBall").bind(PublicJs.Mouse.Move, function (e) {
if (isDown) {
var move = PublicJs.Move(e);
mx = move.x -//获取鼠标移动了多少
my = move.y -//获取鼠标移动了多少
var movemunber = 5;//当触摸的时候移动像素小于这个值的时候代表着不移动
if ((mx) & movemunber || (0 - mx) & movemunber || (my) & movemunber || (0 - my) & movemunber) {
isMove = true;
var _top = (y + my), _left = (x + mx);
var maxtop = $(window).height()-$(this).height();//获取最小的宽度
var maxleft = $(window).width() - $(this).width();//获取最大的宽度
_top = _top & 0 ? 0 : (_top & maxtop ? maxtop : _top);//避免小球移除移出去
_left = _left & 0 ? _left : 0;//避免小球移除移出去
$(this).offset({ top: _top , left: _left });
mx = move.x;
my = move.y;
// isMove =
return false;//取消元素事件向下冒泡
$(".SuspendedBall").bind(PublicJs.Mouse.Up, function (e) {
var _this = this;
///添加定时器，是因为有的时候move事件还没运行完就运行了这个事件，为了给这个时间添加一个缓冲时间这里定义了10毫秒
setTimeout(function () {
if (isMove) {//如果移动了执行移动方法
var move = { x: $(_this).offset().left, y: $(_this).offset().top };
var width = $(window).width() / 2;
var height = $(window).height() / 2;
var ToLeftOrRight = "left";
var ToTopOrBottom = "top";
var MoveTo = "x";
if (move.x & width) {
ToLeftOrRight = "right";
move.x = 2 * width - move.x;//左右边距
if (move.y & height) {
ToTopOrBottom = "bottom";
move.y = 2 * height - move.y;//上下边距
if (move.x & move.y) {
MoveTo = "y";
$(_this).removeClass("ToLeft").removeClass("ToTop").removeClass("ToBottom").removeClass("ToRight");//去除原样式
if (MoveTo == "x") {
if (ToLeftOrRight == "left") {
$(_this).addClass("ToLeft");
$(_this).addClass("ToRight");
if (ToTopOrBottom == "top") {
$(_this).addClass("ToTop");
$(_this).addClass("ToBottom");
if (typeof (UpFun) == "function") {
$(".SuspendedBall").hide();
$(".BallBox").show();
isDown = false;
isMove = false;
return false;//取消元素事件向下冒泡
//这个方法是显示页面上面的悬浮球方法
ShowBall: function () {
$(".SuspendedBall").show();
$(".BallBox").hide();
//这个方法是显示页面上面的悬浮球菜单的方法
ShowBox: function () {
$(".SuspendedBall").hide();
$(".BallBox").show();
//这个方法是给悬浮球菜单添加内容的方法
BoxHtml: function (html) {
$(".BallBoxInfo").html(html);
//这个方法是获取到父级页面的悬浮球的方法
Partent: function () {
if (typeof (window.parent.SuspendedBall) != "undefind") {
return window.parent.SuspendedB
return null;
179 //frame页面点击隐藏顶级父页面悬浮球菜单的方法
180 function FrameBodyClick() {
var topWin = (function (p, c) {
while (p != c) {
p = p.parent
})(window.parent, window);
$("body").bind(PublicJs.Mouse.Down, function (e) {
if (topWin.SuspendedBall) {
if ($(window).width() & topWin.SuspendedBall.ShowWidth) {
topWin.SuspendedBall.ShowBall();
196 $(function () {
FrameBodyClick();
SuspendedBall.js
SuspendedBall.css
悬浮球的样式
1 .SuspendedBall {
position: fixed;
width: 50px;
height: 50px;
background: #3071a9;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity: 0.5; /*Firefox私有，透明度50%*/
opacity: 0.5; /*其他，透明度50%*/
z-index: 999; /*最高的层级*/
top: 100px;
left: 0px;
display: none;
.SuspendedBall & div {
width: 30px;
height: 30px;
margin: 10px;
background: #fff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
background-image: url("/Images/Self.png");
background-repeat: no-repeat;
background-size: 80% auto;
background-position-x: 50%;
background-position-y: 50%;
36 @media screen and (max-width: 500px) {
.SuspendedBall {
display: block;
43 @keyframes SuspendedBallToLeft {
left: 0px;
49 @-webkit-keyframes SuspendedBallToLeft {
left: 0px;
55 @-moz-keyframes SuspendedBallToLeft {
left: 0px;
62 .ToLeft {
animation: SuspendedBallToLeft 1s normal;
-moz-animation: SuspendedBallToLeft 1s normal; /* Firefox */
-webkit-animation: SuspendedBallToLeft 1s normal; /* Safari 和 Chrome */
animation-iteration-count: 1;
-moz-animation-iteration-count: 1; /* Safari 和 Chrome */
-webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
74 @keyframes SuspendedBallToTop {
80 @-webkit-keyframes SuspendedBallToTop {
86 @-moz-keyframes SuspendedBallToTop {
93 .ToTop {
animation: SuspendedBallToTop 1s normal;
-moz-animation: SuspendedBallToTop 1s normal; /* Firefox */
-webkit-animation: SuspendedBallToTop 1s normal; /* Safari 和 Chrome */
animation-iteration-count: 1;
-moz-animation-iteration-count: 1; /* Safari 和 Chrome */
-webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
105 @keyframes SuspendedBallToBottom {
top: calc(100% - 50px);
top: -webkit-calc(100% - 50px);
top: -moz-calc(100% - 50px);
113 @-webkit-keyframes SuspendedBallToBottom {
top: calc(100% - 50px);
top: -webkit-calc(100% - 50px);
top: -moz-calc(100% - 50px);
121 @-moz-keyframes SuspendedBallToBottom {
top: calc(100% - 50px);
top: -webkit-calc(100% - 50px);
top: -moz-calc(100% - 50px);
129 .ToBottom {
animation: SuspendedBallToBottom 1s normal;
-moz-animation: SuspendedBallToBottom 1s normal; /* Firefox */
-webkit-animation: SuspendedBallToBottom 1s normal; /* Safari 和 Chrome */
animation-iteration-count: 1;
-moz-animation-iteration-count: 1; /* Safari 和 Chrome */
-webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
141 @keyframes SuspendedBallToRight {
left: calc(100% - 50px);
left: -webkit-calc(100% - 50px);
left: -moz-calc(100% - 50px);
149 @-webkit-keyframes SuspendedBallToRight {
left: calc(100% - 50px);
left: -webkit-calc(100% - 50px);
left: -moz-calc(100% - 50px);
157 @-moz-keyframes SuspendedBallToRight {
left: calc(100% - 50px);
left: -webkit-calc(100% - 50px);
left: -moz-calc(100% - 50px);
165 .ToRight {
animation: SuspendedBallToRight 0.5s normal;
-moz-animation: SuspendedBallToRight 0.5s normal; /* Firefox */
-webkit-animation: SuspendedBallToRight 0.5s normal; /* Safari 和 Chrome */
animation-iteration-count: 1;
-moz-animation-iteration-count: 1; /* Safari 和 Chrome */
-webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
179 .BallBox {
position: fixed;
z-index: 999;
top: calc(50% - 160px);
left: calc(50% - 160px);
display: block;
width: 300px;
border: 1px solid #808080;
border-radius: 10px;
height: 300px;
padding: 10px;
display: none;
.BallBox & .Bg {
position: absolute;
z-index: 998;
width: 300px;
height: 300px;
background-color: #ededed;
background-image: url("/Images/Self.png");
background-repeat: no-repeat;
background-size: 50% auto;
background-position: 50% 50%;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
.BallBox & .BallBoxInfo {
position: absolute;
z-index: 999;
width: 300px;
height: 300px;
overflow: auto;
SuspendedBall.css
&还有要注意的是，你的body是否足够高。因为隐藏悬浮菜单的事件实在body上面触发的。我的页面中设置了html{width:100%;height:100%;}body{width:100%;height:100%}这两个样式。来解决这个问题，同事也解决了苹果手机里面的position:失效的问题
然后下面是我们使用这个悬浮球的时候的代码了
1 $(function () {
SuspendedBall.Add();//添加悬浮球
SuspendedBall.BoxHtml("&ul class=\"SMenu\"&" + $("#MenuInfo").html() + "&/ul&");//添加菜单框的内容当然，具体的样式和里面的内容需要自己去写
SuspendedBall.Move();//这个就是让悬浮球动起来的方法。为啥单独写个不写到add方法里面呢？因为你可以在页面中直接写入悬浮球的两个div。这个方法里面可以添加一个参数，这个参数是个function。当鼠标抬起的时候会调用到这个方法。
页面使用的js
然后，整个悬浮球就做完了。
想看的同学们可以打开我的网站去看：
当然，要记得放到宽度小于500的浏览器中看，我设置了显示的大小。
下面是我在google浏览器中手机界面看到的效果。
好了，弄完了，钦此。
阅读(...) 评论()}