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

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;   绝对定位!

时间: 2024-10-03 14:34:02

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

14款经典网页图片和文字特效的jQuery插件-前端开发必备_jquery

不废话了,直接贴图片了,亲们可以点击查看演示和下载源码哦. 经典1.网页图片3d旋转jQuery代码 查看演示  下载插件 经典2.存css3实现的tabl选项卡代码 查看演示 下载插件 经典3.jQuery标签旋转代码 查看演示  下载插件 经典4.鼠标悬浮的图片选项卡代码 查看演示  下载插件 经典5.鼠标往下滚动时文字变大的css3代码 查看演示  下载插件 经典6.动画标签云网页代码 查看演示  下载插件 经典7.css3文字晃动代码 查看演示  下载插件 经典8.css3幻灯片代码 查

jQuery实现鼠标滑过图片移动特效_jquery

在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他"交流",从而增加用户在页面的逗留时间,以及增加深层次访问的可能性. 今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置. 首先,我们先来做如下图所示的页面布局: 页面布局部分: <ul> <li><img src="images/1.jpg&qu

js鼠标滑过图片震动特效的方法

 这篇文章主要介绍了js鼠标滑过图片震动特效的方法,涉及onMouseOver事件及图片操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <ti

屏幕上方是扫描的pdf文件, 下方是输入界面, 根据pdf上的文字,将信息输入到屏幕下方的界面中,要求滑动鼠标时上方图片与下方的界面一起动。

问题描述 屏幕上方是扫描的pdf文件,下方是输入界面,根据pdf上的文字,将信息输入到屏幕下方的界面中,要求滑动鼠标时上方图片与下方的界面一起动.

如何让鼠标停在图片按钮上时显示说明的文字?

问题描述 设置什么样子的属性? 解决方案 解决方案二:alt解决方案三:错了alt属性添加到img主要的目的才是为了SEO(搜索引擎优化),搜索引擎不认识图片,但能够通过alt的值对图片内容做出判断.Title是鼠标滑过时显示的文字提示,用户体验上很重要.解决方案四:引用2楼qdwangle的回复: 错了alt属性添加到img主要的目的才是为了SEO(搜索引擎优化),搜索引擎不认识图片,但能够通过alt的值对图片内容做出判断.Title是鼠标滑过时显示的文字提示,用户体验上很重要. 那具体代码如

js鼠标滑过图片震动特效的方法_javascript技巧

本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>鼠标滑过 图片震动效果</title> <STYLE>.shakeimage {  POSITION: re

PPT怎么打造磨砂文字特效

PPT怎么打造磨砂文字特效   其实,制作PPT往往没有我们想象中的那么难,而PPT本身的功能也并不是很多人想象的那样弱小.如果你会PS.AI当然会事半功倍,但如果你不会,也能通过一些方法,利用PPT自带功能做出意想不到的效果.现在,我们就来看一看如何在你的PPT背景图片中添加磨砂文字特效. 第一步:插入你想要的文字. 要点:文字颜色尽量接近稍后要填充的文本框背景色;文字要尽量大,并且用较粗的字体,这样容易出效果. 第二步:选中文字,单击右键,选择"设置形状格式".用灰色填充文本框,并

js实现图片无缝滚动特效_javascript技巧

首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter

原生js和jquery实现图片轮播特效_jquery

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div