登录
当前位置： 首页 > 工具软件 > 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;
}


 类似资料：

相关阅读

animateWithDuration：animations：completion：在Swift中名为“ animate”的JS函数在Chrome中不起作用，但在IE中起作用基于jquery animate操作css样式属性小结原生js仿jquery animate动画效果深入理解jquery自定义动画animate()

相关文章

相关问答

animateLayoutChanges不适合嵌套布局？视图会立即跳转和闪烁，尽管AnimateLayoutChange="true"Android animateCamera GoogleMap.cancelableCallback使用情况
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.