87,907
社区成员
发帖
与我相关
我的任务
分享jquery 问题求助
做一个简单的图片放大替换功能
代码如下
<a href="images/national-jade-hotel-beijing-b1.jpg" class="imagelink"><img src="images/beijingservice-team/beijing-tour-advisor-1.jpg" width="69" height="49" /></a>
求排错 没反应
代码如下
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
var x = 10;
var y = 20;
$(".imagelink").mouseover(function(e){
var imgtip = "<div id ='imgtip'><img src ='" + this.href + "'alt='' /></div>";
$("body").append(imgtip);
$("#imgtip").css({
"top": (e.pageY+y) + "px",
"left":(e.pageX+x) + "px"
}).show('fast');
}).mouseout(function(){
$("#imgtip").remove();
});
});
</script><a href="images/national-jade-hotel-beijing-b1.jpg" class="imagelink"><img src="images/beijingservice-team/beijing-tour-advisor-1.jpg" width="69" height="49" /></a>
求排错 没反应
...全文
请发表友善的回复…
发表回复
icharme 2012-05-29
- 打赏
- 举报
加个z-index 吧，楼主试试
lario_zjh 2012-05-29
- 打赏
- 举报
给你找了个例子，应该能决解你这个问题，点“运行代码”就好
http://js.alixixi.com/a/2016303062402.shtml
http://js.alixixi.com/a/2016303062402.shtml
lario_zjh 2012-05-29
- 打赏
- 举报
用css定位就好，这个可以不用JS来写，实在不想写CSS的话，你就用table把他框起来排版吧。你那代码要实现更多功能的话，还是把DIV提出来吧
xuhui37208 2012-05-29
- 打赏
- 举报
[Quote=引用 12 楼 的回复:]
上面的代码验证通过，是可以实现楼主要的效果的，应该是楼主没家jQ文件，要在旁边显示的话把mouseout方法去掉就好了
[/Quote]是的 效果是出了 但是 位置 我很头疼 怎么让它在小图的旁边呢 这只是一个图片 如果说还有其他的图片需要放大 怎么也能让他在小图的旁边！求指点！我 CSS白痴一个！
上面的代码验证通过，是可以实现楼主要的效果的，应该是楼主没家jQ文件，要在旁边显示的话把mouseout方法去掉就好了
[/Quote]是的 效果是出了 但是 位置 我很头疼 怎么让它在小图的旁边呢 这只是一个图片 如果说还有其他的图片需要放大 怎么也能让他在小图的旁边！求指点！我 CSS白痴一个！
lario_zjh 2012-05-29
- 打赏
- 举报
上面的代码验证通过，是可以实现楼主要的效果的，应该是楼主没家jQ文件，要在旁边显示的话把mouseout方法去掉就好了
xuhui37208 2012-05-29
- 打赏
- 举报
位置不对 怎么调整大图的位置呢 就显示在小图的旁边就好
xuhui37208 2012-05-29
- 打赏
- 举报
[Quote=引用 9 楼 的回复:]
测试没问题。你是不是没有加载jQuery文件啊。。确定已加载的话在Chrome错误控制台下看看报什么错误。
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml……
[/Quote]谢谢 我再看看
测试没问题。你是不是没有加载jQuery文件啊。。确定已加载的话在Chrome错误控制台下看看报什么错误。
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml……
[/Quote]谢谢 我再看看
乌镇程序员 2012-05-25
- 打赏
- 举报
测试没问题。你是不是没有加载jQuery文件啊。。确定已加载的话在Chrome错误控制台下看看报什么错误。
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var x = 10;
var y = 20;
$(".imagelink").mouseover(function(e) {
var imgtip = "<div id ='imgtip'><img src ='" + this.href + "'alt='' /></div>";
$("body").append(imgtip);
$("#imgtip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show('fast');
}).mouseout(function() {
$("#imgtip").remove();
});
});
</script>
</head>
<body>
<a href="http://www.google.com.hk/images/srpr/logo3w.png" class="imagelink"><img src="http://www.google.com.hk/images/srpr/logo3w.png" width="69" height="49" /></a>
</body>
</html>
三石-gary 2012-05-25
- 打赏
- 举报
运行没错啊
xuhui37208 2012-05-25
- 打赏
- 举报
[Quote=引用 2 楼 的回复:]
JScript code
$(".imagelink").mouseover(function(e){
#改成
$(".imagelink").live("mouseover",function(){
[/Quote] 一样的结果 蛋疼 没效果！
JScript code
$(".imagelink").mouseover(function(e){
#改成
$(".imagelink").live("mouseover",function(){
[/Quote] 一样的结果 蛋疼 没效果！
༺ཌༀཉི浮华背后༃ༀད༻ 2012-05-25
- 打赏
- 举报
$(".imagelink").mouseover(function(e){
#改成
$(".imagelink").live("mouseover",function(){
qq120848369 2012-05-25
- 打赏
- 举报
按道理说应该转到js板块。
