动画

简单的动画（梦幻西游）

由 ∥☆過路亽．° 提交于 2020-02-05 04:16:20
突然想起来前一段时间老师讲的动画特效，于是尝试自己写下 HTML层： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梦幻西游</title> <style> *{ margin:0; padding:0; } body{ background: url("img/bj.jpg")no-repeat; } .box{ width:1000px; height:500px; margin:50px auto; position: relative; } /*.box .queen{ width:120px; height:180px; background: url("img/queen.png"); background-size: 100%; position: absolute; right:20px; top:50px; z-index: 99; cursor: pointer; }*/ .box .xiyouji{ width:100%; height:100%; position: absolute; left:0; top:0; padding-top:260px; box-sizing: border-box; } .box .xiyouji .div{ float: left

31 jQuery——元素进出场动画效果

由 戏子无情 提交于 2020-02-04 16:02:07
效果先看 主要函数 show(fast,slow,normal,毫秒数):将元素切换为可见的 hide(fast,slow,normal,毫秒数)：将元素切换为不可见的 toggle(fast,slow,normal,毫秒数):如果元素是隐藏的，切换为可见的，反之，如果元素是可见的。。。 slideDown(fast,slow,normal,毫秒数)：元素下滑显示 fadeIn(fast,slow,normal,毫秒数) :淡入 fadeOut(fast,slow,normal,毫秒数) :淡出 测试代码 <!DOCTYPE html> <html> <head> <!-- show(fast,slow,normal,毫秒数):将元素切换为可见的 hide(fast,slow,normal,毫秒数)：将元素切换为不可见的 toggle(fast,slow,normal,毫秒数):如果元素是隐藏的，切换为可见的，反之，如果元素是可见的。。。 slideDown(fast,slow,normal,毫秒数)：元素下滑显示 fadeIn(fast,slow,normal,毫秒数) :淡入 fadeOut(fast,slow,normal,毫秒数) :淡出 --> <meta charset="utf-8"> <title>jQuery动画效果</title> <script src="js

JavaScript强化教程——jQuery Callback 函数

由 半世苍凉 提交于 2020-02-04 08:21:03
本文为 H5EDU 机构官方 HTML5培训 HTML5培训 教程，主要介绍： JavaScript强化教程 —— jQuery Callback 函数 Callback 函数在当前动画 100% 完成之后执行。 jQuery 动画的问题 许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。 例子：$("p").hide("slow") speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。实例 [size=14]$("button").click(function(){ $("p").hide(1000); }); [/size] 由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。 为了避免这个情况，您可以以参数的形式添加 Callback 函数。 jQuery Callback 函数 当动画 100% 完成后，即调用 Callback 函数。典型的语法： [size=14]$(selector).hide(speed,callback)[/size] callback 参数是一个在 hide 操作完成后被执行的函数。错误（没有 callback） [size=14]$("p")

HarryPotter阅读网站编写记录

由 为君一笑 提交于 2020-02-04 02:47:34
文章目录 简介 动机 功能实现 翻译 翻页动画 其它 总结 简介 一个阅读英文版哈利波特的小网站 reader ，源码放到 GitHub 上了，感兴趣的可以看看。打开书籍后双击单词能够显示释义(如果有的话)，如下图。推荐使用chromium-edge阅读，翻页动画更舒服。 动机 大概是一两年前吧，因为想看看哈利波特英文原版，就在网上找了epub格式的电子书来看。当时用win10的edge浏览器看epub还是非常舒服的，不过因为自带的翻译是英英互译的，所以就想要是能变成中文的就好了。搜罗了一些方法之后发现无果，就放弃了。后来2019下半年的时候，edge不支持看epub电子书了，很无奈，不过也更加坚定了做一个英文阅读网站的目标了。然后就有了 reader 这个项目。 功能实现 翻译 核心功能就是 选中单词后显示单词翻译 。因为有道、谷歌等的翻译API不是免费的，所以在GitHub上找了个 词库 ，把词库导入导入到了数据库中用，但翻译的效果差强人意，还算凑合。另外，最初是打算做成 鼠标悬浮显示翻译 ，搜索了一番发现只能通过 将每个单词用标签包裹，设置标签的mousehover事件 实现，但是这样的话，如果内容很多就会就会卡顿，体验极差。当然进一步的考虑就是 每次只加载一页内容，按需加载 ， 使用动画实现翻页 等，摸索了一番，发现只会使网页更加复杂，难于实现。于是就改为了

PPT——疑难杂症解决技巧

由 大憨熊 提交于 2020-02-04 00:33:27
一、PPT开启变慢怎么办？ 原因1：插件太多 解决办法：找到 文件→选项→加载项→转到，将不常用的插件禁用即可，用的时候再勾选上； 好用的插件推荐 动画相关：PA口袋动画 图片处理功能：Onekey 提高制作效率、美化界面：islide 来源： CSDN 作者： weixin_41949487 链接： https://blog.csdn.net/weixin_41949487/article/details/104157852

CSS动画、JS动画区别

由 China☆狼群 提交于 2020-02-03 12:20:30
区别： JS动画 CSS动画 优点 1、控制能力强，可以实现开始，暂停，终止等行为 2、可实现的动画效果丰富 3、无兼容性问题 1、性能较好，浏览器会对CSS动画做一些优化 2、代码相对简单 缺点 1、JS在浏览器的主线程中运行，线程可能会出现阻塞状态，导致丢帧 2、代码复杂度高 1、在动画的控制上不够灵活（不能添加事件绑定回调函数） 2、只能实现简单动画，不能实现复杂逻辑的动画 3、代码冗长 4、兼容性不好 结论 若只是实现简单的状态切换，或交互效果，不需要中间过程控制，首选CSS动画 若实现复杂控制动画，选择JS动画更好 参考： https://www.cnblogs.com/shuaishuaidejun/p/7444711.html 来源： CSDN 作者： 君- 链接： https://blog.csdn.net/weixin_39307273/article/details/104150686

《命运石之门：精英》游戏通关流程

由 萝らか妹 提交于 2020-02-03 11:20:22
《命运石之门：精英》在18年9月登录NS平台，其中文版19年3月发售。石头门精英版算是原版的重制，使用动画替代人物立绘，其剧情沿袭原版。动画制作由石头门动画版制作公司WhiteFox承担。 日文流程图 助手线达成条件 助手发来的短信必须作出如下回复： 第四章 　　(显像管店门前) 　　收信: 报告写了吗？ 　　回复: 疯狂科学家 　　收信: bad scientist（疯狂科学家） 　　回复: 老掉牙冷笑话 　　(菲利斯家) 　　收信: Home Alone 　　回复: 外人 　　收信: 咦咦咦 　　回复: 屈辱 　　收信: 盯着自己的手 　　回复: 为什么我会在这种地方 　　(离开菲利斯家) 　　收信: 我在这里 　　达成以上条件即可在第十章进入助手结局 真结局达成条件 满足第四章回复条件后，助手发来的短信必须作出如下回复： 第五章 　　(秋叶原采购) 　　收信: 预定 　　回复: 路费 　　收信: **！ 　　回复: (´·ω·` ) 第七章 　　收信: 钥匙（？Д \） 　　回复: 没有钥匙 　　(秋叶原站前) 　　收信：( ?д ?) 　　回复: 保卫工作 　　(穿越回来见菲利斯) 　　收信：是妄想吧我懂的 　　回复关键词：现实 　　(雷Net比赛现场) 　　收信：现实 第八章 　　(秋叶原) 　　收信：给我先证明后说明! 　　回复关键词：怎么一回事 　　(神社) 　　收信

Unity骨骼动画的总结

由 人走茶凉 提交于 2020-02-02 05:22:32
欢迎参与讨论，转载请注明出处。 前言 恰逢疫情，在家继续推进Demo，骨骼动画相关的调研算是告一段落了，遂以本文记录相关要点。 　　首先要明确一点，本文所说的骨骼动画皆是3D模型的骨骼动画，与2D精灵的骨骼动画无关，虽然原理大致相通。 网格、骨骼、绑定 了解过3D相关知识的都知道，模型(Model)是由一个个三角形组成的，而这种三角形的学名则是网格(Mesh)。当然在DCC软件里为了方便创作，会用2个三角形组成四边形作为网格： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38QKdoa9-1580552699378)(https://musoucrow.github.io/images/animation_guide/0.png)] 　　然后便是骨骼(Skeleton)了，它是驱动模型运动的根本，如下图所示，这是一种彼此之间有父子关系连接在一起的长条状玩意： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uqyVrkvM-1580552699379)(https://musoucrow.github.io/images/animation_guide/1.png)] 　　最后便是让模型跟着骨骼一起运动了，这个骨肉融合的过程称为 绑定 ，具体要做的事便是将某节骨骼与相关的网格建立关系： [外链图片转存失败

用jQuery防止多次点击动画重复

由 给你一囗甜甜゛ 提交于 2020-02-01 20:17:40
用jQuery防止多次点击动画重复 1、在你的点击事件中加上一个判断，假设产生动画效果目标的是#aa这个节点，那么你要加上这个判断 if(!$("#aa").is(":animated")){ //执行你的操作 } 他会确保你的动画只会在上一个动画结束后才能产生 ，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉 2、$("#aa").stop(true,false).animate({...},1000); 这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速 说到这里我们解释下stop（）这个函数的用法。 stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。 stop在新版jQuery中添加了2个参数： 第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果； 第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候 3、第三种方法应用就需要设置一个判断是否处于动画的标志，一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。

jQuery 动画

由 久未见 提交于 2020-02-01 15:06:47
1 基本效果 hide() 隐藏 show() 显示 toggle() 隐藏显示来回切换 基本效果的CSS属性变化：透明度变化，元素大小相关的样式（padding，border，width/height），外边距（margin） 2 滑动效果 slideDown() 显示 slideUp() 隐藏 slideToggle() 切换 垂直方向上的变化 height / padding-top / margin-top 3 淡入淡出效果 fadeIn() fadeOut() fadeToggle() fadeTo() 透明度的变化（渐变） 4 自定义动画 animate({}, speed, fn) 自定义动画 stop() 使动画停止 finish() 使动画完成 delay() 延迟动画的执行 5 动画设置 jQuery.fx.off 动画开关 jQuery.fx.interval jQuery动画的帧数 1-5 demo <!doctype html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > jQuery 动画 </ title > < style > #box,#box1 { padding : 20px ; width : 400px ; height : 300px ;
订阅 动画