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毫秒 添加动画才有效果

jquery预加载显示百分比

jquery预加载显示百分比

  <img class="bj loadimg" loadimg="/weiqingshu/images/1/bj.jpg"/>

  imgNum=0;
    var load_img = [];
  /*$('.loadimg').each(function () {
        var loadimg=$(this).attr('loadimg');
        load_img.push(loadimg);
    })*/
    load_img.push( '/caigeci/images/answer0.jpg' );
    load_img.push( '/caigeci/images/answer1.jpg' );
    /*ss*/
    jQuery.imgpreload(load_img, {
        each: function () {
            /*this will be called after each image loaded*/
            var status = $(this).data('loaded') ? 'success' : 'error';
            if (status == "success") {
                var v = (parseFloat(++imgNum) / load_img.length).toFixed(2);
                console.log(Math.round(v * 100) + "<sup>%</sup>");
            }
        },
        all: function() {
            console.log('全部加载完成');
   /*$('.loadimg').each(function () {
                var loadimg=$(this).attr('loadimg');
                $(this).attr('src',loadimg);
            })*/
        }
    });

ps:加载的文件个数 /全部文件个数 的百分比就是进度

jquery ajax分页写法

jquery ajax分页写法
我用的是laypage插件

前端代码

        function demo(curr) {
            $.getJSON('/home/index/getinfo', {
                page: curr || 1 //向服务端传的参数,此处只是演示
            }, function (res) {
                var html = '';
                var list = res.data.list;
                $.each(list, function (k, v) {
                    html += '<div';
                    if(k%2==0){
                        html += ' style="margin-left:0px;"';
                    }
                    html += ' class="perinfocontent" onclick="window.location.href=\'content.html?id='+v['id']+'\'">';
                    html += '<img src="'+v['fengmiantu']+'" alt="" class="pic">';
                    html += '<div class="infos">';
                    html += '<div class="title">'+v['title']+'</div>';
                    html += '<div class="tiyao">'+v['content']+'</div>';
                    html += '<div class="publishtime">2017 / 1 / 23</div>';
                    html += '</div>';
                    html += '</div>';
                });

                $('.infocontent').html(html);

                //显示分页
                laypage({
                    cont: $('#page3'), //容器。值支持id名、原生dom对象,jquery对象,
                    pages: res.data.pagecount, //总页数
                    skip: true, //是否开启跳页
                    skin: 'molv',
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr

                        demo(obj.curr);
                        }
                    }
                });

            });
        };
//运行
        demo();

PHP代码

    public function getinfo(){
        $page = intval($_GET['page']);
     
        if(empty($page)){
            $page=1;
        }
        $startpos=$page-1;
        //返回每页的数据
        $percount = 8;
        $VModel = new HuanShanVoteModel();
        $sql = 'select * from wz_content order by id desc limit '.$startpos*$percount.',' . $percount;

        $result = $VModel->query($sql);
        foreach ($result as $k => $v) {
            $result[$k]['content'] = substr(stripHTML(htmlspecialchars_decode($v['content'])), 0, 30) . '......';
            $result[$k]['time'] = date('Y / M / D', $v['time']);
        }

        //返回总页码数
        $VModel = new HuanShanVoteModel();
        $sql = 'select title,content from wz_content';
        $alllist = $VModel->query($sql);
        $count = count($alllist);
        $pagecount = ceil($count / $percount);

        echo json_encode(array('success'=>1,'msg'=>'查询成功','data' => array('pagecount' => $pagecount, 'list' => $result)));
        exit();
    }

jquery swipper插件的一些弊端

jquery swipper插件的一些弊端
touch触摸机制是swipper的

阻止click冒泡。拖动Swiper时阻止click事件。下面这个方法或许可以解决触摸机制的问题

<div class="swiper-slide" onclick="alert('你点了Swiper')">
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
preventLinksPropagation : false,
})
</script>

2动画问题 swipper动画影响是全局的 每次操作会影响每个container 所以 动画只能用在1给地方是最稳定的
或者 执行下

$('.ani').css('visibility', 'visible'); 

3 在苹果手机上 无限点击会闪屏 这种情况只能做弹出层 不要写在swiper里面了

ps:swiper3.x 只适用于移动端 pc端兼容性较差ie10以下估计不兼容) 建议用swiper2.x
Animate.css动画库也是

pinchzoom插件模拟微信客户端点击图片放大(支持触摸滑动放到缩小)

pinchzoom插件模拟微信客户端点击图片放大(支持触摸滑动放到缩小) 代码如下

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>模拟微信客户端点击图片  (支持触摸滑动放大缩小)</title>
    <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
    <style>
     .pinch-zoom,.pinch-zoom img{
    width: 100%;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}
.pinch-zoom-container{
    height:1400px;
    display: none;
}
    </style>
</head>

<body>

<div class="kandatucontainer pinch-zoom">
    <img class="fangdac"  src="{$yuming}/images/fangdac.png" />
</div>

<script src="/js/pinchzoom.js"></script>
<script type="text/javascript">
    $(function () {
        $('.pinch-zoom').each(function () {
            new RTP.PinchZoom($(this), {});
        });



     //pinch-zoom-containe是最外面的容器 是自动生成的
    $('.fangdacbtn, .p18_wz1').on('click',function () {
        $('.fangdac').parents('.pinch-zoom-container').fadeIn();
      $("body").scrollTop(0)
    })

    $('.fangdac').parents('.pinch-zoom-container').on('click',function () {
        $(this).fadeOut();
    })
    })
</script>

</body>
</html>

这样就可以直接缩放图片了