javascript - jQuery 动画，从一侧传入，传递和对象，然后从另一侧传出。直线-6ren

javascript - jQuery 动画，从一侧传入，传递和对象，然后从另一侧传出。直线

转载作者：行者123 更新时间：2023-11-28 06:41:59

我在学习 javaScript 和 jQuery 的第一周，我正在尝试制作一些动画。

基本上我想要做的就是让这些箭头从屏幕开始，从一侧进入，通过 throw 目标，然后离开屏幕的另一侧。

理想情况下，它会发射一个，当它大约穿过屏幕的 3/4 时，下一个会发射所有 8 支箭。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jQuery.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="jQuery.js" type"text/javaScript"></script>
</head>
<body>
    <button class="clickme">
        Click Me
    </button>
    <span class="uparrow">
    </span>
    <span class="uparrow2">
    </span>
    <span class="downarrow">
    </span>
    <span class="downarrow2">
    </span>
    <span class="leftarrow">
    </span>
    <span class="leftarrow2">
    </span>
    <span class="rightarrow">
    </span>
    <span class="rightarrow2">
    </span>
    <div class="target">
        <img src="http://simpleicon.com/wp-content/uploads/target1.svg" alt="">
    </div>
    <div class="target2">
        <img src="http://simpleicon.com/wp-content/uploads/target1.svg" alt="">
    </div>
</body> 
</html>

CSS ----------所有箭头当前都放置在目标位置并隐藏。

.uparrow {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    top: 23%;
    left: 23%;
    position: absolute;
    display: none;
}
.uparrow2 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    top: 63%;
    left: 63%;
    position: absolute;
    display: none;
}
.downarrow {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    top: 23%;
    left: 23%;
    position: absolute;
    display: none;
}
.downarrow2 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    top: 63%;
    left: 63%;
    position: absolute;
    display: none;
}
.left arrow {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 65%;
    left: 63%;
    position: absolute;
    display: none;
}
.leftarrow2 {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 25%;
    left: 23%;
    position: absolute;
    display: none;
}
.rightarrow {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 25%;
    left: 23%;
    position: absolute;
    display: none;
}
.rightarrow2 {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    top: 65%;
    left: 63%;
    position: absolute;
    display: none;
}
.target {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: absolute;
    top: 60%;
    left: 60%;
}
.target2 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 20%;
    left: 20%;
}

img {
    width: 100%;
    height: 100%;
}

jQuery ---- 我已经尝试了一些东西，但我很茫然，基本上希望它在单击按钮时触发。我很困惑最初是我的 CSS 位置还是其他原因。

$(document).ready( function(){

$(".clickme").click( function() {

//end click function    
});
//end document
});

我该怎么做，只是直线，通过 throw 目标。

最佳答案

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type"text/javaScript"></script>
<style type="text/css">
.uparrow { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; top: 23%; left: 23%; position: absolute; display: none; } .uparrow2 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; top: 63%; left: 63%; position: absolute; display: none; } .downarrow { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; top: 23%; left: 23%; position: absolute; display: none; } .downarrow2 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; top: 63%; left: 63%; position: absolute; display: none; } .left arrow { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; top: 65%; left: 63%; position: absolute; display: none; } .leftarrow2 { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; top: 25%; left: 23%; position: absolute; display: none; } .rightarrow { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; top: 25%; left: 23%; position: absolute; display: none; } .rightarrow2 { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; top: 65%; left: 63%; position: absolute; display: none; } .target { width: 200px; height: 200px; margin: 0 auto; position: absolute; top: 60%; left: 60%; } .target2 { width: 200px; height: 200px; position: absolute; top: 20%; left: 20%; }
</style>
</head>
<body>
    <button class="clickme">
        Click Me
    </button>
    <span class="uparrow">
    </span>
    <span class="uparrow2">
    </span>
    <span class="downarrow">
    </span>
    <span class="downarrow2">
    </span>
    <span class="leftarrow">
    </span>
    <span class="leftarrow2">
    </span>
    <span class="rightarrow">
    </span>
    <span class="rightarrow2">
    </span>
    <div class="target">
        me
    </div>
    <div class="target2">
        me
    </div>
<script type="text/JavaScript">
$(document).ready( function(){

$(".clickme").click( function() {

//end click function    
});
//end document
});
</script>
</body> 
</html>

关于javascript - jQuery 动画，从一侧传入，传递和对象，然后从另一侧传出。直线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34234919/

文章推荐： html - 在表格的列中拟合图像

文章推荐：修改后忽略的 CSS 文件

文章推荐： ios - Realm .io : Are write/read operations executed on the main thread?

文章推荐： c++ - 如何将我自己的排序算法与其他排序算法进行比较？

前端使用Konva实现可视化设计器（12）-连接线-直线
这一章实现的连接线，目前仅支持直线连接，为了能够不影响原有的其它功能，尝试了2、3个实现思路，最终实测这个实现方式目前来说最为合适了。请大家动动小手，给我一个免费的 Star 吧~ 大家
前端使用Konva实现可视化设计器（22）-绘制图形（矩形、直线、折线）
本章分享一下如何使用 Konva 绘制基础图形：矩形、直线、折线，希望大家继续关注和支持哈！请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Issue
前端使用Konva实现可视化设计器（19）-连接线-直线、折线
本章响应小伙伴的反馈，除了算法自动画连接线（仍需优化完善），实现了可以手动绘制直线、折线连接线功能。请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Is
collision-detection - 直线-矩形碰撞检测
我有一条线(两点(x，y)(x1，y1))和一个带有焦点(rx，ry)的矩形。我需要帮助找出线和矩形之间的碰撞点，C++ 中的一个例子会有所帮助。最佳答案我不知道如何仅用“焦点”来表示矩形。您将需
python - TkInter:直线/椭圆的像素数
让我们画一条线和一个圆: canvas.create_line(x0,y0,x1,y1) canvas.create_oval(x0,y0,x1,y1) 如何计算每个像素的像素数？最佳答案你不能。
php使用gd2绘制基本图形示例(直线、圆、正方形)
本文实例讲述了php使用gd2绘制基本图形。分享给大家供大家参考，具体如下：应用GD2函数可以绘制的图形有多种，最基本的图形包括条、圆、方形等。无论开发人员绘制多么复杂的图形，都是在这些最基本的
vim - 如何更改 Vim(直线)下划线的颜色？
我已经尝试了所有改变颜色的方法: call s:h("Underlined", {"fg": s:norm, "gui": "underline", "cterm": "underline"})
javascript - 直线 : Why does this yield undefined is not a function?
为什么以下行有时会在 chrome 开发控制台中产生消息“未定义不是函数”: (callbackOrUndefined || function() {})(); 这个想法是，如果回调为真，即函数，则执
c# - 直线(分段拟合)图表是什么意思？如何在MS图表中实现？
我想在 MS Chart 中实现直线(分段拟合)图表。我知道 X 轴上的点 [最小值 = 1.4，最大值 = 2.2]。我已将所有这些点都放在折线图上。现在的要求是我如何知道 X 轴上的点 [最小
javascript - charts.js 直线 - 我找不到解决方案
所以我正在使用 charts.js http://www.chartjs.org/我试图使 2 个点之间的线是直线而不是弯曲的，没有明显的原因。现在看起来是这样的 http://imgur.com/
javascript - 直线 API Microsoft Bot 框架
我已将我的机器人发布到 Azure。现在我要开发自己的聊天用户界面。我想在 JavaScript 中使用 Direct Line API 来调用机器人。如何在 JavaScript 中使用 Dire
python - 找到数字列表的 'shape'(直线/凹/凸，有多少个驼峰)
这个有点难解释。我有一个整数列表。因此，例如，[1, 2, 4, 5, 8, 7, 6, 4, 1] - 当根据元素编号绘制时，它类似于凸图。我如何以某种方式从列表中提取此“形状”特征？它不必特别准确
javascript - jQuery 动画，从一侧传入，传递和对象，然后从另一侧传出。直线
我在学习 javaScript 和 jQuery 的第一周，我正在尝试制作一些动画。基本上我想要做的就是让这些箭头从屏幕开始，从一侧进入，通过 throw 目标，然后离开屏幕的另一侧。理想情况下，
AngularJS:动画对象从 DIV A 到 DIV B 直线
假设我有一个向导并且有 3 个部分，假设它是这样的。 [A]----[B]----[C] 假设当前在范围内选择了 A。这是一个彩色的红色圆圈。当 B 在范围内被选中时，就可以移动一个对象(假设一条彩色
node.js - 直线 API : Define a new ChannelId
我正在使用 botframework-directlinejs NodeJS SDK 为我的机器人前端实现一个新 channel 。该 channel 将提供一些自定义反向 channel 功能；但是
apache-spark - 在 Yarn 上运行 Spark 直线
我正在使用直线执行 hql 查询。该作业似乎没有出现在 HDP 2.6 上 Spark History 服务器的资源管理器中。如何让它运行在 Yarn 上？谢谢最佳答案 Beeline 是一个 A
google-maps - Google Maps Api 直线(最短)路线
我目前正在尝试找到一种如何使用 Google Maps Api V3 获得直线路线的方法。我已经设法使用地理编码和方向服务来获取从 A 点到 B 点的路线，包括两条替代路线。我还尝试过“无高速公路”
javascript - 如何使所有绘制的(矩形、圆形、直线、多边形)可拖动？纯JS
我有一个简单的 Canvas html5。它可以通过选择选项绘制一些形状，如直线、圆形、矩形、多边形，但现在我想让所有绘制都可拖动(如果可能的话)可调整大小，没有 3 部分库，只有纯 JS。
hadoop - hive ，直线 : Peer indicated failure: GSS initiate failed
我正在使用在 Kerberos 中添加的帐户启动 beeline 来测试 Sentry: beeline -u "jdbc:hive2://IP:10000/;principal=test_table
javascript - Canvas 直线 ctx.lineTo 的轨迹(y Angular )和(x 到所需长度)
我正在使用普通的 html/javascript Canvas (无库)。我有一种从两点计算 Angular 方法，我的理论是，我获取 Angular 并通过循环所需的水平距离 (x) 并对该 Ang

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery 动画，从一侧传入，传递和对象，然后从另一侧传出。直线