图片跟着鼠标飞

最新推荐文章于 2021-06-04 20:41:39 发布
最新推荐文章于 2021-06-04 20:41:39 发布
阅读量46 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/vaelcy/p/9272002.html
本文介绍了一种使用HTML和JavaScript实现鼠标跟随效果的方法。通过监听鼠标移动事件，并利用事件参数对象获取鼠标位置，实现了页面中图片跟随鼠标移动的效果。文章包含完整的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$坚持敲代码到手软$</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
position: absolute;
margin-left: 100px;
margin-top: -200px;
}
body{
height: 2000px;
}
</style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im" />


<script>

//关于事件参数对象的工具的代码

var evtTools={
//事件参数
evt:function (e) {
return window.event?window.event:e;
},
//页面向左卷曲出去的距离
left:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的距离
top:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//事件参数对象中的属性封装---可视区域的横坐标
clientX:function (e) {
return this.evt(e).clientX;
},
//事件参数对象中的属性封装---可视区域的纵坐标
clientY:function (e) {
return this.evt(e).clientY;
},
pageX:function (e) {
return this.evt(e).pageX?this.evt(e).pageX:this.left()+this.clientX(e);
},
pageY:function (e) {
return this.evt(e).pageY?this.evt(e).pageY:this.top()+this.clientY(e);
}
};
document.onmousemove=function (e) {
my$("im").style.left=evtTools.pageX(e)-my$("im").offsetWidth/2-100+"px";
my$("im").style.top=evtTools.pageY(e)-my$("im").offsetHeight/2+200+"px";
};

</script>
</body>
</html>

转载于:https://www.cnblogs.com/vaelcy/p/9272002.html

