请问,鼠标经过图片显示图片原图大小怎么实现? 我网页有500张10*10的图片,每张图片原始大小不一样,有的是100*50,有的是800*600我想实现鼠标经过图片上,图片显示原图大小,怎么办? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 是要显示原图还是只显示原图尺寸?显示原图页面显示10*10小图,把放原图的div隐藏,鼠标经过时显示该div显示原图尺寸把原图的尺寸放img的title=""里... 页面代码:建议你页面上放的是图片的缩略图(如果是大图,会影响js事件的响应速度,这个我自己碰到过得,做过无数次测试。)命名:缩略图可以前缀或后缀或文件夹来区分,比如缩略图small_pic.jpg,原图big_pic.jpgjs调用:比如mouserover时显示或动态改变图片地址mouseover=function(){small_pic.src="big_pic.jpg"} 可以看一下jquery,有一个实现此功能的组件,非常简单好用。 不知道这里有没有楼主想要的效果,如果有的话,给分吧,谢谢......http://www.cnblogs.com/cloudgamer/archive/2010/04/14/ImageZoom_ext.html $(' img').mouseenter(function(){ $(this).data('width', $(this).css('width') $(this).css('width','');}.mouseleave(function(){ $(this).css('width', $(this).data('width'));} 直接写一个层,然后将其img放入此层中当鼠标移上去的时候 显示层,层内的图片不要设置其height和width即可,它显示的就是图片的原本大小。 <html> <head> <title>AAAAAAA</title> </head> <body> <img src="123.png" style="width: 10px; height: 10px;" onmouseout="this.style.width = '10px'; this.style.height = '10px';" onmouseover="this.style.width = null; this.style.height = null;" /> </body></html> 用 CSS 的,你看看这样可以不?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>试试</title></head><style type="text/css">p { text-indent:2em; }img { border:0; }#txt { font-size:18px; line-height:25px; }.scala-img { position:relative; margin:0; }.scala-img .small { width:1em; }.scala-img .large { display:none; border:none; }.scala-img:hover .large { display:block; position:absolute; left:0em; top:0em; border:2px solid #dcdcdc; }</style><body> <div id="txt"> <p>我网页有500张10*10的图片,每张图片原始大小不一样,有的是100*50, <span class="scala-img"> <img src="http://avatar.csdn.net/4/3/9/3_wdpjs3.jpg" class="small" /> <img src="http://avatar.csdn.net/4/3/9/1_wdpjs2.jpg" class="large" /> </span>有的是800*600我想实现鼠标经过图片上,图片显示原图大小,怎么办?</p> </div></body></html> js根据开始时间计算截止时间 如何比较函数/对象是否相等 关于表单验证 请教一个jquery问题 关于图片幻灯片问题 上下结构的框架集的上框架使用iframe高度的问题 Eclipse开发Web的第一个牛刀小试 关于浏览器窗口关闭时的问题 请教各位兄弟,文本框输入数字替换为字符的问题 急救!请教如何通过applet实现网上历史曲线功能,类似股票行情的东东!!!!!!!!!!! 如何在网页中检测本地运行的程序 求教unescape后中文变成乱码的问题
页面显示10*10小图,把放原图的div隐藏,鼠标经过时显示该div显示原图尺寸
把原图的尺寸放img的title=""里...
命名:缩略图可以前缀或后缀或文件夹来区分,比如缩略图small_pic.jpg,原图big_pic.jpg
js调用:比如mouserover时显示或动态改变图片地址mouseover=function(){small_pic.src="big_pic.jpg"}
http://www.cnblogs.com/cloudgamer/archive/2010/04/14/ImageZoom_ext.html
$(this).data('width', $(this).css('width')
$(this).css('width','');
}.mouseleave(function(){
$(this).css('width', $(this).data('width'));
}
<html>
<head>
<title>AAAAAAA</title>
</head>
<body>
<img src="123.png" style="width: 10px; height: 10px;" onmouseout="this.style.width = '10px'; this.style.height = '10px';" onmouseover="this.style.width = null; this.style.height = null;" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>试试</title>
</head><style type="text/css">
p { text-indent:2em; }
img { border:0; }
#txt { font-size:18px; line-height:25px; }
.scala-img { position:relative; margin:0; }
.scala-img .small { width:1em; }
.scala-img .large { display:none; border:none; }
.scala-img:hover .large { display:block; position:absolute; left:0em; top:0em; border:2px solid #dcdcdc; }
</style><body>
<div id="txt">
<p>我网页有500张10*10的图片,每张图片原始大小不一样,有的是100*50,
<span class="scala-img">
<img src="http://avatar.csdn.net/4/3/9/3_wdpjs3.jpg" class="small" />
<img src="http://avatar.csdn.net/4/3/9/1_wdpjs2.jpg" class="large" />
</span>有的是800*600我想实现鼠标经过图片上,图片显示原图大小,怎么办?</p>
</div>
</body>
</html>