神奇的布局方式display:flex

作者: admin 日期: 2019-05-06

一：display:flex 布局，Flex布局是什么

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

复制内容到剪贴板

程序代码

.box{
display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
display: flex; //将对象作为弹性伸缩盒显示
}

当然，行内元素也可以使用Flex布局。

复制内容到剪贴板

程序代码

.box {
display: inline-flex; //将对象作为内联块级弹性伸缩盒显示
}

兼容性写法
.box {
display: flex || inline-flex;
}

二、基本概念
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

结构示意图

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间；

三、flex的六个容器属性
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 34

Unity3D中Scene场景面板常用快捷键

作者: admin 日期: 2019-04-17

1、按下鼠标滚轮拖运场景，滑动滚轮缩放场景。
2、鼠标右键旋转场景，点击“

”后，通过左键移动场景。
3、点击左键同时按下W/S/A/D/Q/E键可实现场景漫游。
4、在Scens面板选中物体后按F键，或在Hierarchy面板双击物体，可将物体设置为场景视图的中心。
5、按住alt键同时通过鼠标左键围绕某物体旋转场景，鼠标右键缩放场景。

分类: unity3D学习笔记 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6

KRPANO加密XML手动解密分析

作者: admin 日期: 2017-06-14

KRPano自带的工具可以对XML文件进行加密，保护XML文件。加密分为两种，第一种为公共加密，即允许其他krpano全景读取该XML，而另一种为私有加密，仅允许加密的用户读取XML。两种加密方式的算法是一致的，只是公有加密使用了一个公共的解密密钥，而私有加密则是根据某个用户自己的密钥进行加密的。

不过，由于krpano可以运行于浏览器中，XML会在解析的过程中在内存中出现，所以可以利用浏览器调试技术提取出解密好的XML。

一个典型的加过密的XML文件如下

<encrypted>KENCRUBR6XHk18l9V8NcuX33cW/5TK3svI6......</encrypted>

以<encrypted></encrypted>为标签，同时密文前三个字母为KEN

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 21

具有回放、慢动作播放功能的视频播放器

作者: admin 日期: 2017-04-08

HTML代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8"/>  
<title>具有回放功能的视频播放器</title>  
<style>
div#buttonDiv{
    width:800px;
    display:none;
}
progress#playPercent{
    width:800px;
}
div#progress{
    width:800px;
    height:20px;
    left:0px;
    background:#ccc;
}
div#progressValue{
    width:0%;
    height:20px;
    background:green;
    cursor:default;
}
div#showTime{
    z-index:2;
    display:none;
    position:absolute;
    font-size:10px;
}
</style>
</head>  
<body>  
<video id="video" src="http://www.soposd.com/uploads/10.mp4" width="800">
您的浏览器不支持video元素
</video>
<div id="buttonDiv">
<progress id="playPercent" max=100>
    <div id="progress">
        <div id="progressValue"></div>
    </div>
</progress>
<button id="btnPlay" onclick="PlayOrPause()" disabled/>播放</button>
<button id="btnSpeedUp" onclick="SpeedUp()" disabled/>加速</button>
<button id="btnSpeedDown" onclick="SpeedDown()" disabled/>减速</button>
<button id="btnSlowPlay" onclick="SlowPlay()" disabled/>慢放</button>
<button id="btnMute" onclick="setMute()" disabled/>静音</button>
<button id="btnVolumeUp" onclick="VolumeUp()" disabled/>增音</button>
<button id="btnVolumeDown" onclick="VolumeDown()" disabled/>降音</button>
<button id="btnPlayBack" onclick="PlayBack()" disabled/>回放</button> 
</div>
<div id="showTime">
</div>
</body> 
<script type="text/javascript"> 
var speed=1;
var volume=1;
var muted=false;
var direction=1; 
var video = document.getElementById("video");
var showTime=document.getElementById("showTime");
var functionId;
if(video.canPlayType)
{
    video.addEventListener('loadedmetadata',loadedmetadata,false);
    video.addEventListener('ended',videoEnded,false);
    video.addEventListener('play',videoPlay,false);
    video.addEventListener('pause',videoPause,false);
    video.addEventListener('timeupdate',updateProgress,false);
    video.addEventListener("error",catchError,false);  
    progress=document.getElementById("progress");
    progress.onmouseover=progress_mouseover;
    progress.onmouseout=progress_mouseout;
    progress.onclick=progress_click;
    playPercent=document.getElementById("playPercent");
    playPercent.onmouseover=progress_mouseover;
    playPercent.onmouseout=progress_mouseout;  
    playPercent.onclick=playPercent_click;
}
function catchError()
{
    var error = video.error;  
    switch(error.code)
    {  
        case 1:  
            alert("视频的下载过程被中止。");  
            break;  
        case 2:  
            alert("网络发生故障，视频的下载过程被中止。");  
            break;  
        case 3:  
            alert("解码失败。");  
            break;  
        case 4:  
            alert("媒体资源不可用或媒体格式不被支持。");  
            break;  
      }  
}

