بابهت: چۆن ئەم برگانە بەیەکەوە ببەستمەوە CSS+HTML لەگەل JAVASCRIPT
بۆ نمونە ئەم فۆتۆ گەلەرییە
بەیەکە ببستمەوە بیانکەم بە بەیەک برگە لە پەریەک یان دەقیک لە هورد پرێسدا دای بنیم
HTML
<div class="nav">
<ul class="nav-imgs" id="nav-imgs">
<li class="nav-img nav-img1">
<a href="javascript:void(0);" target="_blank" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/1.jpg"></a>
</li>
<li class="nav-img nav-img2">
<a href="javascript:void(0);" target="_blank" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/2.jpg"></a>
</li>
<li class="nav-img nav-img3">
<a href="javascript:void(0);" target="_blank" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/3.jpg"></a>
</li>
</ul>
<ul class="nav-texts" id="nav-texts">
<li class="nav-text nav-text1">
<a href="javascript:void(0);" target="_blank" title="some text here">some text here</a>
</li>
<li class="nav-text nav-text2">
<a href="javascript:void(0);" target="_blank" title="some text here">some text here</a>
</li>
<li class="nav-text nav-text3">
<a href="javascript:void(0);" target="_blank" title="some text here">some text here</a>
</li>
</ul>
</div>CSS
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, textarea, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* #Basic Styles
================================================== */
.nav a{display:block;text-decoration:none;color:white;}
.nav{position:relative;width:200px;height:320px;overflow:hidden;}
.nav-imgs{position:absolute;width:999999px;left:0;-webkit-transition:left .5s ease-in-out;-moz-transition:left .5s ease-in-out;-ms-transition:left .5s ease-in-out;-o-transition:left .5s ease-in-out;transition:left .5s ease-in-out;}
.nav-img{float:left;width:200px;height:320px;}
.nav-img img{vertical-align:top;}
.nav-img1{}
.nav-img2{}
.nav-img3{}
.nav-texts{position:absolute;bottom:30px;}
.nav-text{font-weight:700;padding:0 20px;width:140px;height:30px;line-height:30px;filter:alpha(opacity=95);-moz-opacity:.95;-khtml-opacity:.95;opacity:.95;
-webkit-transition:width .25s ease-in-out;-moz-transition:width .25s ease-in-out;-ms-transition:width .25s ease-in-out;-o-transition:width .25s ease-in-out;transition:width .25s ease-in-out;}
.nav-text:hover{width:160px;}
.nav-text1{background-color:#826B99;}
.nav-text2{background-color:#FF7F9F;}
.nav-text3{background-color:#B38F7D;}JAVASCRIPT
var nav_imgs = document.getElementById('nav-imgs');
var nav_texts = document.getElementById('nav-texts');
nav_texts.onmouseover = function(e){
if (e.target.className.indexOf('nav-text1') > -1 || e.target.parentNode.className.indexOf('nav-text1') > -1) {
nav_imgs.style.left = '0';
}else if (e.target.className.indexOf('nav-text2') > -1 || e.target.parentNode.className.indexOf('nav-text2') > -1) {
nav_imgs.style.left = '-200px';
}else if (e.target.className.indexOf('nav-text3') > -1 || e.target.parentNode.className.indexOf('nav-text3') > -1) {
nav_imgs.style.left = '-400px';
}
}ئەوە هەرسی برگەکەیە سوپاس بۆ هاوکریتان
