課程
/前端開(kāi)發(fā)
/HTML/CSS
/CSS3+JS 實(shí)現(xiàn)超炫的散列畫(huà)廊特效
為什么我的按鈕點(diǎn)了其他圖片 它之前的按鈕樣式一直存在
2017-03-23
源自：CSS3+JS 實(shí)現(xiàn)超炫的散列畫(huà)廊特效 3-6
正在回答
css樣式里面? ?在?i:affter 里面加上?opacity: 0; 然后再 i_current:affter 里面加上??opacity: 1; 應(yīng)該就可以了
// 5. 排序海報(bào)
function rsort(n){
_photo = g('.photo');
var photos = [];
for(s=0;s<_photo.length;s++){
_photo[s].className = _photo[s].className.replace(/\s*photo_center\s*/,' ');
//要加上
_photo[s].className = _photo[s].className.replace(/\s*photo_front\s*/,' ');
_photo[s].className = _photo[s].className.replace(/\s*photo_back\s*/,' ');
_photo[s].className += ' photo_front ';
_photo[s].style.left = '';
_photo[s].style.top = '';
_photo[s].style['-webkit-transform'] = 'rotate(360deg)';
photos.push(_photo[s]);
}
var photo_center = g('#photo_' + n);
photo_center.className += ' photo_center ';
photo_center = photos.splice(n, 1)[0];
// 把海報(bào)分為左、 右區(qū)域兩個(gè)部分
var photos_left = photos.splice(0, Math.ceil(photos.length/2));
var photos_right = photos;
var ranges = range();
for(s in photos_left){
var photo = photos_left[s];
photo.style.left = random(ranges.left.x) + 'px';
photo.style.top = random(ranges.left.y) + 'px';
photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+'deg)';
for(s in photos_right){
var photo = photos_right[s];
photo.style.left = random(ranges.right.x) + 'px';
photo.style.top = random(ranges.right.y) + 'px';
var navs = g('.i');
for(var s=0;s<navs.length;s++){
navs[s].className = navs[s].className.replace(/\s*i_current\s*/, ' ');
navs[s].className = navs[s].className.replace(/\s*i_back\s*/, ' ');
g( '#nav_'+n ).className += ' i_current ';?
console.log(photos_left.length, photos_right.length);
舉報(bào)
實(shí)現(xiàn)更自由的切換照片的畫(huà)廊效果，打造超酷的切換動(dòng)畫(huà)
1 回答要字體圖標(biāo)，可以看看
1 回答個(gè)人把HTML代碼改了一下，不知老師可否看下，感覺(jué)更加簡(jiǎn)單，各位同學(xué)也可以看看
1 回答沒(méi)效果的自己看
5 回答源代碼，有幾個(gè)問(wèn)題，大家可以看看，就是我覺(jué)得 .photo_wrap 只是把圖片翻轉(zhuǎn)好，而 .photo_font .photo_wrap 才是真正的翻轉(zhuǎn)，不知道說(shuō)得對(duì)不對(duì)，老師也看看唄！
2 回答求解 為什么正面看不到
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-11-16
css樣式里面? ?在?i:affter 里面加上?opacity: 0; 然后再 i_current:affter 里面加上??opacity: 1; 應(yīng)該就可以了
2017-03-24
// 5. 排序海報(bào)
function rsort(n){
_photo = g('.photo');
var photos = [];
for(s=0;s<_photo.length;s++){
_photo[s].className = _photo[s].className.replace(/\s*photo_center\s*/,' ');
//要加上
_photo[s].className = _photo[s].className.replace(/\s*photo_front\s*/,' ');
_photo[s].className = _photo[s].className.replace(/\s*photo_back\s*/,' ');
_photo[s].className += ' photo_front ';
_photo[s].style.left = '';
_photo[s].style.top = '';
_photo[s].style['-webkit-transform'] = 'rotate(360deg)';
//要加上
photos.push(_photo[s]);
}
var photo_center = g('#photo_' + n);
photo_center.className += ' photo_center ';
photo_center = photos.splice(n, 1)[0];
// 把海報(bào)分為左、 右區(qū)域兩個(gè)部分
var photos_left = photos.splice(0, Math.ceil(photos.length/2));
var photos_right = photos;
var ranges = range();
for(s in photos_left){
var photo = photos_left[s];
photo.style.left = random(ranges.left.x) + 'px';
photo.style.top = random(ranges.left.y) + 'px';
photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+'deg)';
}
for(s in photos_right){
var photo = photos_right[s];
photo.style.left = random(ranges.right.x) + 'px';
photo.style.top = random(ranges.right.y) + 'px';
photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+'deg)';
}
var navs = g('.i');
for(var s=0;s<navs.length;s++){
navs[s].className = navs[s].className.replace(/\s*i_current\s*/, ' ');
navs[s].className = navs[s].className.replace(/\s*i_back\s*/, ' ');
}
g( '#nav_'+n ).className += ' i_current ';?
console.log(photos_left.length, photos_right.length);
}