脚本宝典收集整理的这篇文章主要介绍了

自定义弹出层.css 和 .animate的区别

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <title>Document</title></p> <style> .message{ position: fixed; top: -50px; left: 50%; width: 100px; height: 50px; text-align: center; line-height: 50px; background-color: #00aaee; color: #fff; box-sizing: border-box; border-radius: 4px; }</p> </style> <p></head><br /> <body></p> <div class=&quot;message&quot;>hello</div> <p> <button id=&quot;btn&quot;>btn</button><br /> </body><br /> </html><br /> <script src=&quot;http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js&quot;></script><br /> <script> function fade(text){ $('.message').html(text);</p> <p> //.css无动画过渡效果 // $('.message').css({ // top: &quot;50px&quot;, // }) // setTimeout(() => { // $('.message').css({ // top: &quot;0&quot; // }) // },2000)</p> <p> // .animate有动画过渡效果 $('.message').animate({ top: &quot;50px&quot; }) setTimeout(() => { $('.message').animate({ top: &quot;-50px&quot; }) },2000) } $('#btn').click(() => { fade(&quot;hello&quot;) }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.message</span>{ <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">top</span>: -<span class="hljs-number">50px</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">line-height</span>: <span class="hljs-number">50px</span>; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#00aaee</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">box-sizing</span>: border-box; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"message"</span>&gt;</span>hello<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"btn"</span>&gt;</span>btn<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fade</span>(<span class="hljs-params">text</span>)</span>{ $(<span class="hljs-string">'.message'</span>).html(text); <span class="hljs-comment">//.css无动画过渡效果</span> <span class="hljs-comment">// $('.message').css({</span> <span class="hljs-comment">// top: "50px",</span> <span class="hljs-comment">// })</span> <span class="hljs-comment">// setTimeout(() =&gt; {</span> <span class="hljs-comment">// $('.message').css({</span> <span class="hljs-comment">// top: "0"</span> <span class="hljs-comment">// })</span> <span class="hljs-comment">// },2000)</span> <span class="hljs-comment">// .animate有动画过渡效果</span> $(<span class="hljs-string">'.message'</span>).animate({ <span class="hljs-attr">top</span>: <span class="hljs-string">"50px"</span> }) setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { $(<span class="hljs-string">'.message'</span>).animate({ <span class="hljs-attr">top</span>: <span class="hljs-string">"-50px"</span> }) },<span class="hljs-number">2000</span>) } $(<span class="hljs-string">'#btn'</span>).click(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { fade(<span class="hljs-string">"hello"</span>) }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

自定义弹出层.css 和 .animate的区别

全部内容,希望文章能够帮你解决

自定义弹出层.css 和 .animate的区别

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过