css问题 - css吧

level 13

挖掘机处女座楼主

鼠标经过小图，怎样在右图放大显示

2015年07月30日 11点07分 1

level 1

与你相守Y

用js控制啊。很简单的。

2015年07月30日 15点07分 2

level 10

中花尼0Z

虽然不懂，但是还是要来发一下html/css/js/php交流讨论群 271249114

2015年07月31日 00点07分 3

level 5

蚜虫一族

这个需要js了。纯CSS无法实现

2015年07月31日 07点07分 4

level 8

猪的腰花

<!DODCTYPE HTML>
<html>
<head>
<meta charset="GB2312" />
<title>
简易图片册
</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#box {
margin-top:10px;
margin-left:10px;
border:2px solid #666;
background-color:#ccc;
}
table,tr,td {
border:none;
}
td {
margin:2px;
}
table tr td img {
display:block;/*不但可以消除图片下边框外的空隙，还使img支持hover伪状态*/
border:none;
opacity:0.4;
-webkit-opacity:0.4;
-moz-opacity:0.4;
}
table tr td img:hover {
opacity:1.0;
-webkit-opacity:1.0;
-moz-opacity:1.0;
}
#ImgList {
float:left;
margin:0;
}
#BigImg {
float:left;
width:349px;
height:270px;
padding:2px;
margin:0;
text-align:center;
}
#BigImg h3 {
margin-top:120px;
color:#666;
}
#box .clear {
clear:both;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("box");
var oTb=document.getElementById("ImgList");/*不要写成var oTb=oDiv.getElementById("ImgList");会报错，使用id获取的，直接用document即可*/
var aImg=oTb.getElementsByTagName("img");
var oBigImg=document.getElementById("BigImg");
for(i=0;i<aImg.length;i++)
{
aImg[i].index=i;
aImg[i].onmouseover=function()
{
oBigImg.innerHTML="<img src='"+this.src+"' width='100%' height='100%' />";
};
aImg[i].onmouseout=function()
{
oBigImg.innerHTML="<h3>请在左侧选择要预览的图片</h3>";
};
}
};
</script>
</head>
<body>

<div id="box">
<table id="ImgList">
<tr><td><img src="Book.jpg" /></td><td><img src="Book2.jpg" /></td><td><img src="Book.jpg" /></td><td><img src="Book.jpg" /></td><td><img src="Book.jpg" /></td></tr>
<tr><td><img src="Book.jpg" /></td><td><img src="Book.jpg" /></td><td><img src="Book.jpg" /></td><td><img src="Book.jpg" /></td><td><img src="Book.jpg" /></td></tr>
</table>
<div id="BigImg">
<h3>请在左侧选择要预览的图片</h3>
</div>
<div class="clear"></div>
</div>
</body>
</html>
这个够用不？！

2015年08月11日 10点08分 5