87,902
社区成员
发帖
与我相关
我的任务
分享jQuery的问题
有一张图片，鼠标放在图片的右半部分，就显示个向右方向图片
鼠标放在图片的左半部分，就显示个向左方向图片
用mousrover 只能在图片上显示一张图片啊，
求解
鼠标放在图片的左半部分，就显示个向左方向图片
用mousrover 只能在图片上显示一张图片啊，
求解
...全文
请发表友善的回复…
发表回复
BLUE_LG 2011-09-06
- 打赏
- 举报
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
</script>
<style>
</style>
<body>
<img src="b.jpg" id="last" style="display:none"/>
<img src="a.jpg" alt="新书架" width="400" height="400" hspace="10" align="left" usemap="#newbook" border="0"/>
<img src="c.jpg" id="next" style="display:none"/>
<map name="newbook">
<area shape="rect" coords="0,0,200,400" onmouseover="document.getElementById('last').style.display='block'" onmouseout="document.getElementById('last').style.display='none'"/>
<area shape="rect" coords="200,0,400,400" onmouseover="document.getElementById('next').style.display='block'" onmouseout="document.getElementById('next').style.display='none'"/>
</map>
<script>
</script>
</body>
</html>
sxldfang 2011-09-06
- 打赏
- 举报
应该比较完善了，保存到文件中即可看到效果！
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#leftWindow').hover(function(){$('#leftArrow').show()},function(){$('#leftArrow').hide()}).click(function(){alert('上一张')});
$('#rightWindow').hover(function(){$('#rightArrow').show()},function(){$('#rightArrow').hide()}).click(function(){alert('下一张')});
});
</script>
<style type="text/css">
#picWindow { width:800px; border:2px solid red; position:relative; overflow:hidden; text-align:center; }
#leftWindow { width:40%; height:100%; left:0; position:absolute; border:1px solid blue;}
#rightWindow{ width:40%; height:100%; right:0; position:absolute; border:1px solid green;}
#leftArrow { display:none; padding:40px; background:pink; position:absolute; left:30px; margin-top:50%; top:-50px; }
#rightArrow { display:none; padding:40px; background:pink; position:absolute;right:30px; margin-top:50%; top:-50px; }
</style>
</head>
<body>
<div id='picWindow'>
<div id='leftArrow'>《</div>
<div id='leftWindow'></div>
<div id='rightArrow'>》</div>
<div id='rightWindow'></div>
<img src='http://img1.gtimg.com/2/260/26034/2603477_980x1200_0.jpg' />
</div>
</body>
</html>
ahlaliuchao 2011-09-06
- 打赏
- 举报
[Quote=引用 7 楼 niuniu20008 的回复:]
上面的代码不够完善，其实还要判断图片的上和下坐标，以及鼠标的上和下坐标。
[/Quote]
为什么 var left = imgOffset.left;
我用老是提示‘left’为空或者不是对象
上面的代码不够完善，其实还要判断图片的上和下坐标，以及鼠标的上和下坐标。
[/Quote]
为什么 var left = imgOffset.left;
我用老是提示‘left’为空或者不是对象
niuniu20008 2011-09-06
- 打赏
- 举报
上面的代码不够完善，其实还要判断图片的上和下坐标，以及鼠标的上和下坐标。
niuniu20008 2011-09-06
- 打赏
- 举报
<html>
<head>
<script type='text/javascript'
src="F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\jQuery\jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
var imgTag = $("#imgTag");
var imgWidth = imgTag.attr("width");//图片的宽度
var imgOffset = imgTag.offset();
var left = imgOffset.left;//图片的左位置
var r = left+imgWidth;//图片的最右边缘
var c = left+imgWidth/2;//图片的中间位置
// 如果是点击
imgTag.click(function(e){
var clik = e.originalEvent.x;
if(clik>c && clik<r){
imgTag.attr("src","F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\images\61.jpg");
}else if(click>left && click<c){
imgTag.attr("src","F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\images\59.jpg");
}
});
});
</script>
<title>Haha</title>
</head>
<body>
<center>
<img alt="" id="imgTag" width="200px" height="150px" src="F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\images\60.jpg"/>
</center>
</body>
</html>
根据这个代码改下试试
QQ635785620 2011-09-06
- 打赏
- 举报
mousrover和click效果都是一样的，都是event反应。
1，有一种思路就是将这个图片剪切为左右两张。OK了
2，如果图片位置固定的话，可以通过图片的中间线横坐标确定要显示的范围。
建议思路：其实左右图片显示与鼠标位置的不同是没关系的，先考虑点击图片左侧，图片左侧出现，点击图片右侧，图片右侧出现。再考虑位置相反问题
1，有一种思路就是将这个图片剪切为左右两张。OK了
2，如果图片位置固定的话，可以通过图片的中间线横坐标确定要显示的范围。
建议思路：其实左右图片显示与鼠标位置的不同是没关系的，先考虑点击图片左侧，图片左侧出现，点击图片右侧，图片右侧出现。再考虑位置相反问题
bennman 2011-09-06
- 打赏
- 举报
哦 应该是 onMouseMove=""
bennman 2011-09-06
- 打赏
- 举报
[Quote=引用 1 楼 mubeibei 的回复:]
引用楼主 ahlaliuchao 的回复:
有一张图片，鼠标放在图片的右半部分，就显示个向右方向图片
鼠标放在图片的左半部分，就显示个向左方向图片
用mousrover 只能在图片上显示一张图片啊，
求解
先拿到图片的宽度，然后除以2
onmouseover的时候 判断鼠标位置在图片的哪边就行了~·
大概思路就是这样~·
[/Quote]
++
引用楼主 ahlaliuchao 的回复:
有一张图片，鼠标放在图片的右半部分，就显示个向右方向图片
鼠标放在图片的左半部分，就显示个向左方向图片
用mousrover 只能在图片上显示一张图片啊，
求解
先拿到图片的宽度，然后除以2
onmouseover的时候 判断鼠标位置在图片的哪边就行了~·
大概思路就是这样~·
[/Quote]
++
niuniu20008 2011-09-06
- 打赏
- 举报
mousrover 不好吧，应该用单机事件
MuBeiBei 2011-09-06
- 打赏
- 举报
[Quote=引用楼主 ahlaliuchao 的回复:]
有一张图片，鼠标放在图片的右半部分，就显示个向右方向图片
鼠标放在图片的左半部分，就显示个向左方向图片
用mousrover 只能在图片上显示一张图片啊，
求解
[/Quote]
先拿到图片的宽度，然后除以2
onmouseover的时候 判断鼠标位置在图片的哪边就行了~·
大概思路就是这样~·
有一张图片，鼠标放在图片的右半部分，就显示个向右方向图片
鼠标放在图片的左半部分，就显示个向左方向图片
用mousrover 只能在图片上显示一张图片啊，
求解
[/Quote]
先拿到图片的宽度，然后除以2
onmouseover的时候 判断鼠标位置在图片的哪边就行了~·
大概思路就是这样~·
jquery.uploadify-3.1.min.js 修改了SWFUpload.prototype.getFlashHTML （）方法，解决了在ie9在点击上传按钮后，不能弹出浏览文件的对话框问题。
