javacript 点击图片移动

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量623 收藏
点赞数
文章标签： layer javascript function button input div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengxin800/article/details/2045569
版权

<script language="javascript">

function move()
{
xa=window.event.clientX;
ya=window.event.clientY;
xb=Layer1.style.pixelLeft;
yb=Layer1.style.pixelTop;
x=xb;
if(xb<xa)
{
movelayer();
}
else
{
movelayer1();
}
}
function movelayer1()
{
if(x>=xa)
{
y=((ya-yb)*(x-xb))/(xa-xb)+yb;
Layer1.style.pixelLeft=x;
Layer1.style.pixelTop=y;
x--;
setTimeout('movelayer1()',100);
}
}
function movelayer()
{
if(x<=xa)
{
y=((ya-yb)*(x-xb))/(xa-xb)+yb;
Layer1.style.pixelLeft=x;
Layer1.style.pixelTop=y;
x++;
setTimeout('movelayer()',100);
}
}
</script>
<body οnclick="move()">
<div id="Layer1" style="position:absolute; width:67px; height:41px; z-index:1; left: 360px; top:

230px">
<input name=i type=button οnclick="javascript:location.href='mailto:wwwarden@yeah.net';"

value="wwwarden@yeah.net"></div>
</body>
 

chengxin800
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 实现图片自动移动
smjavaee的博客
04-17 3054
function dianwo() { var obj = document.getElementById('mydiv'); var x = obj.offsetLeft var y = obj.offsetTop; x += 10; y += 10;
拼图游戏java（三）实现鼠标点击图片上下左右移动
sinat_39302317的博客
03-02 1911
思路： 1.使类实现MouseLisner接口，创建未重写的方法，主要重写MousePressed方法 2.在按钮上添加鼠标监听 3.在方法中实现业务逻辑 1 public class GamePanel extends JPanel implements MouseListener 还需继承JPanel类 2. for(int i = 0;i&lt;btns.leng...
Java实现图片随鼠标拖动
热门推荐
仰起脸笑得像满月
10-14 1万+
面向对象的实验要实现用鼠标拖动一张纸牌图片。经过相关查询可知要为图片注册事件MouseListener和MouseMotionListener中的mousePressed方法和mouseDragged方法。这里的MyMouseInputAdapter继承了MouseInputAdapter类。对其中的相关的两个方法进行了重写。 import java.awt.*; import java.
java图片移动（键盘控制）
wuxinliulei的专栏
07-17 7652
package Anime; import java.awt.Frame; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.awt.event
JavaScript图片跟随鼠标移动
yuguofenglin的博客
05-08 799
把小电视图片img标签里面。 因为这关于js移动所以要给img设置一个定位。 这里我们没有给img标签设置到id，用一个新方法querySelector获取指定标签。 下面就是给img绑定鼠标移动事件，声明和获取到水平坐标和垂直坐标的属性。 、 然后再调用到img标签改变相对位置（X是left水平方向）（Y是top垂直方向）就好了。 以下是效果图。 ...
利用JavaScript使图片跟随鼠标移动
余月初贰的博客
07-02 1766
JavaScript图片跟随鼠标移动
JavaScript图片动态移动及文字浮现
qq_36470686的博客
09-22 2790
先说我们这个小动画想要达到的效果： 月亮最开始藏在海中，只露出一点点。 随着时间，开始慢慢上升，直到一个高度停止。 当月亮停止上升，出现一首诗。 效果一： 我们先设置一个div，设置你想要的图为背景，以让其他图片可以很方便的覆盖在上面。这个div中包含三个div： 第一个div:包含背景图中的海的图片。 第二个div:包含月亮图片。 第三个div:作为文字容器。 既然要被海遮盖住，那...
JavaScript实现鼠标点击拖拽移动
laoli360的博客
09-11 2575
1.CSS首先用通配符清内外边距 然后给自己需要用的盒子加上背景图片及脱标 * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background: url(./images/dog.jpg) round; position: absolute; left: 0;
JavaScript实现鼠标拖动图片移动效果
weixin_44439442的博客
02-20 7359
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; img{width:
JavaScript检测鼠标移动方向的方法
10-24
主要介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,需要的朋友可以参考下
JavaScript实现的开关灯泡点击切换特效示例
10-16
在JavaScript编程中，实现交互效果是一项常见的任务，例如在网页上创建一个开关灯泡的点击切换特效。这个特效可以通过监听用户的点击事件，并根据灯泡图片的状态进行改变来实现。在这个例子中，我们主要关注以下几个...
HTML+Javascript实现点击图片自动播放背景音乐
12-27
这里的`id`属性（`musicTrigger`）用于在JavaScript中引用该图片，`onclick`事件监听器会在用户点击图片时执行`playMusic()`函数。 接下来是JavaScript部分。JavaScript负责处理页面的动态行为，如播放音乐。要实现...
bootstrap 点击图片 弹框变大
05-22
在“点击图片弹框变大”的应用场景中，Bootstrap 提供了一种优雅的方式，使得用户可以方便地查看大图。下面将详细讲解如何实现这一功能。 首先，你需要在 HTML 文件（如 `index.html`）中设置图片元素。通常，我们...
图片显示特效javascript
11-18
10. 图片交互：通过JavaScript，用户可以与图片进行交互，比如点击图片触发事件、拖拽图片、多选图片等。 综上所述，JavaScript在图片显示特效方面具有广泛的应用，从简单的图片加载控制到复杂的动画效果，都能实现...
js图片跟随鼠标移动效果
猿码互联
06-03 831
要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1137
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 172
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 155
【代码】vue el-select的下拉树形结构。
javascript让图片移动
09-24
### 回答1： 要使用JavaScript让图片移动，您可以使用以下步骤： 1. 首先，在HTML文件中创建一个<img>元素来显示您想要移动的图片，并为其指定一个唯一的id，例如： ```html <img id="myImage" src="path/to/image.jpg" /> ``` 2. 然后，在JavaScript文件中，获取该元素的引用并存储在变量中，例如： ```javascript var image = document.getElementById("myImage"); ``` 3. 接下来，您可以使用CSS样式来设置图片的位置、大小和其他属性，例如： ```css #myImage { position: absolute; left: 0; top: 0; width: 100px; height: 100px; } ``` 4. 然后，您可以使用JavaScript来更改图片的位置。例如，如果您想将图像向右移动50像素，您可以使用以下代码： ```javascript image.style.left = "50px"; ``` 5. 如果您想将图像向下移动50像素，您可以使用以下代码： ```javascript image.style.top = "50px"; ``` 6. 如果您想要在一定的时间内使图像平滑地移动，您可以使用JavaScript的动画函数，例如setInterval()或requestAnimationFrame()，并在每个时间间隔内更新图片的位置。 请注意，在移动图片时，您还需要考虑图片的父容器的位置和大小，以确保图片不会超出其容器的范围。 ### 回答2： JavaScript可以通过改变图片的位置属性来实现图片的移动。首先需要获取要移动的图片的DOM元素，可以通过id或class来获取。然后使用JavaScript的DOM操作方法来改变图片的位置属性，常用的有style.left和style.top属性。通过改变这两个属性的值，可以控制图片在页面中的位置。 具体的实现步骤如下： 1. 首先，在HTML中创建一个图片元素，并设置它的id或class，例如： ```html <img id="myImage" src="image.png"> ``` 2. 在JavaScript中获取该图片的DOM元素： ```javascript var image = document.getElementById("myImage"); ``` 3. 定义一个函数来实现图片的移动，例如向右移动5个像素： ```javascript function moveImage() { var currentPosition = parseInt(image.style.left) || 0; image.style.left = currentPosition + 5 + "px"; } ``` 4. 调用该函数来触发图片的移动，可以通过定时器或事件的方式来触发： ```javascript setInterval(moveImage, 1000); // 每1秒向右移动一次 ``` 上述代码将使得图片每1秒向右移动5个像素，通过不断改变图片的位置属性实现移动效果。根据具体需求，可以修改移动的方向和距离，以及触发移动的方式。 ### 回答3： JavaScript是一种用于网页开发的脚本语言，可以通过操作HTML元素和CSS样式来实现各种交互效果。在JavaScript中，可以使用一些技术来使图片移动。 首先，可以使用DOM操作来获取图片元素，在HTML中给图片元素添加一个id属性，例如： ```html <img src="image.jpg" id="myImage"> ``` 然后在JavaScript中使用getElementById方法获取该图片元素： ```javascript var image = document.getElementById("myImage"); ``` 接下来，可以通过设置元素的样式来实现移动效果。通过修改元素的left和top属性来改变其位置。例如，将图片向右移动100像素： ```javascript image.style.left = "100px"; ``` 可以使用CSS3的transition属性来为图片添加过渡效果，使其平滑移动。例如，添加一个过渡时间为1秒的效果： ```javascript image.style.transition = "all 1s"; ``` 最后，可以使用JavaScript中的事件监听器来触发移动效果。例如，给按钮添加一个点击事件来触发图片向右移动： ```javascript var button = document.getElementById("myButton"); button.addEventListener("click", function() { image.style.left = "100px"; }); ``` 注意，以上代码只实现了图片向右移动的效果，你可以根据需要修改代码来实现其他方向的移动效果，或者组合使用多个移动操作来实现更复杂的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值