javascript实现鼠标划过出现舞动的图片

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量521 收藏 1
点赞数
文章标签： javascript 鼠标 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengtian21/article/details/41084267
版权

   下面是我写的一个用javascript实现的鼠标点击或划过就会随机出现图片的效果，图片的位置是随机产生的，当你的鼠标滑动的够快的话，会看到更加神奇的效果，当然你的图片也要选择的好，我相信各位的眼光都会比我好，由于我未上传图片，因此在你复制代码后，你的同目录下的有图片才能查看效果哦，初次尝试，代码不够精简，日后会分享更好的东西。。。

ps:这是我看过这个Flash后由此而萌生的想法，即用javascript实现相同的效果，附上源Flash链接：http://www.procreo.jp/labo/flower_garden.swf

源代码：

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>javascript实现鼠标划过出现舞动的图片</title>
<script type="text/javascript">
var st = 0;
function f1()
{
st++;
switch(st)
{
case  1: document.getElementById("a1").style.display="block";
document.getElementById("a1").style.top=fff();    //产生随机位置
document.getElementById("a1").style.left=fff1(); break;
case  2: document.getElementById("a2").style.display="block";
document.getElementById("a2").style.top=fff();
document.getElementById("a2").style.left=fff1(); break;
case  3: document.getElementById("a3").style.display="block";
document.getElementById("a3").style.top=fff();
document.getElementById("a3").style.left=fff1(); break;
case  4: document.getElementById("a4").style.display="block";
document.getElementById("a4").style.top=fff();
document.getElementById("a4").style.left=fff1(); break;
case  5: document.getElementById("a5").style.display="block";
document.getElementById("a5").style.top=fff();
document.getElementById("a5").style.left=fff1(); break;
case  6: document.getElementById("a6").style.display="block"; 
document.getElementById("a6").style.top=fff();
document.getElementById("a6").style.left=fff1();break;
case  7: document.getElementById("a7").style.display="block";
document.getElementById("a7").style.top=fff();
document.getElementById("a7").style.left=fff1(); break;
case  8: document.getElementById("a8").style.display="block";
document.getElementById("a8").style.top=fff();
document.getElementById("a8").style.left=fff1(); break;
case  9: 
document.getElementById("a9").style.display="block";
document.getElementById("a9").style.top=fff();
document.getElementById("a9").style.left=fff1();break;
case 10: document.getElementById("a10").style.display="block";
document.getElementById("a10").style.top=fff();
document.getElementById("a10").style.left=fff1();break;
case 11: document.getElementById("a11").style.display="block";
document.getElementById("a11").style.top=fff();
document.getElementById("a11").style.left=fff1();break;
case 12: document.getElementById("a12").style.display="block";
document.getElementById("a12").style.top=fff();
document.getElementById("a12").style.left=fff1();break;
case 13: document.getElementById("a13").style.display="block";
document.getElementById("a13").style.top=fff();
document.getElementById("a13").style.left=fff1();break;
case 14: document.getElementById("a14").style.display="block";
document.getElementById("a14").style.top=fff();
document.getElementById("a14").style.left=fff1();break;
case 15: document.getElementById("a15").style.display="block";
document.getElementById("a15").style.top=fff();
document.getElementById("a15").style.left=fff1();break;
case 16: document.getElementById("a16").style.display="block";
document.getElementById("a16").style.top=fff();
document.getElementById("a16").style.left=fff1();break;
default:st=st%16;break;
}
}
function fff(){//设置页面中Y方向上的随机数
var nn=(Math.random()*600);
nn = String(nn)+ "px"; 
return nn;
}
function fff1(){//设置页面中X方向上的随机数
var nn1=(Math.random()*1200);
nn1 = String(nn1)+ "px"; 
return nn1;
}
</script>
<style>
body{ background:#000;}
#a1{position:absolute;

    z-index:1;
}
#a2{position:absolute;
 
   z-index:2;
}
#a3{position:absolute;
 
   z-index:3;
}
#a4{position:absolute;
 
   z-index:4;
}
#a5{position:absolute;
   
    z-index:5;
}
#a6{position:absolute;
   
    z-index:6;
}
#a7{position:absolute;
  
    z-index:7;
}
#a8{position:absolute;
  
    z-index:8;
}
#a9{position:absolute;

    z-index:9;
}
#a10{position:absolute;

    z-index:10;
}
#a11{position:absolute;

    z-index:11;
}
#a12{position:absolute;

    z-index:12;
}
#a13{position:absolute;

    z-index:13;
}
#a14{position:absolute;

    z-index:14;
}
#a15{position:absolute;

    z-index:15;
}
#a16{position:absolute;

    z-index:16;
}
#b{
    width:1366px;
