Question

当我点击侧面的标签时，它会更改图片，这是我想要它做的，但它也会移动页面以使视图位于顶部。我注意到这只发生在下面的页面内容时，这就是为什么在这个例子中我放了很多换行符。

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

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>

Answer 1

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

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

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

Css图像查看器正在点击移动页面

2 个答案: