开发者社区> 布雷泽> 正文
阿里云
为了无法计算的价值
打开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;   绝对定位!

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

相关文章
遮罩效果的焦点图
已经不是第一次写焦点图了。但是每一次写都有不同进步和完善。这次带来了遮罩效果的焦点图。设计思想:采用绝对定位,关于mask是设置遮罩层,这个图层位于最上面,关于pic是焦点图片。控制width,height,margin-left,margin-top,z-index属性,便可以实现漂亮的遮罩效果。
637 0
CSS3鼠标滑过图片3D旋转动画
在线演示       本地下载
657 0
按钮实现鼠标悬停背景色渐变的动画特效
Title input { position: absolute; top: 50%; ...
803 0
CSS3实现京东图片鼠标滑过流光效果
京东首页从1F开始,左侧大图都有一个很有意思的效果,当你的鼠标滑过图片时,会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果。相较于淘宝的蒙版效果,个人感觉流光效果更好看一些。因此,本站一些图片也采用了这种流光效果,具体可鼠标滑过博文封面图预览。
935 0
鼠标悬停图片分享按钮动画
在线演示 本地下载
471 0
鼠标划过时,预览大图片(浮动层)
当鼠标划过图片时,用浮动层来预览大图片,虽然不算完美,但够一个网站用即可,有需要再拿来改。 无标题文档 .center_div2{ position: absolute; z-index: 1; text-alig...
518 0
利用Adorner制作用于图像裁切的选择框
原文:利用Adorner制作用于图像裁切的选择框 前天,我写了一篇“使用Adorner显示WPF控件的边界点”的文章。这次,使用从Adorner继承来写一个用于图像裁切的选择框。
550 0
手风琴图片和钢琴导航栏JQ滑动特效
手风琴JQ滑动特效 1.效果预览: 556.gif 2.相关代码: Title * { margin: 0; padding: 0; } .
787 0
+关注
布雷泽
这个家伙很懒什么都没有留下。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载