height:768px;
background:#000;

}
</style>
</head>

<body>
<img src="黑色.jpg" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="0,0,1366,768" οnclick="f1()"  onMouseOver="f1()"  value="">
</map>
</br>
<img id="a1" src="1.png"    width="100" height="100" style="display:none"/>
<img id="a2" src="2.png"    width="100" height="100" style="display:none"/>
<img id="a3" src="3.png"    width="100" height="100" style="display:none"/>
<img id="a4" src="4.png"    width="100" height="100" style="display:none"/>
<img id="a5" src="5.png"    width="100" height="100" style="display:none"/>
<img id="a6" src="6.png"    width="100" height="100" style="display:none"/>
<img id="a7" src="7.png"    width="100" height="100" style="display:none"/>
<img id="a8" src="8.png"    width="100" height="100" style="display:none"/>
<img id="a9" src="9.png"    width="100" height="100" style="display:none"/>
<img id="a10" src="10.png"  width="100" height="100" style="display:none"/>
<img id="a11" src="11.png"  width="100" height="100" style="display:none"/>
<img id="a12" src="12.png"  width="100" height="100" style="display:none"/>
<img id="a13" src="13.png"  width="100" height="100" style="display:none"/>
<img id="a14" src="14.png"  width="100" height="100" style="display:none"/>
<img id="a15" src="15.png"  width="100" height="100" style="display:none"/>
<img id="a16" src="16.png"  width="100" height="100" style="display:none"/>

</body>

</html>

