Есть код: | Код | <html>
<head>
<title>Test</title>
<style type="text/css">
html , body {
height: 100% ;
width: 100% ;
margin: 0 ;
padding: 0 ;
}
.photogallery-tiny-wrapper {
display: block ;
margin: 0 auto ;
height: 50px ;
text-align: center ;
background-color: #FAFAFA ;
border: 1px gray solid ;
padding: 5px ;
}
.photogallery-tiny-sub-wrapper {
display: inline-block ;
margin: 0 auto ;
height: 100% ;
}
.photogallery-tiny-item {
display: block ;
height: 100% ;
width: 50px ;
background-image: url( "http://kleo.ru/resize/galleries/1000x45/img/galleries/1/1477_0-1600x1067.jpg" ) ;
background-size: contain ;
background-position: center ;
background-repeat: no-repeat ;
float: right ;
font-size: 0 ;
overflow: hidden ;
}
.photogallery-tiny-image {
width: 100% ;
height: 300% ;
float: right ;
cursor: pointer ;
}
.photogallery-tiny-image ~ .photogallery-tiny-subitem {
cursor: pointer ;
width: 48px ;
height: 48px ;
border: 1px blue solid ;
transition-property: opacity ;
transition-timing-function: ease-in-out ;
transition-duration: 0.7s ;
background-color: transparent ;
}
.photogallery-tiny-image:checked ~ .photogallery-tiny-subitem {
opacity: 0.5 ;
border: 1px red solid ;
background-color: #FFFFFF ;
}
.photogallery-large-wrapper {
display: block ;
margin: 0 auto ;
height: 50px ;
width: 50px ;
text-align: center ;
background-color: #FAFAFA ;
padding: 5px ;
overflow: hidden ;
}
.photogallery-large-sub-wrapper {
display: inline-block ;
margin: 0 auto ;
height: 50px ;
width: 420px ;
transition-property: left ;
transition-duration: 0.7s ;
transition-timing-function: ease-in-out ;
}
.photogallery-large-image {
display: block ;
float: right ;
border: 1px black solid ;
width: 50px ;
height: 50px ;
}
.photogallery-large-image:target {
background: red ;
}
</style>
</head>
<body>
<div class="photogallery-large-wrapper">
<form class="photogallery-large-sub-wrapper">
<a name="photogallery-large-image-1" class="photogallery-large-image"></a>
<a name="photogallery-large-image-2" class="photogallery-large-image"></a>
<a name="photogallery-large-image-3" class="photogallery-large-image"></a>
<a name="photogallery-large-image-4" class="photogallery-large-image"></a>
<a name="photogallery-large-image-5" class="photogallery-large-image"></a>
<a name="photogallery-large-image-6" class="photogallery-large-image"></a>
<a name="photogallery-large-image-7" class="photogallery-large-image"></a>
<a name="photogallery-large-image-8" class="photogallery-large-image"></a>
</form>
</div>
<div class="photogallery-tiny-wrapper">
<form class="photogallery-tiny-sub-wrapper">
<a class="photogallery-tiny-item" href="#photogallery-large-image-1">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-1"/>
<div class="photogallery-tiny-subitem"></div>
</a>
<a class="photogallery-tiny-item" href="#photogallery-large-image-2">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-2"/>
<div class="photogallery-tiny-subitem"></div>
</a>
<a class="photogallery-tiny-item" href="#photogallery-large-image-3">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-3"/>
<div class="photogallery-tiny-subitem"></div>
</a>
<a class="photogallery-tiny-item" href="#photogallery-large-image-4">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-4"/>
<div class="photogallery-tiny-subitem"></div>
</a>
<a class="photogallery-tiny-item" href="#photogallery-large-image-5">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-5"/>
<div class="photogallery-tiny-subitem"></div>
</a>
<a class="photogallery-tiny-item" href="#photogallery-large-image-6">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-6"/>
<div class="photogallery-tiny-subitem"></div>
</a>
<a class="photogallery-tiny-item" href="#photogallery-large-image-7">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-7"/>
<div class="photogallery-tiny-subitem"></div>
</a>
<a class="photogallery-tiny-item" href="#photogallery-large-image-8">
<input type="radio" name="image" class="photogallery-tiny-image" id="photogallery-tiny-image-8"/>
<div class="photogallery-tiny-subitem"></div>
</a>
</form>
</div>
</body>
</html> |
Хочется без JavaScript добавить плавную прокрутку .photogallery-large-sub-wrapper Как сделать? |
Отследить прокрутку, CSS3 
Загрузка ...
