当前位置: 首页 > 工具软件 > AutoAnimate > 使用案例 >

animate

席波娃
2023-12-01

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;
}




 类似资料: