Css 图像查看器在点击时移动页面答案

【问题标题】：Css image viewer is moving page on clickCss 图像查看器在点击时移动页面
【发布时间】：2011-12-27 02:01:55
【问题描述】：

当我单击侧面的选项卡时，它会更改图片，这是我想要的，但它也会移动页面，因此视图位于顶部。我注意到只有当下面还有页面内容时才会发生这种情况，这就是为什么在这个例子中我放了很多换行符。

如果您想要一个更好的例子来说明我的意思，这里是我的页面的链接：

dl.dropbox.com/u/8391091/Ebay%20page.html

我放在这里的代码只是图像查看器（css，html）

            /* Setup Tabs */

            #view ul{

            margin-top: 0;
            background: black;
            width: 85px; /* Width of Tab Image */
            float: left;
            list-style: none;
            border-right:8px solid grey;
            }

            #view ul li{

            margin-left: -40px;
            margin-right: -40px;
            height:75px; /* Height of Tab Image */
            }

            /* Setup Tab so normal opacity is 40 and rollover is 100 */
            #view ul li a img{
            border: 0px;    
            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
            filter:alpha(opacity=50);

            /* CSS3 standard */
            opacity:0.5;

            }

            /* Change Opacity to 100% on hover*/
            #view ul li a:hover img{

            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter:alpha(opacity=100);

            /* CSS3 standard */
            opacity: 1.0;
            }

            /* Places images to the right of the tabs,
            and hides non selected images */
            #images{

            width: 500px; 
            height: 300px; 
            overflow: hidden;  /* Hides the non selected images */
            float: left;
            }

            /* Square border around viewer*/
            #wrapper{
            outline-style: none;
            border-top-left-radius: 5px 5px;
            border-top-right-radius: 5px 5px;
            border-bottom-left-radius: 5px 5px;
            border-bottom-right-radius: 5px 5px;
            -moz-border-radius-topleft: 5px 5px;
            -moz-border-radius-topright: 5px 5px;
            -moz-border-radius-bottomleft: 5px 5px;
            -moz-border-radius-bottomright: 5px 5px;
            width: 633px;
            height: 300px;
            border: 10px solid grey;
            margin: 0px auto;
            }
            </style>

            <div id="section1">
            <div id="view">
            <div id="wrapper">
            <!-- Tabs -->
            <ul>
            <li><a href="#image1" id="tab1"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="125" height="75"/></a></li>
            <li><a href="#image2" id="tab2"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="125" height="75"/></a></li>
            <li><a href="#image3" id="tab3"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="125" height="75"/></a></li>
            <li><a href="#image4" id="tab4"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="125"           height="75"/></a></li>
            </ul>

            <!-- Images -->
            <div id="images">
            <div><a name="image1"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="500" height="300" /></div>
            <div><a name="image2"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="500" height="300" /></div>
            <div><a name="image3"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="500" height="300" /></div>
            <div><a name="image4"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="500" height="300" /></div>
            </div>
            </div>      
            </div>
            <p class="text" align="center">(Click tabs at side for larger picture)</p>      
            </div>

            </br>
            </br>
            </br>
            </br>
            </br>

            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            More page content
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>

【问题讨论】：

标签： css image viewer

【解决方案1】：

它使用片段标识符（在 url 中：“#image1”），这是默认行为。当您将这些用于跳转链接时，它会将 id 的元素带到页面顶部的 url 中。现在要解决这个问题，我不确定，但我现在就试试！那这个呢？\ http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml 您可以只进行一次翻转并在大图上进行跨度，将其可见性从隐藏变为可见。这就是你通常的做法。你只需要稍微改变你的代码，让所有的大图片相互堆叠，而不是被溢出隐藏。

【讨论】：

您知道修复它的代码吗？我的查看器看起来会有所不同吗？
否。用户无需点击图片，只需将鼠标悬停即可。

【解决方案2】：

a href="#viewer">
<img src="../Photo_Gallery/thumbs/pic1.jpg">
<span>
<img src="../Photo_Gallery/pic1.jpg">
<br>
   optional caption
</span>
</a>

所以你把主图放在一个跨度中。

.rollover li a span {
      visibility: hidden;
}
.rollover a:hover, .rollover a:hover span, .rollover a:active, .rollover a:active
span, .rollover a:focus, .rollover a:focus span {
      visibility: visible;
}

这就是他们在教程中的做法。因此，不要像您一样将所有图片排成一行并使用溢出：隐藏。将每张图片放在各自的缩略图下，而不是将它们放在彼此的顶部隐藏。但问题是，他们这样做的方式，页面加载时没有显示图片。所以我会想办法解决这个问题。

【讨论】：