function loadedmetadata()
{    
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="暂停";
    btnPlay.disabled=""; 
    video.play();  
    var buttonDiv=document.getElementById("buttonDiv");
    buttonDiv.style.display="block";   
}
function PlayOrPause()
{
    if(video.paused)
    {
       video.play();
       video.playbackRate=speed;
       video.muted=muted;
       video.volume=volume;       
    }
    else
        video.pause();

} 
function videoEnded(ev)
{
    video.currentTime=0;
    this.pause();
}
function videoPlay(ev)
{
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="暂停";
    document.getElementById("btnSpeedUp").disabled="";
    document.getElementById("btnSpeedDown").disabled="";
    document.getElementById("btnSlowPlay").disabled="";
    document.getElementById("btnMute").disabled="";
    document.getElementById("btnVolumeUp").disabled="";
    document.getElementById("btnVolumeDown").disabled="";
    document.getElementById("btnPlayBack").disabled="";
    if(direction==-1)
        functionId=setInterval(playBack1,200);     
} 
function videoPause(ev)
{
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="播放";
    document.getElementById("btnSpeedUp").disabled="disabled";
    document.getElementById("btnSpeedDown").disabled="disabled";
    document.getElementById("btnSlowPlay").disabled="disabled";
    document.getElementById("btnMute").disabled="disabled";
    document.getElementById("btnVolumeUp").disabled="disabled";
    document.getElementById("btnVolumeDown").disabled="disabled";
    document.getElementById("btnPlayBack").disabled="disabled";
    clearInterval(functionId);
}
function updateProgress() 
{
　　var value=Math.round((Math.floor(video.currentTime)/Math.floor(video.duration))*100,0);
    var progress = document.getElementById('playPercent');
    progress.value = value;
    var progressValue=document.getElementById("progressValue");
    progressValue.style.width = value+"%";    
    showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor(video.duration));
}
function calcTime(time)
{
    var hour;
    var minute;
    var second;
    hour=String(parseInt(time/3600,10));
    if (hour.length == 1)   hour   = '0' + hour;
    minute=String(parseInt((time%3600)/60,10));
    if (minute.length == 1)   minute   = '0' + minute;
    second=String(parseInt(time%60,10));
    if (second.length == 1)   second   = '0' + second;
    return hour+":"+minute+":"+second;
}
function progress_mouseover(ev)
{
    showTime.style.display="inline";
    showTime.style.left=ev.pageX+5+"px";
    showTime.style.top=ev.pageY+5+"px";
    showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor(video.duration));
    ev.stopPropagation();
}
function progress_mouseout(ev)
{
    showTime.style.display="none";
    showTime.innerHTML="";
}
function playPercent_click(evt)
{
    if(evt.offsetX)
    {
        playPercent=document.getElementById("playPercent");
        video.currentTime = video.duration * (evt.offsetX / playPercent.clientWidth);
    }
}
function progress_click(evt)
{
    progress=document.getElementById("progress");
    if(evt.offsetX)
        video.currentTime = video.duration * (evt.offsetX /progress.clientWidth);
    else
        video.currentTime = video.duration * (evt.clientX /progress.clientWidth);
}
function SpeedUp()
{    
    video.playbackRate+=1;
    speed=video.playbackRate;
}
function SpeedDown()
{
    video.playbackRate-=1;
    if(video.playbackRate<0)
        video.playbackRate=0;
    speed=video.playbackRate;
}
function SlowPlay()
{
    var btnSlowPlay=document.getElementById("btnSlowPlay");    
    if(btnSlowPlay.innerHTML=="慢动作")
    {
    video.playbackRate=0.5;
        btnSlowPlay.innerHTML="正常速度";
        document.getElementById("btnSpeedUp").disabled="disabled";
        document.getElementById("btnSpeedDown").disabled="disabled";
    }
    else
    {
    video.playbackRate=1;
        btnSlowPlay.innerHTML="慢动作";
        document.getElementById("btnSpeedUp").disabled="";
        document.getElementById("btnSpeedDown").disabled="";
    }
    speed=video.playbackRate;
}
function setMute()
{
    if(!video.muted)
    {
        video.muted=true;
        document.getElementById("btnMute").innerHTML="取消静音";
    }
    else
    {
        video.muted=false;
        document.getElementById("btnMute").innerHTML="静音";
    }
    muted=video.muted;
}
function VolumeUp()
{
    if(video.volume<1)
        video.volume+=0.1;
    volume=video.volume;
}
function VolumeDown()
{   
    if(video.volume>0)
         video.volume-=0.1;
    volume=video.volume;
}
function PlayBack(){
    var playBackBtn=document.getElementById("btnPlayBack");
    if(playBackBtn.innerHTML=="回放")
    {
        functionId=setInterval(playBack1,200);
        playBackBtn.innerHTML="取消回放";
        direction=-1;
    }
    else
    {
        clearInterval(functionId);
        playBackBtn.innerHTML="回放";
        direction=1;
    }
}
function playBack1()
{
    var playBackBtn=document.getElementById("btnPlayBack");
    if(video.currentTime==0)
    {
        playBackBtn.innerHTML="回放";
        clearInterval(functionId);
    }
    else
        video.currentTime-=1;
}
</script>  
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 12

