上一篇
下一篇
[Jquery]鼠标在图片四角显示不同图片图片
作者:admin 日期:2008-12-24
鼠标在图片四角显示不同图片图片
预览地址：
http://www.iamwawa.cn/blog/upfiles/js/081224-4pic/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>鼠标在图片四角显示不同图片图片</title>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
$("#p1").mousemove(function(e){
var x=e.offsetX;//x相于图片的偏移
var y=e.offsetY;
var w=$("#p1").width();//图片的宽度
var h=$("#p1").height();
if(x>0 && x<w/2 && y>0 && y<h/2)//我把图片划成了4分,这个判断如果鼠标在左上角的区域的话,就显示别的图片
{
$("#p1").attr("src","1.gif");
}
if(x>w/2 && x<w && y>0 && y<h/2)//右上
{
$("#p1").attr("src","2.gif");
}
if(x>0 && x<w/2 && y>h/2 && y<h)//...
{
$("#p1").attr("src","3.gif");
}
if(x>w/2 && x<w && y>h/2 && y<h)//...
{
$("#p1").attr("src","4.jpg");
}
})
})
//-->
</SCRIPT>
</head>
<body>
<h3>图片分区域显示不同的图片。（分 左上，右上，左下，右下。）</h3>
<img src="1.gif" id='p1' width="270" height="100" />
</body>
</html>
预览地址：
http://www.iamwawa.cn/blog/upfiles/js/081224-4pic/
复制内容到剪贴板
程序代码
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>鼠标在图片四角显示不同图片图片</title>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
$("#p1").mousemove(function(e){
var x=e.offsetX;//x相于图片的偏移
var y=e.offsetY;
var w=$("#p1").width();//图片的宽度
var h=$("#p1").height();
if(x>0 && x<w/2 && y>0 && y<h/2)//我把图片划成了4分,这个判断如果鼠标在左上角的区域的话,就显示别的图片
{
$("#p1").attr("src","1.gif");
}
if(x>w/2 && x<w && y>0 && y<h/2)//右上
{
$("#p1").attr("src","2.gif");
}
if(x>0 && x<w/2 && y>h/2 && y<h)//...
{
$("#p1").attr("src","3.gif");
}
if(x>w/2 && x<w && y>h/2 && y<h)//...
{
$("#p1").attr("src","4.jpg");
}
})
})
//-->
</SCRIPT>
</head>
<body>
<h3>图片分区域显示不同的图片。（分 左上，右上，左下，右下。）</h3>
<img src="1.gif" id='p1' width="270" height="100" />
</body>
</html>
[本日志由 admin 于 2010-09-01 10:04 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Jquery JavaScript 
相关日志:
评论: 1 | 引用: 0 | 查看次数: 1440
回复
lzi[2009-03-11 01:02 AM | 
]这个很有用，收藏了。 
站长有不少好东西啊。
站长有不少好东西啊。发表评论
