CSS3做动物走路效果

CSS3做动物走路效果

采用的CSS3切换序列帧做

核心代码如下

.game .role {
    width: 60px;
    height: 86px;
    position: absolute;
    top: -83px;
    background-image: url(../images/role5.png);
    background-repeat: no-repeat
}

.roleRunAm {
    -webkit-animation-name: roleRunAm;
    -webkit-animation-duration: 0.9s;
    -webkit-animation-timing-function: steps(6);
    -webkit-animation-iteration-count: infinite;
    animation-name: roleRunAm;
    animation-duration: 0.9s;
    animation-timing-function: steps(6);
    animation-iteration-count: infinite
}

@-webkit-keyframes roleRunAm {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: -365px 0
    }
}

@keyframes roleRunAm {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: -365px 0
    }
}

365px就是序列帧图片的宽度
序列帧图(

../images/role5.png

role5

 

播放动画直接addclass roleRunAm 停止就removeclass 这个可以结合位移做 而且不会卡出现闪烁的现象 如果用其他setTimeout 递归切换图片肯定卡

但是此方法不能用自适应

redis在项目中的应用

redis在项目中的应用 ps:PHP 会自动 关redis连接 不需要手动关 对于临时的数据 可以不经过数据库直接redis上操作


	/*消息队列实例 消息队列详细步骤在http://newmiracle.cn/?p=227*/

	public function insertinfo(){

	  //连接本地的 Redis 服务
        $redis = new \Redis();
        $redis->connect('127.0.0.1', 6379);
        //存储数据到列表中
    $infos =  array('info1' => 66, 'info2' => 88);
        $redis->lpush($key, json_encode($infos));

        // 获取存储的数据并输出
        $arList = $redis->lrange("tutorial-list", 0, 30);
        print_r($arList);
        exit();
	}


/*读取实例*/
 //$key一般写数据库名字 leftjoin的话取第一个数据库
    function getinfos($sql,$key)
    {
        $md5key=md5($sql);
        //连接本地的 Redis 服务
        $redis = new \Redis();
        $redis->connect('127.0.0.1', 6379);
        // 获取存储的数据

        //用与left join
        if(is_array($key)){
             foreach ($key as $k=>$v){
                 $result = $redis->get($key);
                 $result=json_decode($result,'true');
                 if(empty($result)){
                     $result=0;
                 }
             }
            if(!$result){
                $result = $redis->get($key[0]);
                $result=json_decode($result,'true');
            }
            //用户普通sql语句
        }else{
            $result = $redis->get($key);
            $result=json_decode($result,'true');
        }

        if (empty($result)) {
            $VModel = new HuanShanVoteModel();
            $result = $VModel->query($sql);
            $list[$md5key]=$result;
            $redis->set($key,json_encode($list));
            return $result;
        }else{
            $list=$result[$md5key];
            return $list;
        }
    }

/*更新实例*/

	public function updateinfo(){


		//运行sql语句
		$sql="update mobantestinfo set info1=1 where id=40";
		$VModel = new HuanShanVoteModel();
		$isOk = $VModel->execute($sql);

		//连接本地的 Redis 服务
		$redis = new \Redis();
		$redis->connect('127.0.0.1', 6379);
		/*删除key*/
		$redis->del('tutoriallist');
	}
	/*删除实例*/

	public function deleteinfo(){


		//运行sql语句
		$sql="delete from mobantestinfo where id=40";
		$VModel = new HuanShanVoteModel();
		$isOk = $VModel->execute($sql);

		//连接本地的 Redis 服务
		$redis = new \Redis();
		$redis->connect('127.0.0.1', 6379);
		$redis->del('tutoriallist');
	}
    function insertinfos($key, $sql)
    {
        //运行sql语句
        $VModel = new HuanShanVoteModel();
        $isOk = $VModel->execute($sql);

        //连接本地的 Redis 服务
        $redis = new \Redis();
        $redis->connect('127.0.0.1', 6379);
        $redis->del($key);
        return $isOk;
    }

html5手机端播放音效不卡的方法

html5手机端播放音效不卡的方法
线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错

然后直接播放音效就可以了
audioEngine.playEffect(‘/solosea1/music/laidian.mp3’, false);

如果切换不了 可以先stop 然后再play
audioEngine.stopEffect(‘/hcfabuhui/music/2.mp3’);

如果延迟 是其他代码性能影响了 预加载也没用

还有个更好的方法用creatjs里面的音乐框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width:750px;
            height:750px;
            background: #000;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="/liuanchewei/js/createjs.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

<script>
    $(function () {
        createjs.Sound.registerSound( {src:"/liuanchewei/audio/type.mp3", id:"tap"} );
    })
    $('body').on('click',function () {
        createjs.Sound.play("tap");
    })
</script>
</body>
</html>

ps:刚进入页面 因为要注册 所以要等一会再按就不会延迟了

nginx location笔记

nginx location笔记
= 开头表示精确匹配
^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可。nginx不对url做编码,因此请求为/static/20%/aa,可以被规则^~ /static/ /aa匹配到(注意是空格)。
~ 开头表示区分大小写的正则匹配
~* 开头表示不区分大小写的正则匹配
!~和!~*分别为区分大小写不匹配及不区分大小写不匹配 的正则
/ 通用匹配,任何请求都会匹配到。
多个location配置的情况下匹配顺序为(参考资料而来,还未实际验证,试试就知道了,不必拘泥,仅供参考):
首先匹配 =,其次匹配^~, 其次是按文件中顺序的正则匹配,最后是交给 / 通用匹配。当有匹配成功时候,停止匹配,按当前匹配规则处理请求。
例子,有如下匹配规则:

location = / {
   #规则A
}
location = /login {
   #规则B
}
location ^~ /static/ {
   #规则C
}
location ~ \.(gif|jpg|png|js|css)$ {
   #规则D
}
location ~* \.png$ {
   #规则E
}
location !~ \.xhtml$ {
   #规则F
}
location !~* \.xhtml$ {
   #规则G
}
location / {
   #规则H
}

那么产生的效果如下:
访问根目录/, 比如http://localhost/ 将匹配规则A
访问 http://localhost/login 将匹配规则B,http://localhost/register 则匹配规则H
访问 http://localhost/static/a.html 将匹配规则C
访问 http://localhost/a.gif, http://localhost/b.jpg 将匹配规则D和规则E,但是规则D顺序优先,规则E不起作用,而 http://localhost/static/c.png 则优先匹配到规则C
访问 http://localhost/a.PNG 则匹配规则E,而不会匹配规则D,因为规则E不区分大小写。
访问 http://localhost/a.xhtml 不会匹配规则F和规则G,http://localhost/a.XHTML不会匹配规则G,因为不区分大小写。规则F,规则G属于排除法,符合匹配规则但是不会匹配到,所以想想看实际应用中哪里会用到。
访问 http://localhost/category/id/1111 则最终匹配到规则H,因为以上规则都不匹配,这个时候应该是