js实现图片跟着鼠标飞
qq_44388958的博客
04-05 416
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } bod...
html 图片跟着鼠标,图片跟着鼠标飞.html
weixin_29867607的博客
06-07 348
Documentimg{position: absolute;}body{height: 2000px;} function getScroll(){return {left:window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,top:window.pageYOf...
html鼠标切图,记录：图片跟着鼠标飞（浏览器兼容）
weixin_39560207的博客
06-04 159
王侯将相宁有种乎*{margin: 0;padding: 0;}body{height: 2000px;}img{position: absolute;}//下面的代码在谷歌和火狐支持 初次版本// my$("im").style.left=e.pageX+"px";// my$("im").style.top=e.pageY+"px";//下面的代码在IE8中不支持,不支持pageX和pageY...
22-纯js-图片跟着鼠标飞的效果
的博客
06-08 231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } body{ ...
JS---案例：图片跟着鼠标飞的最终版本
ElegantHedgehog的博客
08-19 87
案例：图片跟着鼠标飞的最终版本 换了个好看的糖果照片，想给博客首页加上，但是加上后，应该是overwrite原来的html，所以光有鼠标跟着飞的效果，原来的功能都不能用了 放入common.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> im...
JavaScript图片跟着鼠标飞
weixin_30810583的博客
08-10 70
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> img { position: absolute; ...
JavaScriptDOM练习之图片跟着鼠标飞
星空nwk的博客
10-08 305
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> s script> var evt = { //event或e getEvent: function (e) { return window.event || e;
记录：图片跟着鼠标飞（浏览器兼容）
05-18 264
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>王侯将相宁有种乎</title> <style&gt...
图片跟着鼠标飞 封装鼠标xy轴的获取
qq_37607451的博客
01-16 568
&lt;script&gt; var evt = { //window.event和事件参数对象e的兼容 getEvent: function(evt) { return window.event || evt; }, //可视区域的横坐标兼容 getClientX: function(evt) { return this.getEvent(ev...
springboot尿毒症健康管理系统的设计与实现论文
最新发布
08-12
springboot尿毒症健康管理系统的设计与实现
python 列表文本转表格
08-12
python
关于多视图几何的论文，以及与点云深度学习相关的文章
08-12
资源下载链接为： https://pan.quark.cn/s/a447291460bd 关于多视图几何的论文，以及与点云深度学习相关的文章（最新、最全版本！打开链接下载即可用！）
基于MATLAB Simulink的质子交换膜燃料电池系统模型开发与控制策略仿真
08-12
内容概要：本文详细探讨了质子交换膜燃料电池（PEMFC）系统模型的构建与开发，特别是利用MATLAB Simulink平台进行建模和仿真的方法。文中涵盖了空压机、供气系统（阴极和阳极）、背压阀和电堆四个核心组件的数学模型建立，旨在帮助研究人员更好地理解PEMFC系统的运行机制。此外，还介绍了如何通过调整各组件的关键参数来优化系统的性能，从而为实际应用提供了理论依据和技术支持。 适合人群：从事燃料电池研究的技术人员、高校相关专业师生、新能源领域的科研工作者。 使用场景及目标：适用于希望深入了解PEMFC系统内部运作机制的研究人员，以及需要进行控制系统设计和优化的工程技术人员。目标是掌握MATLAB Simulink建模技巧，提升对PEMFC系统的理解和应用能力。 其他说明：文章不仅提供了详细的模型构建步骤，还包括具体的示例代码和讨论，便于读者实践操作并加深理解。
三菱FX3U与东元TECO N310变频器Modbus通讯实战及触摸屏程序详解
08-12
三菱FX3U PLC通过485ADP-MB板与东元TECO N310变频器进行Modbus通讯的具体实现方法。主要内容涵盖硬件连接、参数设置、PLC编程技巧以及触摸屏程序的设计。文中提供了详细的接线图、参数配置步骤、核心代码片段，并分享了一些实用的经验和避坑指南。此外，还特别强调了终端电阻的作用、波特率一致性、接地线的重要性以及CRC校验的正确使用。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是需要进行PLC与变频器通讯项目的从业者。 使用场景及目标：适用于需要将三菱FX3U PLC与东元TECO N310变频器进行Modbus通讯的实际工程项目。主要目标是帮助工程师快速掌握通讯配置和编程技巧，确保系统稳定可靠地运行。 其他说明：本文不仅提供理论指导，还包括大量实践经验，如硬件接线注意事项、常见错误排查等，有助于提高工作效率并减少调试时间。同时，附带的触摸屏程序也为不同品牌设备间的兼容性提供了保障。
基于Matlab的Yalmip+Cplex的两阶段鲁棒微电网优化方案：储能与配电网交互的综合经济成本优化
08-12
利用Matlab平台结合YALMIP工具箱和Cplex求解器实现的两阶段鲁棒微电网优化方法。该方法旨在优化微电网内的储能系统和微型燃气轮机的投资与运行成本。文中首先解析了目标函数，包括投资成本（如储能系统的等年值投资成本）和运行成本（如配电网交互成本、各单元运维成本及微型燃气轮机的燃料成本）。接着阐述了具体的约束条件，如功率平衡约束和配电网交互约束。最后展示了如何使用YALMIP和Cplex求解器进行优化求解，并强调了模型的稳定性和代码注释的重要性。 适合人群：对微电网优化感兴趣的科研人员、电力系统工程师和技术爱好者。 使用场景及目标：适用于希望深入了解微电网优化理论及其应用的研究者，特别是那些希望通过数学建模和优化算法提高微电网经济效益的人群。目标是在不确定环境下找到最佳的微电网调度策略，从而降低总体运营成本。 其他说明：文中提供了详细的Matlab代码示例，有助于读者更好地理解和实践所介绍的方法。同时，附带的图表和文献引用也为进一步研究提供了便利。
工业自动化导轨搬运码垛系统的PLC与HMI程序设计及其实现
08-12
基于三菱PLC（FX3U）和信捷HMI（TH765）的导轨搬运码垛系统程序设计。系统采用双轨道入料，通过智能优化判断抓取优先级，实现高效有序的工作流程。X轴和Z轴配备伺服电缸，确保精准定位和平稳放料。完善的防错警报机制，如防撞、错放料、掉料等，保障了生产安全和效率。文中提供了关键PLC源代码及注释，有助于理解和修改程序。虽然未附具体电气接线图，但给出了合理的布线建议。 适合人群：对工业自动化感兴趣的工控爱好者、从事自动化设备开发的技术人员。 使用场景及目标：①用于开发和改进各类搬运码垛设备；②学习PLC和HMI编程技巧，掌握智能优化、精准定位和防错警报机制的设计方法。 其他说明：由于程序可复制，自主开发存在一定难度，建议珍惜每份劳动成果，逐步完善功能，确保程序稳定性和可维护性。
基于S7-200 PLC与MCGS组态的智能售货机控制系统设计：梯形图程序与组态画面解析
08-12
基于S7-200 PLC和MCGS组态软件的智能售货机控制系统的设计与实现。首先，文章展示了系统的硬件配置，包括IO分配表、接线图以及电磁阀和传感器的选择要点。接着，深入探讨了梯形图程序的核心逻辑，如投币验证、商品选择和找零执行，并特别提到了防抖动处理和找零逻辑优化技巧。最后，讲解了MCGS组态画面上的实时金额显示、动画出货效果和故障报警弹窗等功能的实现方法。此外，文中还分享了一些实际调试过程中遇到的问题及其解决方案。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程和人机界面设计感兴趣的读者。 使用场景及目标：适用于希望深入了解PLC编程和MCGS组态应用的技术人员，旨在帮助他们掌握智能售货机控制系统的设计思路和具体实现方法。 其他说明：文中不仅提供了详细的理论介绍，还结合实际案例进行了经验分享，有助于读者更好地理解和应用相关技术。
西门子1200 1500系列PLC脉冲伺服功能块集成：运动控制与自动化完美融合的技术解析
08-12
西门子1200 1500系列PLC的脉冲伺服功能块集成技术，展示了其在运动控制和自动化领域的创新应用。文章通过具体实例和代码片段，解释了如何利用功能块实现轴使能、报警处理、手动/自动模式切换等功能。特别强调了功能块对底层逻辑的封装，使得复杂操作变得简单易用，极大提高了调试效率和系统稳定性。此外，还提到了功能块在实际生产环境中的优势，如快速响应和减少停机时间。 适合人群：从事工业自动化、运动控制系统设计与维护的工程师和技术人员。 使用场景及目标：适用于需要高效调试和优化运动控制系统的场合，帮助工程师快速掌握西门子PLC的功能块集成技术，提升工作效率并确保生产线稳定运行。 其他说明：尽管有人担心过度封装会导致技能退化，但在实际应用中，快速解决问题和提高生产效率更为重要。
Bootstrap实现图片鼠标悬停遮罩特效教程
在本知识点中，我们将详细探讨如何利用 Bootstrap 来实现鼠标悬停在图片上时显示遮罩特效的功能。遮罩特效通常用于增强用户交互体验，使得在图片上进行交互时能够展示更多信息或按钮等元素。 ### 关键技术知识点 #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值