鼠标放在div里移动，背景图片也会移动，这种效果怎么做？

wzwen 2010-10-21 09:50:57

http://www.cshdesign.cn/csh.asp

类似这种，中间的那块小图片

鼠标放在div里移动，背景图片也会移动，这种效果怎么做？

他是用flash的，用javascript做可以吗？

...全文

976 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

地狱咆哮者 2010-10-22

打赏
举报

路过的，混分的，拜拜的

wz_307 2010-10-22

打赏
举报

随意写了一个, lz看一下



<!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" xml:lang="zh" lang="zh" dir="ltr">

	<head>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

		<script type="text/javascript">

			$(document).ready(init);

			

			var Data = {

				startX: 0,

				startY: 0,

				currentX: 0,

				currentY: 0,

				locked: false //是否设值完成, 用于完美控制不同浏览器事件解析差异

			};

			

			function init(){				

				addListener();

			}

			

			

			

			function addListener(){

				$("#Image").mouseover(doMouseOver).mousemove(doMouseMove);

			}

			

			function doMouseOver(e){

				Data.startX = e.pageX - Data.currentX;

				Data.startY = e.pageY - Data.currentY;

				Data.locked = true;				

			}

			

			function doMouseMove(e){

				if(Data.locked != true){return false;}

				Data.currentX = (e.pageX - Data.startX);

				Data.currentY = (e.pageY - Data.startY);

				$("#Image").css({"background-position": Data.currentX + "px " + Data.currentY + "px"});

			}

			

			function doMouseOut(e){

				locked = false;

			}

			

		</script>

		<style type="text/css" rel="Stylesheet">

			#Image

				{width:150px;height:150px;border:solid 1px #ccc;position:absolute;left:200px;top:200px;background:url(http://www.dagong.com/attachments/2009/11/2_2009111709394911hwI9.jpg) no-repeat;background-position:20px 20px;}

		</style>		

	</head>

	<body>

		

		<div id="Image">

				

		</div>

		

	</body>

</html>

wzwen 2010-10-22

打赏
举报

[Quote=引用 1 楼 cj205 的回复:]
js没问题，问题在于我想不到样式的问题
css里怎么留窗口（别告诉我凑4个DIV）
[/Quote]

高手啊，小弟js菜鸟，一头黑

wz_307 2010-10-22

打赏
举报

代码加的太匆忙, 不好意思. 改一下:



function addListener(){

  $("#Image").mouseover(doMouseOver).mousemove(doMouseMove).mouseout(doMouseOut);

}

function doMouseOut(e){

  Data.locked = false;

}

FF下没问题是因为其内核先执行mouseover再执行mousemove

personball 2010-10-22

打赏
举报

wzwen 2010-10-22

打赏
举报

[Quote=引用 9 楼 personball 的回复:]
引用 8 楼 wzwen 的回复:

引用 5 楼 personball 的回复:
e.pageX 和 e.pageY 是鼠标坐标，用一个适合的表达式替换
$(this).css("background","url(111.jpg)"+ e.pageX +"px "+ e.pageY+"px no-repeat")
中的e.pageX和e.pageY，比如e.pageX-value1 和……
[/Quote]

不好意思，是编码的问题没显示。

刚试了，不过鼠标移到图片上，图片就不见了。div显示白色

personball 2010-10-22

打赏
举报

[Quote=引用 8 楼 wzwen 的回复:]

引用 5 楼 personball 的回复:
e.pageX 和 e.pageY 是鼠标坐标，用一个适合的表达式替换
$(this).css("background","url(111.jpg)"+ e.pageX +"px "+ e.pageY+"px no-repeat")
中的e.pageX和e.pageY，比如e.pageX-value1 和 e.pageY-value2 之类，就……
[/Quote]
你有设置图片么？ 111.jpg 改成你要显示的图~！

wzwen 2010-10-22

打赏
举报

[Quote=引用 5 楼 personball 的回复:]
e.pageX 和 e.pageY 是鼠标坐标，用一个适合的表达式替换
$(this).css("background","url(111.jpg)"+ e.pageX +"px "+ e.pageY+"px no-repeat")
中的e.pageX和e.pageY，比如e.pageX-value1 和 e.pageY-value2 之类，就可以实现该效果

JScript code……
[/Quote]

这位大哥的显示是空白呀。。。

wzwen 2010-10-22

打赏
举报

[Quote=引用 3 楼 wz_307 的回复:]
随意写了一个, lz看一下

HTML code

<!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" x……
[/Quote]

这位大哥写的厉害，ff下的效果完美，ie下的鼠标焦点似乎只能在图片中间的那个固定位置上，无论从哪个角度移过去，捕捉到的焦点都是那里。
非常感谢了

personball 2010-10-22

打赏
举报

这里背景图片变动已经实现了，不过图片动的方式没仔细写那个坐标变换的表达式
代码思路来自 css-sprite

personball 2010-10-22

打赏
举报

e.pageX 和 e.pageY 是鼠标坐标，用一个适合的表达式替换
$(this).css("background","url(111.jpg)"+ e.pageX +"px "+ e.pageY+"px no-repeat")
中的e.pageX和e.pageY，比如e.pageX-value1 和 e.pageY-value2 之类，就可以实现该效果



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script src="jquery-1.3.2.min.js" ></script>

<script>

$(function(){

	$("#imgframe").mousemove(function(e){

	

		$(this).css("background","url(111.jpg)"+ e.pageX +"px "+ e.pageY+"px no-repeat")

	})

})

</script>

<style>

#imgframe{ background:url(111.jpg) 0px 0px no-repeat; width:400px; height:400px; position:absolute; left:0px; top:0px;}

</style>

</head>

<body>

<div id="imgframe" >







</div>

</body>

</html>