jquery JSMpeg.js 播放视频解决不用全屏也能播放

jquery JSMpeg.js 播放视频解决不用全屏也能播放

<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>
	
</head>
<body>
	<div class="jsmpeg" data-url="/moban/ceshi.ts"></div>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
</body>
</html>

具体使用说明 https://github.com/phoboslab/jsmpeg

linux写系统服务的方法

linux写系统服务的方法

2.1 首先编写demo程序:hello.c

#include <stdio.h>  
# chkconfig: 2345 10 90 
main()  
{  
    FILE *fp;  
    char a[] = "Hello world!";   
    fp=fopen("hhh.txt","a+");   
    fputs(a,fp);  
    return 0;  
}  

2.2 编译hello.c

gcc -g hello.c -o hello  

2.3 在/etc/init.d目录下添加脚本test

#!/bin/bash  
  
start(){  
    echo "------------------test----------------"  
    cd /home/xxx   //hello的所在文件夹的绝对路径  
    ./hello  
}  
  
case $1 in  
start):  
start  
;;  
stop):  
echo "-----------------stop------------------"  
;;  
esac  
  
exit 0 

2.4 设置权限

chmod 777 /etc/init.d/test  

2.5 利用service启动hello

service test start  

2.6 设置开机自动启动

chkconfig --add test   

2.7重启服务器

shutdown -r now

css3 preserve-3d 的理解

css3 perspective 的理解 看下面demo就理解了 perspective保证子元素能以3D的空间展现 如果子元素没有要3d呈现的就不用加拉

perspective就是相机离物体的距离 perspective-origin可以调整相机的 x和y的位置 一般不要用这个属性 比较难控制
PS:一般3D最好用threejs 做比较容易控制 css3D就做单个图形 简单的3D旋转 问题不大

 perspective-origin
    转换模块-正方体


<style>

    *{
        margin: 0;
        padding: 0;
        /*去除默认边距*/
    }

    ul{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        box-sizing: border-box;
        margin: 100px auto;
        position: relative;
        /*修改基本样式*/
        transform: rotateY(45deg) rotateX(45deg);
        /*旋转看看效果*/
        transform-style: preserve-3d;
        /*将父元素设置为3d空间*/
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;
        font-size: 60px;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        /*修改基本样式*/
    }
    ul li:nth-child(1){
        background-color: red;
        transform: translateX(-100px) rotateY(90deg);
        /*将第一个l向左移动100像素,然后绕y轴旋转90度,形成左边的面*/
    }
    ul li:nth-child(2){
        background-color: green;
        transform: translateX(100px) rotateY(90deg);
        /*将第一个2向右移动100像素,然后绕y轴旋转90度*,形成右边的面*/
    }
    ul li:nth-child(3){
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
        /*将第一个3向上移动100像素,然后绕x轴旋转90度,形成上面的面*/
    }
    ul li:nth-child(4){
        background-color: yellow;
        transform: translateY(100px) rotateX(90deg);
        /*将第一个4向下移动100像素,然后绕x轴旋转90度*/
    }
    ul li:nth-child(5){
        background-color: purple;
        transform: translateZ(-100px);
        /*将第一个5向后移动100像素,形成后面的面*/
    }
    ul li:nth-child(6){
        background-color: pink;
        transform: translateZ(100px);
        /*将第一个l向前移动100像素,形成前面的面*/
    }

</style>

    • 1

 

  • 2

 

 

  • 3

 

 

  • 4

 

 

  • 5

 

 

  • 6

 

 

 

css3 mask遮罩动画(照明灯效果)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
    position:absolute;
    width: 400px;
    border:1px solid black;
}
#mask{
    height: 300px;
    background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
    -webkit-mask:  url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
      -webkit-mask-size:30px 20px;
    /*animation: 2s maskPosition infinite alternate ;*/
}

 @keyframes maskPosition{
    0%{-webkit-mask-position:0 0;}
    100%{-webkit-mask-position:1rem 1rem;}
} 
</style>
</head>
<body>
<div class="wrap">
    <div id="mask"></div>    
</div>
<script>

</script>
</body>
</html>

ps:

1 -webkit-mask-position 这个建议用rem来计算 不要用百分比计算 百分比不是按照图片的宽度来计算的

2 -webkit-mask-size 百分比是按照外面容器计算的 大小设置无限制的 (不设置为默认大小)

3 渐变属性不能做动画

4 实现照明灯 可以再参考http://newmiracle.cn/?p=1833这个

5 蒙版图片非透明地方显示 透明不显示

jquery.eraser制作擦涂效果

jquery.eraser制作擦涂效果

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>
        canvas画图
    </title>
</head>

<body>
    <img id="redux" style="width:60%;"  src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif" />
    <script type="text/javascript" src="/moban/js/jquery.min.js"></script>
    <script type="text/javascript" src="/moban/js/jquery.eraser.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#redux').eraser({
            completeRatio: .6,
            size: 20,
           completeFunction: showResetButton
        });
    })
    function showResetButton(){
    alert('刮完');
}
    </script>
</body>

</html>

ps:jquery.eraser.js源码我修改了 ctx.drawImage( this, 0, 0,width,height ); 这样就能自适应了 所以图片必须设置宽度

可以用于刮刮卡