【发布时间】：2011-09-17 12:36:55
【问题描述】：
我想在鼠标悬停或使用图像映射时自动滚动特定元素。我还想隐藏该 div 的滚动条。问题是……
我不明白该怎么做。我已经学习 javascript 几个星期了，我只学习了无用的部分。没有什么真正适用于网页设计，就是这样。我用谷歌搜索了它，但没有给出我正在寻找的确切答案，我也无法调整这些示例来为我工作。
除非我违反了不成文的规则，否则代码在 jsfiddle.net 上，请告诉我，我只会发布链接。拜托拜托！不要只给我答案，因为我是初学者。请解释您的解决方案。非常感谢！
http://jsfiddle.net/thindjinn/KQP9t/2/
决定添加代码，因为在此之前我已经得到了即时响应。
<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
<script src="/scrollingPictures.js"></script>
</head>
<body>
<div class="mask"></div> <!-- White behind images, to keep color consistent when low transparency -->
<div id="scroll">
<img class="left" id="image1" src="http://www.yalibnan.com/wp-content/uploads/2011/02/steve-jobs1.jpg" alt="Steve Jobs"/>
<img class="left" id="image2" src="http://www.power-of-giving.com/image-files/achievements-of-richard-branson.jpg" alt="Richard Branson"/>
<img class="left" id="image3" src="http://static5.businessinsider.com/image/4b16d0c70000000000134152/anderson-cooper.jpg" alt="Anderson Cooper"/>
<img class="left" id="image3" src="http://swandiver.files.wordpress.com/2009/03/rachel-maddow.jpg?w=288&h=371" alt="Rachel Maddow"/>
<img class="left" id="image3" src="http://img2.timeinc.net/people/i/2006/celebdatabase/kanyewest/kanye_west1_300_400.jpg" alt="Kanye West"/>
<img class="left" id="image3" src="http://img1.browsebiography.com/images/gal/2627_Larry_Page_photo_1.jpg" alt="Larry Page"/>
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
<div id="work"><div class="panel">Work</div></div>
<div id="education"><div class="panel">Education</div></div>
<div id="skills"><div class="panel">Skills</div></div>
<div id="footer"> <a href="#home">Home</a> <!-- Beginning of Footer -->
<a href="#privacyStatement">Privacy Statement</a>
<a href="#contact">Contact Us</a>
<a href="#careers">Careers</a>
<a href="#moreInfo">More Info</a>
</div>
</body>
</html>
body{
overflow:hidden;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
height:100%;
overflow:auto;
overflow-x:hidden;
}
img.left{
z-index:inherit;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}
img.left:hover{
opacity:1;
}
div.gradientTop{
position:absolute;
margin-top:0;
z-index:2;
width:206px;
height:30px;
float:left;
background:-webkit-linear-gradient(rgba(255,255,255,2), rgba(255,255,255,0))
}
div.gradientBottom{
position:absolute;
margin-bottom:50px;
z-index:2;
width:206px;
height:120px;
float:left;
bottom:-210px;
background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
.panel{
font-size:2em;
padding-right:5%;
padding-top:7%;
height:100%;
}
#work{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#education{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#skills{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#ffe;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#work:hover,#education:hover,#skills:hover{
z-index:0;
background-color:#f0f0f9;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
#work:active,#education:active,#skills:active{
z-index:0;
background-color:#ededf2;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
div.mask{
position:relative;
z-index:1;
margin-top:5px;
float:left;
width:206px;
height:805px;
background-color:white;
}
#footer {
background:white;
z-index:3;
position:absolute;
font-variant:normal;
text-indent:5%;
color:#333;
clear:both;
height:50px;
padding-top:20px;
}
【问题讨论】：
标签： javascript html onmouseover autoscroll