Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何为我的图像提供单击事件/动画_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript 如何为我的图像提供单击事件/动画

Javascript 如何为我的图像提供单击事件/动画,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此,我希望我的一幅图像在单击时,能够使#app1朝两边移动,然后淡出 我知道我的图像应该有一个“点击”属性,我已经这样做了。我有一个将被调用的滑动函数。在我的swipe函数中,javascript/jquery应该在这里执行动画 但它不起作用,我做错什么了吗?请帮忙 谢谢 <!DOCTYPE html> <!-- this is comment --> <html> <head> <title>Forget Me Not</

因此,我希望我的一幅图像在单击时,能够使
#app1
朝两边移动,然后淡出

我知道我的图像应该有一个“点击”属性,我已经这样做了。我有一个将被调用的滑动函数。在我的swipe函数中,javascript/jquery应该在这里执行动画

但它不起作用,我做错什么了吗?请帮忙

谢谢

<!DOCTYPE html>
<!-- this is comment -->
<html>

<head>

<title>Forget Me Not</title>

<style>

body
{
background-color:#66d9ff;
}

#app1{
position:absolute;
width:250px;
height:250px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}

img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

</style>

<script src="jquery-1.9.1.js"></script>

<script>
function Swipe()
{
  $(document).ready(function()
  { 
    $(".appIMG1").click(function()
    {
      $("app1").animate({left:'250px'});
    });
  });
}

</script>

</head>

<body>
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% onclick="Swipe()">
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>


</body>

</html>

别忘了我
身体
{
背景色:#66d9ff;
}
#附件1{
位置:绝对位置;
宽度:250px;
高度:250px;
z指数:0;
最高:50%;
左:50%;
利润率:-150px 0-150px;
背景:白色;
盒影:0 0 1px 1px#8888888;
文本对齐:居中
}
img.appIMG1{
-网络工具包盒阴影:0 0 1px 1px#8888888;
盒影:0 0 1px 1px#8888888;
}
img.appIMG2{
-网络工具包盒阴影:0 0 1px 1px#8888888;
盒影:0 0 1px 1px#8888888;
}
函数滑动()
{
$(文档).ready(函数()
{ 
$(“.appIMG1”)。单击(函数()
{
$(“app1”).animate({左:'250px'});
});
});
}
你想提醒一下吗


您错过了
#

演示
-->

  • 您不需要在图像上单击属性(因为您已经这样做了) 使用jQuery绑定单击处理程序)
您所需要的只是(从
img
中删除onClick属性)

您错过了
#

演示
-->

  • 您不需要在图像上单击属性(因为您已经这样做了) 使用jQuery绑定单击处理程序)
您所需要的只是(从
img
中删除onClick属性)


由于您使用的是onclick属性,因此可以在脚本标记中执行以下操作之一(不使用onclick属性):

$(document).ready(function()
{ 
    $(".appIMG1").click(function()
    {
      $("#app1").animate({left:'250px'});
    });
});
或者这个(带有onclick属性)


不要忘记app1选择器的“#”。

因为您使用的是onclick属性,所以可以在脚本标记中执行以下操作之一(不使用onclick属性):

$(document).ready(function()
{ 
    $(".appIMG1").click(function()
    {
      $("#app1").animate({left:'250px'});
    });
});
或者这个(带有onclick属性)

不要忘记app1选择器的“#”。

动画中缺少了“#”

此外,如果使用jQuery事件,则不需要将onClick附加到IMG。我也清理了一下你的JS

我根据您的代码创建了一个简单的示例,说明您希望实现的目标

你错过了动画中的#

此外,如果使用jQuery事件,则不需要将onClick附加到IMG。我也清理了一下你的JS

我根据您的代码创建了一个简单的示例,说明您希望实现的目标



如果您使用的是jQuery,那么使用“onclick”属性并不是解决问题的方法。请删除
onclick
属性以及
$(文档)周围的函数定义。准备好了吗
onclick函数中的click函数听起来不是个好主意。如果您使用jQuery,那么,使用“onclick”属性并不是解决问题的方法。请删除
onclick
属性和
$(文档)周围的函数定义。准备好了吗
onclick函数中的单击函数听起来不是一个好主意。但这并没有什么帮助,因为点击就可以设置功能了…谢谢你的回答,这是我的第一篇帖子。但由于某些原因,它仍然不起作用……这个例子正是我要寻找的。但由于某种原因,它仍然不起作用。我不认为你的例子和代码有什么问题,所以我不明白为什么它仍然不起作用好像你还没有对我在回答中建议的代码进行修改。。查看此小提琴
-->
。。在你的代码中进行更改,就像你在小提琴上看到的那样。不,我在我的代码中进行了更改。我甚至把代码复制粘贴在小提琴上。当我点击那张图片的时候仍然不起作用…这并不是真的有帮助,尽管如此,因为点击只会设置功能…谢谢你的回答,这是我的第一篇帖子。但由于某些原因,它仍然不起作用……这个例子正是我要寻找的。但由于某种原因,它仍然不起作用。我不认为你的例子和代码有什么问题,所以我不明白为什么它仍然不起作用好像你还没有对我在回答中建议的代码进行修改。。查看此小提琴
-->
。。在你的代码中进行更改,就像你在小提琴上看到的那样。不,我在我的代码中进行了更改。我甚至把代码复制粘贴在小提琴上。当我单击该图像时仍不工作…示例按所需工作,但是当我通过浏览器运行代码时,它仍不工作。示例按所需工作,但是当我通过浏览器运行代码时,它仍不工作。
$(document).ready(function()
{ 
    $(".appIMG1").click(function()
    {
      $("#app1").animate({left:'250px'});
    });
});
function Swipe()
{
   $("#app1").animate({left:'250px'});
}
$(".appIMG1").click(function()
{ 
    $("#app1").animate({left:'250px'});
});