                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS3+JS 實現(xiàn)超炫的散列畫廊特效

源碼啊源碼

哪里可以得到源碼，不甚感激

cgl85by

2015-05-25

源自：CSS3+JS 實現(xiàn)超炫的散列畫廊特效 3-2

關(guān)注問題我要回答

2256

操作

收起

5 回答

clown11
2016-05-15

圖上可以看得明白，附上測試鏈接：http://www.w3school.com.cn/tiy/t.asp?f=jseg_split_1

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

summerstarry
2015-06-07

還有我發(fā)現(xiàn)，你的 string 內(nèi)容，如果 沒有加上 \ 的話，就會出錯，不然就要像你那樣，寫在一起，這是為啥呢？

吃飯去咯,哈哈?。?！

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

summerstarry
2015-06-07

有個問題想問你，朋友，幫忙看下我代碼，問題在里面

var?data?=?[];

var?dataStr?=?"1、麥兜我和我媽媽<br><br>\
導(dǎo)演：謝立文?/?李軍民<br>\
編?。褐x立文<br>\
主演：黃磊?/?吳君如?/?張正中?/?黃秋生?/?蔡明麗?/?更多...<br>\
類型：喜劇?/?動畫?/?家庭<br>\
語言：漢語?/?粵語<br>上映日期：2014-10-01（中國大陸/香港）<br>\
片長：81分鐘<br>\
又名：麥兜故事<br>\
";

//?這里不理解，這里為什么分割?3個?<br>?？
var?d?=?dataStr.split(?"<br><br><br>"?);

for?(?var?i?=?0;?i?<?d.length;?i?++?)?{

	//?分割兩個?<br>?的意思：把??1、麥兜我和我媽媽???和下面的內(nèi)容分割掉
	var?c?=?d[i].split(?"<br><br>"?);
	
	data.push(?{?

		img:?c[0].replace(?"、",?"?"?)?+?".jpg",
		caption:?c[0].split("、")[1],
		desc:?c[1]?//?所以這里的?c[1]?就是下面的全部內(nèi)容

	}?);
		
	//?console.log(?c[0].replace(?"、",?"?"?)?+".jpg"?);
}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

fighter_fighting
2015-05-25

<!DOCTYPE html>

<html>

<head>

<style>

div,ul,li,p,img{padding:0;margin:0}

