JQ图片跟着鼠标走

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" >
<head>

<title></title>

<script src="../Scripts/jquery-1.4.1.js"
type="text/javascript"></script>
<script type
="text/javascript" >
$(function() {

$(document).mouseover(function(e) {
// $("#fly").css("left",
e.pageX).css("top", e.pageY);
$("#fly").css("left", e.pageX);

$("#fly").css("top", e.pageY);
});
});

</script>
</head>
<body>
<div id ="fly" style ="
position :absolute "><img src ="../image/00.jpg" width ="30px"
height="30px" alt =""
/></div>
</body>
</html>

JQ图片跟着鼠标走,布布扣,bubuko.com

时间: 2024-10-18 09:01:30

JQ图片跟着鼠标走的相关文章

JavaScript图片跟着鼠标动最终版

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } body { height: 2000px; } img { position: absolute; } </style> <

JS---案例:图标跟着鼠标飞(有bug)

案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> img { position: absolute; } </style> </head> <body> <img src=&q

jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距离页面左侧.顶部的距离通过event.pageX.event.pageY,然后通过修改图片的left.top值即可. 二.五角星评分案例 1.如图:业务逻辑:①鼠标移入某颗星时,这颗及之前的都变实心:②未点击,移开评分区,所有星变空心:③点击,移开评分区,点击过的星及之前的变实心 2.用到的方法:e

图片跟随鼠标移动

关键点: 1.图片采用绝对定位 2.事件:mousemove 3.偏移距离 offset(),   .offset().left  | .offset().top $("#mem-box-mouse").css({ "left": pointX - $memBox.offset().left - 50,//图片跟随鼠标移动,判断图片在背景区域内的位置 鼠标位置-背景框相对于页面的距离:mouseX - offset().left, "top":

DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )  取值: auto  :   默认值.浏览器根

图片随鼠标移动

<head><title></title> <script type="text/javascript">        document.onmousemove =function() {        //当鼠标移动式获取当前x,y坐标值var x = window.event.clientX;var y = window.event.clientY;var f = document.getElementById("fly&

移动互联网的未来:金钱跟着眼球走

昨天阅读了美国网络媒体BusinessInsider近日发布的报告<移动互联网的未来>,感觉很爽,可能是因为自已就是搞这一行业的,所以越看越兴趣,未来太多太多的机会,太多太多的可能性,那该死的智能手机加上该死的APP应用将慢慢地完全融入你生活和商务的方方面面,聪明的创业者们瞄准的是细分行业的市场,行业大佬类似马化腾和马云尽管钱包鼓涨野心澎涨,但也不可能面面俱到,还是要留一些空间给市场上的小弟们,否则他们不是累死就是被整死了,虽然政府爱他们多于恨他们,但聪明的领导者知道,任何行业垄断都是不利于稳

图片跟随鼠标移动(精简版跨浏览器实现)

网上看到许多让图片跟随鼠标移动,感觉代码很复杂,还不兼容,其实可以很简单的实现: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="

像歌词跟着声音走的JS文字效果

一个比较不错的文字显示特效,像MTV的歌词显示一样跟着演唱者慢慢逐个清淅显示,这段特效代码就实现了和这个功能差不多,而且JS代码非常少,兼容性好,点击运行看看效果吧! <html> <head> <title>石家庄花卉</title> </head> <body> <script language="JavaScript"> var message="像歌词显示一样JS文字效果!"