課程
/前端開發(fā)
/HTML/CSS
/CSS3+JS 實(shí)現(xiàn)超炫的散列畫廊特效
為什么出不來 隨機(jī)的效果啊，代碼和老師的一樣呢，，，，，
2015-05-20
源自：CSS3+JS 實(shí)現(xiàn)超炫的散列畫廊特效 3-4
正在回答
// 隨機(jī)生成數(shù)值方法function random(range){//支持負(fù)數(shù)范圍?? ?var max = Math.max(range[0],range[1]);?? ?var min = Math.min(range[0],range[1]);?? ?var diff = max - min;?? ?var number = Math.ceil((Math.random() * diff + min));?? ?return number;}
//? 輸出所有的海報(bào)方法
var data = data;
function addPhotos(){?? ?var template = g('#wrap').innerHTML;?? ?var html = [];?? ?var nav = [];?? ?for (var i = 0; i < data.length; i++) {?? ??? ?var _html = template.replace('{{index}}',i)?? ??? ???????????????????? .replace('{{img}}',data[i].img)?? ??? ???????????????????? .replace('{{caption}}',data[i].caption)?? ??? ???????????????????? .replace('{{desc}}',data[i].desc);?? ??? ?html.push(_html);?? ???? // console.log(_html);?? ???? nav.push('<span id="nav_'+i+'" class="i" onclick="turn(g(\'#photo_'+i+'\'))"> </span>');?? ?}?? ?html.push('<div class="nav">'+nav.join('')+'</div>');?? ?g('#wrap').innerHTML = html.join('');?? ?posterSort(random([0,data.length-1]));?? ?}addPhotos();
// 海報(bào)排序方法function posterSort (n) {?? ?var photo_center = g('#photo_' + n);?? ?photo_center.className += ' photo_center';}
舉報(bào)
實(shí)現(xiàn)更自由的切換照片的畫廊效果，打造超酷的切換動(dòng)畫
2 回答旋轉(zhuǎn)效果出不來啊，老師，求解啊。。。。。
2 回答剛開始就顯示不出和作者一樣的效果
3 回答審查元素時(shí)，和設(shè)定的大小不一樣?。ɡ蠋煹木鸵粯樱槭裁囱?/p>
1 回答為什么沒有效果呢？
3 回答請(qǐng)教一下各位大神老師，照著寫的代碼，但是顯示的和視頻里面的不一樣啊
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-01-05
// 隨機(jī)生成數(shù)值方法
function random(range){//支持負(fù)數(shù)范圍
?? ?var max = Math.max(range[0],range[1]);
?? ?var min = Math.min(range[0],range[1]);
?? ?var diff = max - min;
?? ?var number = Math.ceil((Math.random() * diff + min));
?? ?return number;
}
//? 輸出所有的海報(bào)方法
var data = data;
function addPhotos(){
?? ?var template = g('#wrap').innerHTML;
?? ?var html = [];
?? ?var nav = [];
?? ?for (var i = 0; i < data.length; i++) {
?? ??? ?var _html = template.replace('{{index}}',i)
?? ??? ???????????????????? .replace('{{img}}',data[i].img)
?? ??? ???????????????????? .replace('{{caption}}',data[i].caption)
?? ??? ???????????????????? .replace('{{desc}}',data[i].desc);
?? ??? ?html.push(_html);
?? ???? // console.log(_html);
?? ???? nav.push('<span id="nav_'+i+'" class="i" onclick="turn(g(\'#photo_'+i+'\'))"> </span>');
?? ?}
?? ?html.push('<div class="nav">'+nav.join('')+'</div>');
?? ?g('#wrap').innerHTML = html.join('');
?? ?posterSort(random([0,data.length-1]));
?? ?
}
addPhotos();
// 海報(bào)排序方法
function posterSort (n) {
?? ?var photo_center = g('#photo_' + n);
?? ?photo_center.className += ' photo_center';
}