如何在鼠标悬停时自动滚动 div 并隐藏该 div 的滚动条？

发布于 2024-12-05 05:41:37 字数 5433 浏览 1 评论 0原文

我想在鼠标悬停时或使用图像映射自动滚动特定元素。我还想隐藏该 div 的滚动条。问题是...

我不明白该怎么做。我已经学习 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;
}

原文

I want to autoscroll a particular element either onmouseover or using an image map. I also want to hide the scrollbars for that 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. 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. 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/

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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千鲤 2024-12-12 05:41:37

如何隐藏滚动条：

将div上的css属性overflow设置为hidden：

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

如何滚动div：

该元素有一个scrollTop属性，该属性是滚动条的像素数量元素已滚动。您可以通过分配此属性来滚动元素：

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

如何在鼠标悬停时执行某些操作：

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

How do hide scrollbars:

Set the css property overflow to hidden on the div:

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

How to scroll the div:

The element has a scrollTop property, which is the amount of pixels the element has been scrolled. You can scroll the element by assigning to this property:

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

How to do something on mouseover:

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

回复收藏 0 原文

音栖息无 2024-12-12 05:41:37

检查此页面：
http://valums.com/vertical-scrolling-menu/

这就是示例。
http://valums.com/files/2009/vertical-menu/final.htm祝

你好运

回复收藏 0 原文

~没有更多了~

关于作者

你与昨日

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何在鼠标悬停时自动滚动 div 并隐藏该 div 的滚动条？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

如何隐藏滚动条：

如何滚动div：

如何在鼠标悬停时执行某些操作：

How do hide scrollbars:

How to scroll the div:

How to do something on mouseover:

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如何在鼠标悬停时自动滚动 div 并隐藏该 div 的滚动条？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

如何隐藏滚动条：

如何滚动div：

如何在鼠标悬停时执行某些操作：

How do hide scrollbars:

How to scroll the div:

How to do something on mouseover:

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。