开发者社区> 布雷泽> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

随鼠标移动的图片或文字特效!

简介: View Code DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    跟随鼠标的图片特效            document.
+关注继续查看
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    
<title>跟随鼠标的图片特效</title>
    
<script language="javascript" type="text/javascript">
        document.onmousemove 
= function () {
            
var x = window.event.clientX;
            
var y = window.event.clientY;
            
var divId = document.getElementById("divId");
            
if (!divId) {
                
return;
            }
            divId.style.left 
= x;
            divId.style.top 
= y;
        }
    
</script>
</head>
<body>
    
<div id="divId" style="position: absolute; margin-left:20px;">
        这里放的是图片
    
</div>
</body>
</html>

 

其实这段代码很简单,也很好理解,只是获取了当前鼠标在屏幕中的位置; 然后再把坐标值赋给图片,或者文字!当然要用到 position:absoluute;   绝对定位!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Javascript实现让图片一直跟着鼠标移动
Javascript实现让图片一直跟着鼠标移动
9 0
CSS3-动画-文字闪烁
CSS3-动画-文字闪烁
164 0
js小效果之跟随鼠标移动的小球
js小效果之跟随鼠标移动的小球
39 0
C#鼠标拖拽,移动图片实例
最近工作需要做一个鼠标可以拖拽移动图片的功能。写了几个基本功能,勉强能用。
120 0
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
1863 0
CSS3鼠标悬停图片动画
在线演示 本地下载
703 0
WPF之鼠标滑动切换图片
原文:WPF之鼠标滑动切换图片   在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧。   需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓动效果。
969 0
设置鼠标可以移动窗体
       #region 设置鼠标可以移动         private bool ismouseDown = false;//判断是否按下鼠标         private Point mouseOffset;//记录鼠标坐标         ...
467 0
+关注
布雷泽
这个家伙很懒什么都没有留下。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
3D动画的菜谱式灯光与云渲染
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载