gpt4 book ai didi

javascript - 将 zurb motion-ui 集成到一个简单的 html、css javascript 元素中

转载 作者:行者123 更新时间:2023-11-28 06:57:02 26 4
gpt4 key购买 nike

如何整合 zurb motion-ui在一个简单的 html、css javascript 元素中。我希望使用动画,但来自 documentation没有关于如何将其包含在一个简单元素中的明确指示

最佳答案

如果您不熟悉 SASS、NPM/Bower,您可以从官方页面下载 Motion UI Starter Kit http://zurb.com/playground/motion-ui这真的很容易理解。

super 简单的示例可能如下所示:

  1. 包含 CSS motion-ui.min.css
  2. 包含 JS motion-ui.min.js
  3. onclick 动画写一些简单的javascript

它有什么作用?

当你点击链接(.js-button)图片(.js-image)时会做旋转动画(spin-in >)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="motion-ui.min.css" />
<title>Motion UI Super Simple Example</title>
</head>
<body>

<a href="#" class="js-button">Click to animate!</a>
<br /><br />
<img src="http://satyr.io/200" class="js-image" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="motion-ui.min.js"></script>

<script>
var element = $('.js-image');
var button = $('.js-button');

button.click(function() {
MotionUI.animateIn(element, 'spin-in');
});
</script>
</body>
</html>

关于javascript - 将 zurb motion-ui 集成到一个简单的 html、css javascript 元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33453480/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com