mengtian21
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中鼠标移动加上相应的图片
plannothing的博客
08-15 561
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 2000px; } #box01{ width: 100px; height: 100px; background-color: red; /* * 开启box01的绝对定位 */ .
JavaScript鼠标拖动图片
Bruce_wjh的博客
08-13 981
<!DOCTYPE html> <html> <head> <style type='text/css'> img { position: absolute; } </style> <body> <script type='text/javascript'> function moveImage() { ...
js鼠标经过，实现图片的渐隐渐现
温壁
10-13 1286
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{padding: 0;margin: 0;} body{b
练习：javascript分享划过简单效果
weixin_30667649的博客
01-04 63
利用目标点判断速度speed正负值、利用目标点函数封装传参， <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
js实现鼠标划过文字接连出现图片在网址大全中的巧妙应用
01-15
js实现鼠标划过文字接连出现图片在网址大全中的巧妙应用
鼠标悬停在小图上，自动出现大图的代码
行者
12-19 3254
首先原图片就是大图片， 1.小图所在的div，用style=overfow:hidden;width:100px;height:100px;和 来限定图片显示大小，只显示为高宽100px z-index:2; display:none;"> 2.用于显示大图即原本大小图的div,style=display:none;让它先不显示 function show(_this) { document
【前端】js关于鼠标划过事件
热门推荐
weixin_42698560的博客
07-15 1万+
js对于鼠标划过事件有如下几种：onmouseover 、onmouseout 与onmouseenter 、onmouseleave这四个事件一般两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用区别：1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东...
js鼠标移动到图片上浮动层显示图片
lansky54的专栏
03-23 2435
js鼠标移动到图片上浮动层显示图片//判断图片后缀名String.prototype.isPicture = function(){    var strFilter = ".jpeg|.gif|.jpg|.png|.bmp|.pic";    if(this.indexOf(".") > -1){        var p = this.lastIndexOf(".");        var
JavaScript实现鼠标滑过图片变换效果的方法
10-24
主要介绍了JavaScript实现鼠标滑过图片变换效果的方法,涉及javascript控制鼠标事件及样式变换的技巧,非常具有实用价值,需要的朋友可以参考下
JavaScript简单实现鼠标移动切换图片的方法
10-22
主要介绍了JavaScript简单实现鼠标移动切换图片的方法,涉及JavaScript针对鼠标事件的响应及页面元素的动态变换技巧,需要的朋友可以参考下
JavaScript实现鼠标滚轮控制页面图片切换功能示例
10-19
主要介绍了JavaScript实现鼠标滚轮控制页面图片切换功能,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
基于JavaScript实现鼠标箭头移动图片跟着移动
10-21
总的来说，实现鼠标箭头移动图片跟着移动的效果并不复杂，只需要理解JavaScript事件处理、DOM操作以及CSS定位即可。这种技术可以应用于各种网页设计中，增加用户与网页的互动性，提升用户体验。通过学习和实践，...
javascript实现图片跟随鼠标移动效果的方法
10-24
主要介绍了javascript实现图片跟随鼠标移动效果的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
JavaScript实现狂欢舞动的小球
LY_code的博客
04-18 353
狂欢舞动的小球效果（也就一个html代码）：代码（html）：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;滚动的小球&lt;/title&gt; &lt;style&gt;
js总结（一）：鼠标滑过时通过js修改同级元素样式
qq_402243155的博客
12-03 903
通过“鼠标滑过”事件触发js函数，修改特定元素样式 在一些极端特殊情况，需要在鼠标滑过当前元素的情况下修改其他特定元素属性，此时css自带的hover已经不能满足需求。 题目：如下图所示，当鼠标移动到“嘤嘤怪”时将“嘤嘤嘤”修改为黑底白字，移出时恢复；当鼠标移动到“笑你妹”时将“嘿嘿嘿”修改为黑底白字，移出时恢复。 解题代码如下： <html> <body> <sc...
蜗牛—JavaScript学习之鼠标滑过与离开
树上的大腰子
05-25 982
JavaScript初学，请多多关照
js实现图片随鼠标滚动的效果
代码写到地老天荒
11-10 2293
1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 &lt;div id="adver" style="position:absolute;top:50px;left:1000px;z-index:2;"&gt; &lt;i...
JavaScript学习笔记1：鼠标划过选中
落日小屋
05-28 1035
欢迎各位读者学习Javascript这门语言!
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 769
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
javascript实现鼠标悬浮改变图片位置
05-25
可以使用JavaScript来实现鼠标悬浮改变图片位置的效果，具体实现步骤如下： 1. 获取需要操作的图片元素和容器元素。 2. 添加鼠标悬浮事件监听器，当鼠标悬浮在容器元素上时，获取鼠标在容器内的位置。 3. 计算图片应该移动的距离，并设置图片的样式`transform: translate(x, y)`来实现移动效果。 以下是示例代码： ```html <style> .container { position: relative; width: 500px; height: 300px; border: 1px solid #333; overflow: hidden; } img { position: absolute; top: 0; left: 0; transition: transform 0.3s ease-out; } </style> <div class="container" onmousemove="moveImage(event)"> <img src="example.jpg" alt="example" /> </div> <script> const container = document.querySelector('.container'); const image = document.querySelector('img'); function moveImage(event) { const containerRect = container.getBoundingClientRect(); const mouseX = event.clientX - containerRect.left; const mouseY = event.clientY - containerRect.top; const centerX = containerRect.width / 2; const centerY = containerRect.height / 2; const moveX = (mouseX - centerX) / 10; const moveY = (mouseY - centerY) / 10; image.style.transform = `translate(${moveX}px, ${moveY}px)`; } </script> ``` 该示例代码中，将图片放在一个容器中，容器的宽高和边框用于限制图片移动的范围。当鼠标在容器内移动时，计算鼠标相对于容器中心的偏移量，使用该偏移量计算图片应该移动的距离，并使用`transform`样式来实现图片移动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值