body{background: #fff;font-size: 14px;font-family: "微軟雅黑";}

ul{list-style: none;}

img{border: none;}

.warp{width: 100%;height: 600px;position: absolute;top: 50%;margin-top: -300px;background: #333;}

.photo{width: 260px;height: 320px;position: absolute;z-index: 1;box-shadow: 0 0 1px rgba(0,0,0,0.01);}

.photo_center{top: 50%;left: 50%;margin: -160px 0px 0px -130px;z-index: 999;}

.photo_warp{width: 100%;height: 100%;position: absolute;}

.photo .side{width: 100%;height: 100%;background: #eee;position: absolute;top:0px;left: 0px;padding:5px;box-sizing:border-box;}

.photo .side_front .image{width: 100%;height: 270px;line-height: 250px;overflow: hidden;}

.photo .side_front .image img{width: 100%;height: auto;}

.photo .side_front .caption{text-align: center;font-size: 16px;line-height: 50px;}

.photo .side_back .info{background: #f1f1f1;line-height: 1.5em;color: #666;}

.photo .side_back .info li{overflow: hidden;text-overflow:ellipsis;white-space:nowrap;padding: 2px 5px;}

/* .warp{perspective:800px;-webkit-perspective:800px;} *//*元素距離試圖的距離*//*刪除無影響*/

.photo .photo_warp{transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transition: all 1s;-webkit-transition: all 1s;}/* 子元素保留其3D位置 *//*過渡*/

.photo .side{backface-visibility: hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;}/*當(dāng)元素不面向屏幕時隱藏*/

/*反面在上旋轉(zhuǎn)180度呈現(xiàn)倒像不可見，正面在下旋轉(zhuǎn)0度呈現(xiàn)正像可見*/

.photo .side_front{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}

.photo .side_back{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}

/*在正、反面已做3D動作基礎(chǔ)之上再做翻轉(zhuǎn)*/

/* photo_front：整體旋轉(zhuǎn)0度，反面在上呈現(xiàn)倒像不可見，正面在下呈現(xiàn)正像且可見 */

? .photo_front .photo_warp{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}

/* photo_back：整體旋轉(zhuǎn)180度，反面在下呈現(xiàn)正像可見，正面在上呈現(xiàn)倒像不可見 */

.photo_back ?.photo_warp{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);} ?

</style>

</head>

<div>

{{caption}}

</div>

<ul>

</ul>

</div>

function getElement(selector){

return $('.'+selector).add('#'+selector);

}

function turn(obj){

var cla=obj.className;

if(/photo_front/.test(cla)){

cla=cla.replace(/photo_front/,'photo_back')

}

else{

cla=cla.replace(/photo_back/,'photo_front')

}

return obj.className=cla;

}

var data=data;

function addPhoto(){

var template=getElement('warp').html();

var content=[];

for(i in data){

var _content=template

.replace('{{index}}',i)

.replace('{{img}}',data[i].img)

.replace('{{caption}}',data[i].caption)

.replace('{{info_d}}',data[i].info_d)

.replace('{{info_a}}',data[i].info_a)

.replace('{{info_t}}',data[i].info_t)

.replace('{{info_i}}',data[i].info_i)

};

content.push(_content);

getElement('warp').html(content);

}

addPhoto();

</script>

</body>

</html>

2 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

cgl85by 提問者

非常非常感謝你的代碼分享。

2015-05-25 回復(fù) 有任何疑惑可以回復(fù)我~

fighter_fighting
2015-05-25

如果不嫌棄可以改用一下

var data=[];

var dataString='1.吸血鬼助手 導(dǎo)演：保羅·韋茲 主演：約翰·C·賴?yán)?克里斯·凱利/喬什·哈切森 類型：動作/冒險/幻想/驚悚 信息：美國|109分鐘|2009年10月23日 2.大笑江湖 導(dǎo)演：朱延平/徐正超 主演：趙本山/小沈陽/林熙蕾/吳宗憲 類型：喜劇/古裝 信息：中國|119分鐘|2010年12月3 日3.狄仁杰之神都龍王 導(dǎo)演：徐克 主演：趙又廷/馮紹峰/林更新/楊穎/劉嘉玲/金范/陳坤 類型：劇情/動作/懸疑 信息：中國|135分鐘|2013年9月28日 4.風(fēng)聲 導(dǎo)演：高群書/陳國富 主演：周迅/李冰冰/黃曉明/張涵予/蘇有朋/英達/王志文 類型：劇情/驚悚/犯罪/懸疑 信息：中國大陸|114分鐘|2009年9月29日 5.寒戰(zhàn) 導(dǎo)演：梁樂民/陸劍青 主演：郭富城/梁家輝/李治廷/彭于晏/楊采妮 類型：動作/劇情 信息：中國香港|98分鐘 6.暮光之城 導(dǎo)演：比爾·康頓 主演：克里斯汀·斯圖爾特/羅伯特·帕丁森 類型：愛情/劇情/幻想/冒險 信息：美國|2011年11月18日 7.戀愛通告 導(dǎo)演：王力宏 主演：王力宏/劉亦菲/陳漢典/陳沖/喬振宇/曾軼可/謝園 類型：喜劇/愛情 信息：中國臺灣|98分鐘|2010年8月12日 8.讓子彈飛 導(dǎo)演：姜文 主演：姜文/周潤發(fā)/葛優(yōu)/劉嘉玲/陳坤/周韻/廖凡 類型：劇情/喜劇/動作/西部 信息：中國大陸/香港|132分鐘|2010年12月16日 9.殺神特工 導(dǎo)演：提莫·貝克曼貝托夫 主演：詹姆斯·麥卡沃伊/安吉麗娜·朱莉 類型：動作/驚悚/愛情/警匪 信息：美國|110分鐘|2008年10月19日 10.神火之盜 導(dǎo)演：克里斯·哥倫布 主演：羅根·勒曼/布蘭登·T·杰克遜 類型：喜劇/冒險/奇幻 信息：美國|118分鐘|2010-02-10 11.同桌的你 導(dǎo)演：郭帆 主演：周冬雨/林更新/隋凱/王嘯坤/龔格爾/李岷城/趙思園 類型：劇情/愛情/青春 信息：中國|98分鐘|2014年4月25日 12.西游記之大鬧天宮 導(dǎo)演：鄭保瑞 主演：甄子丹/周潤發(fā)/郭富城/何潤東/夏梓桐/陳喬恩 類型：劇情/動作/神話 信息：中國香港|120分鐘|2014年1月31日 13.心花路放 導(dǎo)演：寧浩 主演：黃渤/徐崢 類型：公路/愛情/喜劇 信息：中國大陸|118分鐘|2014年9月30日';

var d=dataString.split(' ');

for (var n = d.length - 1; n >= 0; n--) {

var c=d[n].split(' ');

var i=c[1].split(' ');

data.push({

img:c[0].replace('.',' ')+'.jpg',

caption:c[0].split('.')[1],

info_d:i[0],

info_a:i[1],

info_t:i[2],

info_i:i[3],

});