課程
/前端開發
/HTML/CSS
/CSS3+JS 實現超炫的散列畫廊特效
為什么我的按鈕點了其他圖片 它之前的按鈕樣式一直存在
2017-03-23
源自:CSS3+JS 實現超炫的散列畫廊特效 3-6
正在回答
css樣式里面? ?在?i:affter 里面加上?opacity: 0; 然后再 i_current:affter 里面加上??opacity: 1; 應該就可以了
// 5. 排序海報
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];
// 把海報分為左、 右區域兩個部分
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);
舉報
實現更自由的切換照片的畫廊效果,打造超酷的切換動畫
1 回答要字體圖標,可以看看
1 回答個人把HTML代碼改了一下,不知老師可否看下,感覺更加簡單,各位同學也可以看看
1 回答沒效果的自己看
5 回答源代碼,有幾個問題,大家可以看看,就是我覺得 .photo_wrap 只是把圖片翻轉好,而 .photo_font .photo_wrap 才是真正的翻轉,不知道說得對不對,老師也看看唄!
2 回答內容無法輸出的看這里
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-11-16
css樣式里面? ?在?i:affter 里面加上?opacity: 0; 然后再 i_current:affter 里面加上??opacity: 1; 應該就可以了
2017-03-24
// 5. 排序海報
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];
// 把海報分為左、 右區域兩個部分
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);
}