Question

需要代码帮助我需要一个大的img在中心和一排6个较小的。以下是我到目前为止所做的事情，由于某种原因我无法改变......

<!DOCTYPE html>
<html>
<head>
<title>Assignment 5</title>
</head>
<body onload="conv()">
<img id="img1" style="height:1000px;" src="http://www.albany.edu/~ds857942/Images/globemain.jpg"         alt="taiwan">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globemain.jpg" alt="taiwan">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe2.jpg" alt="car">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe3.jpg" alt="globeC">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe4.jpg" alt="globeD">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe5.jpg" alt="globeE">
<img onmouseover="new()" style="height:100;" src="http://www.albany.edu/~ds857942/Images/globe6.jpg" alt="globeF">

<script>
function conv() {
var a = document.getElementById("img1");
var b = document.getElementsByTagName("img");
a.style.height=0.6* screen.availHeight + "px";
a.style.height= 0.6* screen.availWidth + "px";

for (var x = 1;x<=6;x++) {
b[x].style.height=0.15* screen.availHeight + "px";
b[x].style.height=0.15* screen.availwidth + "px";
}
}
function new(img1){
document.getElementById("img1").src = eval( img1 + b[x].src );  
}
</script>


</body>
</html>

Answer 1

CSS3过渡对此非常有用。只需在CSS中执行以下操作：

body > img {
    height:100px;
    transition:height .5s;
}
body > img:hover {
    height:50px;
}

您似乎目前没有CSS文件，因此我建议您在样式标记内创建一个或将样式添加到head标记。

在鼠标悬停时将中心img更改为较小的

1 个答案: