[英]How can I autoscroll a div onmouseover and hide the scrollbar for that div?
I want to autoscroll a particular element either onmouseover or using an image map. 我想在onmouseover或使用图像映射自动滚动特定元素。 I also want to hide the scrollbars for that div. 我还想隐藏该div的滚动条。 The problem is... 问题是...
I don't understand how to do this. 我不明白该怎么做。 I've been learning javascript for weeks now and I've only learned the useless parts. 我已经学习了几个星期的JavaScript,我只学习了无用的部分。 Nothing actually applicable to web design, that is. 什么都不适用于网页设计,即。 I did google it and nothing gave me the exact answer I was looking for, nor was I able to tweak those examples to work for me. 我确实谷歌它并没有给我我正在寻找的确切答案,也没有能够调整这些例子为我工作。
The code is on jsfiddle.net unless I'm breaking an unwritten rule, and please just let me know, I will just post the link. 代码在jsfiddle.net上,除非我打破了一条不成文的规则,请告诉我,我会发布链接。 Please please please! 请拜托! don't just give me an answer, as I am a beginner. 不要只是给我一个答案,因为我是初学者。 Please explain your solution. 请解释你的解决方案。 Thank you so much! 非常感谢!
http://jsfiddle.net/thindjinn/KQP9t/2/ http://jsfiddle.net/thindjinn/KQP9t/2/
Decided to add the code, because I've gotten immediate responses before when doing that. 决定添加代码,因为我在执行此操作之前已经立即做出响应。
<!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;
}
Set the css property overflow
to hidden
on the div: 将div的css属性overflow
设置为hidden
:
<div style="overflow:hidden"></div>
The element has a scrollTop property, which is the amount of pixels the element has been scrolled. 该元素具有scrollTop属性,该属性是元素滚动的像素数量。 You can scroll the element by assigning to this property: 您可以通过分配此属性来滚动元素:
var div = document.getElementById(someId);
div.scrollTop = 50;
var div = document.getElementById(someId);
div.onmouseover = function() {
// do something here
};
Chech this page: http://valums.com/vertical-scrolling-menu/ Chech this page: http : //valums.com/vertical-scrolling-menu/
And this is the sample. 这是样本。 http://valums.com/files/2009/vertical-menu/final.htm http://valums.com/files/2009/vertical-menu/final.htm
Good luck 祝好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.