Javascript 如何在MouseOver上自动滚动一个div并隐藏该div的滚动条？_Javascript_Html_Onmouseover_Autoscroll

Javascript 如何在MouseOver上自动滚动一个div并隐藏该div的滚动条？

javascript html

Javascript 如何在MouseOver上自动滚动一个div并隐藏该div的滚动条？,javascript,html,onmouseover,autoscroll,Javascript,Html,Onmouseover,Autoscroll,我想在MouseOver或使用图像映射自动克隆特定元素。我还想隐藏该分区的滚动条。问题是我不知道该怎么做。我已经学习javascript好几个星期了，我只学到了无用的部分。也就是说，没有任何东西真正适用于网页设计。我用谷歌搜索了一下，没有任何东西能给出我想要的确切答案，我也无法调整这些例子来为我工作代码在jsfiddle.net上，除非我违反了一条不成文的规则，请告诉我，我会发布链接。求你了，求你了！不要只是给我一个答案，因为我是初学者。请解释你的解决方案。非常感谢你我决定添加代码，因为

我想在MouseOver或使用图像映射自动克隆特定元素。我还想隐藏该分区的滚动条。问题是

我不知道该怎么做。我已经学习javascript好几个星期了，我只学到了无用的部分。也就是说，没有任何东西真正适用于网页设计。我用谷歌搜索了一下，没有任何东西能给出我想要的确切答案，我也无法调整这些例子来为我工作

代码在jsfiddle.net上，除非我违反了一条不成文的规则，请告诉我，我会发布链接。求你了，求你了！不要只是给我一个答案，因为我是初学者。请解释你的解决方案。非常感谢你

我决定添加代码，因为我在这样做之前已经得到了即时响应

<!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>&nbsp;&nbsp; <!-- Beginning of Footer -->
            <a href="#privacyStatement">Privacy Statement</a>&nbsp;&nbsp;
            <a href="#contact">Contact Us</a>&nbsp;&nbsp;
            <a href="#careers">Careers</a>&nbsp;&nbsp;
            <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;
}


滚动图片
工作
教育类
技能
身体{
溢出：隐藏；
左边距：0；
边际上限：0；
}
div#滚动{
右边框：1px实心橙色；
位置：绝对位置；
z指数：2；
浮动：左；
宽度：200px；
身高：100%；
溢出：自动；
溢出x：隐藏；
}
左边{
z-索引：继承；
浮动：左；
宽度：200px；
最小高度：200px；/*适用于现代浏览器*/
高度：自动！重要；/*适用于现代浏览器*/
高度：200px；/*适用于IE5.x和IE6*/
不透明度：0.4；
过滤器：α（不透明度=40）；
}
#图1、图2、图3{
宽度：200px；
}
左边：悬停{
不透明度：1；
}
渐变顶{
位置：绝对位置；
边际上限：0；
z指数：2；
宽度：206px；
高度：30px；
浮动：左；
背景：-webkit线性梯度（rgba（255255,2），rgba（255255,0））
}
分段梯度底部{
位置：绝对位置；
边缘底部：50px；
z指数：2；
宽度：206px；
高度：120px；
浮动：左；
底部：-210px；
背景：-webkit线性梯度（rgba（255255,0），rgba（255255,1））
}
.小组{
字号：2em；
右：5%；
垫顶：7%；
身高：100%；
}
#工作{
宽度：100%；
z指数：0；
颜色：橙色；
位置：相对位置；
文本对齐：右对齐；
最大高度：500px；
背景色：#fff；
最小高度：200px；/*适用于现代浏览器*/
最小宽度：700px；
高度：自动！重要；/*适用于现代浏览器*/
高度：500px；/*适用于IE5.x和IE6*/
}
#教育{
宽度：100%；
z指数：0；
颜色：橙色；
位置：相对位置；
文本对齐：右对齐；
最大高度：500px；
背景色：#fff；
最小高度：200px；/*适用于现代浏览器*/
最小宽度：700px；
高度：自动！重要；/*适用于现代浏览器*/
高度：500px；/*适用于IE5.x和IE6*/
}
#技巧{
宽度：100%；
z指数：0；
颜色：橙色；
位置：相对位置；
文本对齐：右对齐；
最大高度：500px；
背景色：#ffe；
最小高度：200px；/*适用于现代浏览器*/
最小宽度：700px；
高度：自动！重要；/*适用于现代浏览器*/
高度：500px；/*适用于IE5.x和IE6*/
}
#工作：盘旋，#教育：盘旋，#技能：盘旋{
z指数：0；
背景色：#F0F9；
边框顶部：1px实心#d0；
边框底部：1px实心#e0；
}
#工作：主动，#教育：主动，#技能：主动{
z指数：0；
背景色：#ededf2；
边框顶部：1px实心#d0；
边框底部：1px实心#e0；
}
潜水面罩{
位置：相对位置；
z指数：1；
边缘顶部：5px；
浮动：左；
宽度：206px；
高度：805px；
背景色：白色；
}
#页脚{
背景：白色；
z指数：3；
位置：绝对位置；
字体变体：正常；
文本缩进：5%；
颜色：#333；
明确：两者皆有；
高度：50px；
填充顶部：20px；
}

如何隐藏滚动条：将div上的css属性

overflow

设置为

hidden

：

<div style="overflow:hidden"></div>

如何在鼠标上方执行操作：勾选本页：

这是样品。

祝你好运，谢谢。我不确定将溢出更改为隐藏是否仍然允许我自动滚动div。这样做很有效。这只允许我在div上悬停，让它向下移动50px，无论我在div上悬停在哪里，它都会反弹回这个位置。我正在寻找（伪代码）：div.onmouseover top 25%>x>20%以z速度滚动顶部div.onmouseover top 20%>x>10%以z+1速度滚动顶部div.onmouseover top 10%>x>0%以z+2速度滚动顶部底部的想法相同。我在寻找那种效果，而不是那种特定类型的语法。

var div = document.getElementById(someId);
div.scrollTop = 50;

var div = document.getElementById(someId);
div.onmouseover = function() {
    // do something here
};