js动态显示媒体文件播放时间

作者: admin 日期: 2017-04-08

功能描述

为多媒体元素<video>添加一个“onTimeUpdate”事件，用于改变播放文件位置时调用。另外，增加一个ID号为“spnTimeTip”的<span>元素，用于动态显示媒体文件播放的当前时间与总量时间。

实现代码

在DreamweaverCS5中新建一个HTML页面dome.html，加入代码如代码清单dome所示。

代码清单dome 通过timeupdate事件动态显示媒体间文件播放时

源码分析

在本实例中，当多媒体元素触发timeupdate事件时，调用_个自定义函数v_timeupdate()t在该函数中，分别使用整除与求余数的方法，分割多媒体元素当前时间（currentTime)属性与时间总量(duration)属性返回的秒值，组成分与秒的格式。在组成过程中，又调用了另外一个自定义函数RuleTime()，该函数可以将长度不足2位的数字，在前面加“0”进行补充，实现过程如Javascript代码中加粗部分所示。

Tags: 动态显示动态显示媒体文件媒体文件播放时间播放时间

分类: 学无止境 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 5

获取表单元素各值相关

作者: admin 日期: 2017-03-30

Javascript获取select下拉框选中的的值

复制内容到剪贴板

程序代码

1、使用javascript原生的方法获取值

获取select对象： var myselect=document.getElementById("switch");

获取选中项的索引：var index=myselect.selectedIndex ;   // selectedIndex代表的是你所选中项的index

获取选中项options的value：  myselect.options[index].value;

获取选中项options的text：  myselect.options[index].text;

2、jquery方法获取值（前提是已经加载了jquery库）

var options=$("#switch option:selected");  //获取选中的项

console.log(options.val());   //拿到选中项的值

console.log(options.text());   //拿到选中项的文本

HTML代码

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8">
    <title>Forms</title> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body>

$( "#switch" ).bind( "change", function() {
            var options=$("#test option:selected");  //获取选中的项
        
            console.log(options.val());   //拿到选中项的值
            console.log(options.text());   //拿到选中项的文本
        });
        
    </script>
</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 8

jquery判断li中data-id为2的元素

作者: admin 日期: 2016-09-01

$("li[data-id='2']")

//

$("ul .li[data-id='2']")

分类: 学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 8

HTML 字符实体

作者: admin 日期: 2015-08-29

HTML 中有用的字符实体
注释：实体名称对大小写敏感！
显示    描述    实体名称    实体编号
    空格
<    小于号    <    <
>    大于号    >    >
&    和号    &    &
"    引号    "    "
'    撇号     ' (IE不支持)    '
￠    分    ¢    ¢
£    镑    £    £
¥    日圆    ¥    ¥
€    欧元    €    €
§    小节    §    §
©    版权    ©    ©
®    注册商标    ®    ®
™    商标    ™    ™
×    乘号    ×    ×
÷    除号    ÷    ÷

Tags: HTML HTML 字符实体字符实体

分类: 学无止境 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 25