animate

来源：互联网发布：淘宝大码女装外套编辑：程序博客网时间：2024/05/15 18:42

html

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><title>动画</title><link rel="stylesheet" type="text/css" href="../css/main.css"><link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPictureAnimate.css"><script src="../js/jquery-1.8.3.min.js"></script><script src="../js/Sortable.min.js"></script></head><body><!-- 头部样式 --><div class="Top"> <a href="wxPictureCutpicAdd.html" class="BtnCancel">取消</a> <a href="javascript:void(0)" class="BtnInsert" >  <div class="EditOrd">插入</div>  </a>  <h1>动画</h1></div><div class="wxPictureAnimate">  <div class="TabListContent">    <ul class="TabList">      <li class="selected"><a>        <h3>搞笑</h3>        </a></li>      <li><a>        <h3>猎奇</h3>        </a></li>      <li><a>        <h3>电影Gif</h3>        </a></li>      <li><a>        <h3>流行</h3>        </a></li>      <li><a>        <h3>内涵</h3>        </a></li>      <li><a>        <h3>心情</h3>        </a></li>      <li class="Liend"><a><img src="../css/images/Mobile_bg0314.png"></a></li>    </ul>  </div>  <div class="TabListItem">    <div class="TabListItemForFun">        <div class="ForFun">            <div class="PopAnimateViewer "><img src="../css/images/Mobile_bg0315.png"></div>            <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0305.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer "><img src="../css/images/Mobile_bg0315.png"></div>        <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0306.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer"><img src="../css/images/Mobile_bg0315.png"></div>        <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0307.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer"><img src="../css/images/Mobile_bg0315.png"></div>        <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0308.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer"><img src="../css/images/Mobile_bg0315.png"></div>        <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0309.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer"><img src="../css/images/Mobile_bg0315.png"></div>        <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0310.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer"><img src="../css/images/Mobile_bg0315.png"></div>        <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0311.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer"><img src="../css/images/Mobile_bg0315.png"></div>        <a href="javascript:void(0)" class="ForFunItem"> <img src="../css/images/Mobile_bg0312.png"> </a> </div>      <div class="ForFun">        <div class="PopAnimateViewer"><img src="http://file.100xuexi.com/EbookMaterial/Animation/2016082456192636.gif"></div>        <a href="javascript:void(0)" class="ForFunItem"><img src="http://file.100xuexi.com/EbookMaterial/Animation/2016082483572367.png"> </a> </div>    </div>  </div>  <!--猎奇-->  <div class="TabListItem" style="display: none">    <div class="TabListItemForFun"> 猎奇 </div>  </div>  <!--电影Gif-->  <div class="TabListItem" style="display: none">    <div class="TabListItemForFun"> 电影Gif </div>  </div>  <!--流行-->  <div class="TabListItem" style="display: none">    <div class="TabListItemForFun"> 流行 </div>  </div>  <!-- 内涵-->  <div class="TabListItem" style="display: none">    <div class="TabListItemForFun"> 内涵 </div>  </div></div><!--心情--><div class="TabListItem" style="display: none">  <div class="TabListItemForFun"> 心情 </div></div><script>    /*初始化隐藏图片*/    var timeOutEvent=0;    $(function(){      /*var aa=$(".TabListItemForFun").find(".AddImg").length;        if(aa>0){            $(".TabListItem .ForFun").removeClass("AddImg");        }*/        $(".TabList li").click(function(){            $(".TabList li").eq($(this).index()).addClass("selected").siblings().removeClass('selected');            $(".TabListItem").hide().eq($(this).index()).show();        });        /*touch事件*/var timeout;        $(".ForFun").on({            touchstart: function(e){e.preventDefault();                //获取当前点击元素var $that = $(this);                var WindowWidth=$(window).width();                console.log(WindowWidth);                //获取自适应图片高度var ForFunHeight=$(this).children(".ForFunItem").height();                var ForFunWidth=$(this).children(".ForFunItem").width();                //获取当前元素的left，top值var ForFunLeft=$(this).children(".ForFunItem").offset().left;                var ForFunTop=$(this).children(".ForFunItem").offset().top;//点击元素的横坐标//点击元素的纵坐标/*$that.toggleClass("AddImg");*/                //上方超过则调整气泡位置 timeout = setTimeout(function(e) {if((ForFunTop<215)){$that.children(".PopAnimateViewer").css({top:ForFunHeight+16,display:"block"});                        $that.addClass("ForFunTop");}                    if((ForFunTop>215)){                        $that.addClass("ForFunBottom");                    }                    //右方超过则调整气泡位置                    if((ForFunLeft>WindowWidth-160)){                        $that.children(".PopAnimateViewer").css({                            right:0,                            display:"block"                        });                       /* $that.children(".PopAnimateViewer").addClass("ForFunRight");*/                    }                    if((ForFunLeft>WindowWidth-160)&&(ForFunTop<215)){                        $that.children(".PopAnimateViewer").css({                            right:0,                            display:"block"                        });                        $that.children(".PopAnimateViewer").addClass("PopAnimateViewerRightTop");                    }else{$that.children(".PopAnimateViewer").css("display","block");}}, 500)},            touchend: function(e){                clearTimeout(timeout);var $that = $(this);$that.children(".PopAnimateViewer").attr("style","");                $that.removeClass("ForFunTop");                $that.removeClass("ForFunBottom");            },})        })</script></body></html>

css

body{    margin:0px auto;    background:#efeff4;    position:relative;    display:block;    padding:44px 0px 64px 0px;    height: 100%;    color: #666666;}/* ͷ����ʽ */.Top .BtnInsert{    height:44px;    float:right;    padding-right:10px;    font-size:16px;    color:#228924;    line-height:44px;}.Top .BtnCancel{    height:44px;    line-height:44px;    float:left;    padding-left:10px;    background-size:12px 20px;    color:#d6d6d7;    font-size:16px;}.wxPictureAnimate{    width: 100%;}/*Tabѡ�*/.wxPictureAnimate .TabListContent{    height:40px;    top: 44px;    left: 0px;    overflow:auto;    overflow-y:hidden;    border-bottom:1px solid #d9d9d9;}.wxPictureAnimate .TabList{    height:40px;    background-color:#ffffff;    font-size: 16px;    line-height: 38px;    white-space: nowrap;}.wxPictureAnimate .TabList li{    height:38px;    background-color:#ffffff;    border-top: none;    border-right: none;    border-left: none;    display: inline-block;    margin-left: 16px;}.Liend img{    width: 21px;    height: 5px;    vertical-align: middle;}.Liend{    position: absolute;    top:45px;    right: 0px;    width: 32px;    height: 40px;    z-index: 500;}.wxPictureAnimate .TabList .selected{    border-bottom:2px solid #f43530;    border-right:none;    color: #f43530;}.wxPictureAnimate .TabList .selected a{    color: #f43530;}.wxPictureAnimate .TabList h3{    font-size: 16px;}/*ͼƬ����Ӧ*/.TabListItem .TabListItemForFun{    margin-top:0px;    background-color:#efeff4;    padding: 5px;    zoom: 1;}.TabListItem .ForFun{    position: relative;    width: 25%;    float: left;}.ForFunTop:after{    content:"";    display:block;    width:22px;    height:22px;    border-right:1px solid #d9d9d9;    border-bottom:1px solid #d9d9d9;    transform:rotate(-135deg);    -webkit-transform:rotate(-135deg);    background:#FFFFFF;    bottom:-19px;    position: absolute;    left: 40%;    z-index: 100;}.ForFunBottom:after{    content:"";    display:block;    width:22px;    height:22px;    border-right:1px solid #d9d9d9;    border-bottom:1px solid #d9d9d9;    transform:rotate(45deg);    -webkit-transform:rotate(45deg);    background:#FFFFFF;    top:-19px;    bottom: auto;    position: absolute;    left: 40%;    z-index: 100;}/*.TabListItem .AddImg:after{    content: " ";    width: 22px;    height: 22px;    position: absolute;    right: 10px;    top: 10px;    background:url("../images/Mobile_bg0158.png") right bottom no-repeat;    background-size: 22px 22px;    width: 100%;}*//*容器中放气泡*/.TabListItem .PopAnimateViewer{    position: absolute;    top: -170px;    width: 130px;height:130px;padding:15px;border:1px solid #d9d9d9;background:#ffffff;border-radius:4px;    z-index: 100;    display: none;}/*.TabListItemForFun .ForFunTop:after{    content:"";    display:block;    width:22px;    height:22px;    border-right:1px solid #d9d9d9;    border-bottom:1px solid #d9d9d9;    transform:rotate(-135deg);    -webkit-transform:rotate(-135deg);    background:#FFFFFF;    top:-15px;    bottom: auto;    position: absolute;    left: 40%;}*//*.TabListItem .TabListItemForFun .ForFunRight:after{    content:"";    display:block;    width:22px;    height:22px;    border-right:1px solid #d9d9d9;    border-bottom:1px solid #d9d9d9;    transform:rotate(-135deg);    -webkit-transform:rotate(-135deg);    background:#FFFFFF;    bottom:-15px;    position: absolute;    left: 40%;}*//*.TabListItem .PopAnimateViewer:after{content:"";display:block;width:22px;height:22px;border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;transform:rotate(45deg);-webkit-transform:rotate(45deg);background:#ffffff;bottom:-12px;    position: absolute;}.TabListItem .PopAnimateViewerTop:after{    content:"";    display:block;    width:22px;    height:22px;    border-right:1px solid #d9d9d9;    border-bottom:1px solid #d9d9d9;    transform:rotate(-135deg);    -webkit-transform:rotate(-135deg);    background:#FFFFFF;    top:-12px;    bottom: auto;    position: absolute;}*//*.TabListItem .PopAnimateViewerRight:after{    content:"";    display:block;    width:22px;    height:22px;    border-right:1px solid #d9d9d9;    border-bottom:1px solid #d9d9d9;    transform:rotate(-135deg);    -webkit-transform:rotate(-135deg);    background:#FFFFFF;    top:-12px;    bottom: auto;    position: absolute;    right: 35px;}*//*.TabListItem .PopAnimateViewerRightTop:after{    content:"";    display:block;    width:22px;    height:22px;    border-right:1px solid #d9d9d9;    border-bottom:1px solid #d9d9d9;    transform:rotate(-135deg);    -webkit-transform:rotate(-135deg);    background:red;    bottom:-12px;   /!* bottom: auto;*!/    position: absolute;    right: 12px;}*/.TabListItem .PopAnimateViewer img{    width: 130px;height:130px;}.TabListItem .ForFun .ForFunItem{    display: block;    background-color: #ffffff;    margin: 5px;    position: relative;}.TabListItem .ForFun .ForFunItem:before{    content: "";    display: block;    position: relative;    padding-top: 100%;}.TabListItem .ForFun .ForFunItem img{    position: absolute;    display: block;    width: 100%;    height: 100%;    left: 0px;    top: 0px;}

0 0