css3软键盘不盖住输入框的方法

css3软键盘不盖住输入框的方法

弹出软键盘的时候 最外面的容器高度就发生了变化 要减去软键盘高度了

var bodyheight
 bodyheight = $('body').height();
   var bodywidth = $('body').width();
    $('.p6a input').on('click', function() {
        var inputwarptop = $(this).parents('.inputwarp').position().top;
        $('.p6a').css('height', bodyheight);
        $('.p6a').css('width', bodywidth);
        $('.p6a_bg').css('height', bodyheight);
        $('.p6a_bg').css('width', bodywidth);
        $('.swiper-container').css('height', bodyheight);
        $('.swiper-container').css('width', bodywidth);
        $('.swiper-container').css('top', '-' + (inputwarptop - 100) + 'px');
        $('.swiper-slide').css('height', bodyheight);
        $('.swiper-slide').css('width', bodywidth);
        //判断是否关闭键盘
        setTimeout(function() {
            var aa = setInterval(function() {
                var actbodyheight = $('body').height();
                if (bodyheight == actbodyheight) {
                    $('.swiper-container').css('top', '0px');
                    clearInterval(aa);
                }
            }, 200)
        }, 1000)
    })

css3 transform做动画

css3 transform做动画
第一种用关键帧 这里就不说了 就说第二种方法用 transition属性
ps:1jquery anim不支持transform动画 但css还是支。
2 css3关键帧就是不能动态修改关键帧属性 所以采用这个。

         <img class="p1_wz1"src="{$yuming}/images/1/p1_wz1.jpg" />
.p1_wz1{
    width: 2.3rem;
    position: absolute;
    left: 41.6%;
    top: 4.2rem;

    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

然后运行下如下代码

$(".p1_wz1").css({"-webkit-transform":"rotate(260deg)"});

马上就旋转了起来 进度条可以参考这个方法来做

css3写下雨效果

css3写下雨效果

<div class="xiayuxiaoguo">
</div>
.xiayuxiaoguo{
    width:100%;
    height: 100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 2;
}
.xiayu {
    animation: xiayu 2s forwards;
    -webkit-animation: xiayu 2s forwards;
}


@keyframes xiayu /* Firefox */
{

    to {
        top: 130%;
    }
}

@-webkit-keyframes xiayu /* Safari 和 Chrome */
{

    to {
        top: 130%;
    }
}
.yudi{
    width:2px;
    height: 10px;
    position: absolute;
    top:0%;
    background: #000;
}
xiayu();
function xiayu() {
    setTimeout(function () {
        var leftsuiji=RandomNumBoth(0,100);
        var yudi='<div style="left:'+leftsuiji+'%;" class="yudi xiayu"></div>';
        $(".xiayuxiaoguo").append(yudi);
        xiayu();
        if($('.yudi').length>=150){
            $('.yudi').remove();
        }
    },100)
}
function RandomNumBoth(Min,Max){
    var Range = Max - Min;
    var Rand = Math.random();
    var num = Min + Math.round(Rand * Range); //四舍五入
    return num;
}

大致就是利用jquery动态创建雨滴 然后播放css3动画就OK了

jquery控制css3动画播放

jquery控制css3动画播放 长按图片缩小 松开停止缩小 再长按继续缩小….如此循环下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .suoxiaoxiaoguo1 {
            animation: scale5 7s forwards;
            -webkit-animation: scale5 7s forwards;
        }

        @-webkit-keyframes scale5 {
            0% {

            }
            100% {
                -webkit-transform: scale(0.5, 0.5);
                opacity: 1;
            }
        }

        @keyframes scale5 {
            0% {

            }
            100% {
                -webkit-transform: scale(0.5, 0.5);
                opacity: 1;
            }
        }

        .pause {
            animation-play-state: paused;
        }

    </style>
</head>
<body>
<img class="ss" style="width:100%; height:100%;  "
     src="http://wx.bocweb.cn/peng/xiangsheng_yjdd/resource/assets/library/1.jpg"/>

<script type="text/javascript" src="/index/js/jquery.min.js"></script>
<script>
    $(function () {
        $('body').on('touchstart', function () {

            $('.ss').removeClass('pause');
            $('.ss').addClass('suoxiaoxiaoguo1');

        })
        $('body').on('touchend', function () {
            $('.ss').addClass('pause');
        })
    })


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

ps:如果要重置动画可以用
$(‘.ss’).removeClass(‘suoxiaoxiaoguo1’); setTimeout(function(){ $(‘.ss’).addClass(‘suoxiaoxiaoguo1’); },100);
remove以后要过100毫秒 添加动画才有效果

css3网站响应式写法

css3响应式写法
因为media不支持ie9以下的浏览器 所有要加个判断

     
 <!-- 全部通用的 -->
<link rel="stylesheet" href="{$yuming}/css/common.css?v={$visition}">
 <!--[if lte IE 8]>
    <link rel="stylesheet"  href="{$yuming}/css/pccommon.css?v=<?php echo time() ?>"">
    <![endif]-->
    <!--  pc -->
    <link rel="stylesheet"  href="{$yuming}/css/pccommon.css"  media="(min-width:1350px)">

   <!--ipad和手机公用的css-->
    <link rel="stylesheet"  href="{$yuming}/css/mobpadcommon.css"  media="(max-width:1349px)">

    <!-- ipad和笔记本    -->
    <link rel="stylesheet"  href="{$yuming}/css/ipadcommon.css"  media="(min-width:768px) and (max-width:1349px)">
    <!-- 手机/-->
    <link rel="stylesheet"  href="{$yuming}/css/mobilecommon.css"  media="(max-width:767px)">

PC ipad 尺寸都写死 pc中间内容1350 ipad中间内容宽度768

少用绝对定位 外围高度不要写死

手机端写 全部自适应

注意:如果碰到编辑器编辑生成内容需要自适应的时候 在移动端 图片要设置百分比 编辑图片的时候不能写宽度和高度哦居中就行 文字字体大小不用管