animate

最新推荐文章于 2023-11-04 08:35:27 发布
最新推荐文章于 2023-11-04 08:35:27 发布
阅读量1.5k 收藏
点赞数
分类专栏： HTML5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivianluolita/article/details/53088666
版权

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


Vivianluolita
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html的首选参数设置,设置 Animate 中的首选参数
weixin_31128065的博客
07-04 994
您可以为常规的应用程序操作设置首选参数，包括编辑操作、代码和编译器操作、同步设置、绘制选项及文本选项。“首选参数”对话框中的“常规”类别。设置首选参数选择“编辑”>“首选参数”(Windows) 或“Animate”>“首选参数”(Macintosh)。在“类别”列表中选择一个类别并从各个选项中进行选择。设置常规首选参数启动时指定在启动应用程序时打开的文档。文档或对象层级撤消文档级撤消...
Vue+ES6全家桶入门基础与项目实战+赠送仿京东电商网站 2021新
01-01
本课程讲了Vue3+Vue2入门基础与实战，其中还重点讲解了ES6、TypeScript这些基础知识，实战是价值5000元的真实企业级项目---仿京东电商网站，同时项目代码全部赠送，还赠送前后端架构模板，工作中直接使用。 VUE是目前热门的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说，那么这门课程便是你手中的葵花宝典。学习技巧：学习当中不要只看，一定要多敲代码，如果碰到某一个知识点不是很明白，不要钻牛角尖，千万不要因为一个点，放弃整个森林，接着往下学，硬着头皮开发项目只要能亲自开发一个完整的项目，你会发现不明白的地方自然而然就明白了，项目做出来就真正的学会了。此vue课程以面试和实战为基础进行讲解，每个知识点都会让你知道在实际项目开发中如何使用，学习后，可以开发大型项目，增强逻辑思维，至少让你拥有3年以上开发经验的实力！代码和ppt均可下载！免费提供《企业级完整实战项目接口文档》，绝对可用。  
Animate2023安装教程（非常详细）从零基础入门到精通，看完这一篇就够了【附安装包】
Javachichi的博客
11-04 2927
内容概要：包括 内网、操作系统、协议、渗透测试、安服、漏洞、注入、XSS、CSRF、SSRF、文件上传、文件下载、文件包含、XXE、逻辑漏洞、工具、SQLmap、NMAP、BP、MSF…技术文档也是我自己整理的，包括我参加大型网安行动、CTF和挖SRC漏洞的经验和技术要点，电子书也有200多本，由于内容的敏感性，我就不一一展示了。网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
Animate动画
前后端分离，人不分离！
09-28 3503
一个有趣的，跨浏览器的 css3 动画库。
animate动画库的使用步骤
努力、拼搏、奋进
05-19 9704
animate动画库的使用步骤，简单易理解。
html animate可以制作动画
u014615166的博客
09-30 2967
$(document).ready(function()   {   $(".btn1").click(function(){     $("#box").animate({height:"2px",width:"5px"});   });   $(".btn2").click(function(){     $("#box").animate({height:"100px"});
antv g6 animate
12-18
《AntV G6 Animate：探索图形动画的魅力》 在数据可视化领域，AntV G6 是一款备受赞誉的图可视化库，它提供了丰富的图形绘制能力，帮助开发者将复杂的数据关系以直观的方式呈现出来。而“AntV G6 Animate”正是这个...
animate(CSS动画库)
07-15
Animate.css 是一个强大的开源CSS动画库，它提供了一系列预先定义好的动画效果，使得开发者无需从零开始编写复杂的CSS代码，就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计，提升用户体验，吸引用户...
animate.css-4.1.1.zip
02-03
Animate.css是一个流行的开源库，专为网页设计师和开发者提供了一系列预先定义好的动画效果。这个"animate.css-4.1.1.zip"压缩包包含了Animate.css的4.1.1版本，这是一个更新到最新状态的库，确保了你能够获得最新的...
animate动画脚本
07-10
Animate动画脚本是一种广泛应用于网页和应用程序中的技术，用于创建流畅、交互式的视觉效果。它在Web开发领域中扮演着重要角色，使得开发者能够轻松地为网站增添动态元素，提高用户体验。Animate通常与CSS（层叠样式...
animate.zip
01-12
Animate是Adobe公司推出的一款强大的动画制作软件，常用于创建2D和3D动画、互动内容以及丰富的网络图形。"animate.zip"可能是一个包含Animate相关资源、教程或项目的压缩包文件，便于用户下载和学习。 Animate的...
HTML中对于 animation（动画）属性的使用方法
m0_64401301的博客
12-16 5206
这篇文章主要分享了以举例的形式来分享CSS3中的animation属性的用法
css3大绝技之animation动画
wj624的博客
04-27 9799
✨✨✨css3大绝技之animation动画 动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 制作动画分为两步: 1．先定义动画 2．再使用(调用)动画 ✨✨🎈 动画的基本使用 ✨🎈🎈 用keyframes定义动画（类似定义类选择器） 语法格式： @keyformes 动画名称 { 0% { width:100px; } 100% { width:200px;
html animate自动,animate.html
weixin_42505576的博客
05-30 293
动画body{overflow:hidden;}*{font-size:14px;}input{font-size:12px;width:100%;border:1px solid #ccc;line-height:25px;color:#666;}p{line-height:25px;color:#333;}.tip{width:50px;height:50px;background:#6CF;...
es6的一些小技巧
久如云漂泊
05-28 611
1.快速去除数组中重复元素 集合（Set）对象允许你存储任意类型的唯一值（不能重复），无论它是原始值或者是对象引用。 const uniqueArray = arr =&amp;amp;gt; [...new Set(arr)] uniqueArray([1, 2, 2, 3, 4, 4, 5]) //--------------------原理是 Set 对象允许你存储任何类型的唯一值，本质上起到了去重的...
ES6封装形变类，完成连续动画
A-Select °
03-29 142
``` index <script> //形变类 class Transform{ constructor(selector){ this.el=document.querySelector(selector); this.defaultTime=Transf...
jQuery 效果 - animate() 方法
zengyonglan的博客
12-12 665
原文链接 实例 改变 “div” 元素的高度：$(".btn1").click(function(){ $("#box").animate({height:"300px"}); }); 定义和用法 animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 只有数字值可创建动画（比
利用animate.css和es6制作文字向上滚动的效果
weixin_30500289的博客
01-12 227
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="animate.css" /> <title></title> <...
js animate
最新发布
04-26
JS animate是一个用于在网页中创建动画效果的JavaScript库。它提供了一组简单易用的函数和方法，可以通过改变HTML元素的样式属性来实现动画效果。使用animate库，你可以创建平滑的过渡效果、淡入淡出效果、移动元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值