                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS3+JS 实现超炫的散列画廊特效

源码啊源码

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

cgl85by

2015-05-25

源自：CSS3+JS 实现超炫的散列画廊特效 3-2

关注问题我要回答

2065

操作

收起

5 回答

clown11
2016-05-15

图上可以看得明白，附上测试链接：http://www.w3school.com.cn/tiy/t.asp?f=jseg_split_1

0 回复有任何疑惑可以回复我~

收起回答

summerstarry
2015-06-07

还有我发现，你的 string 内容，如果 没有加上 \ 的话，就会出错，不然就要像你那样，写在一起，这是为啥呢？

吃饭去咯,哈哈！！！

0 回复有任何疑惑可以回复我~

收起回答

summerstarry
2015-06-07

有个问题想问你，朋友，帮忙看下我代码，问题在里面

var data = [];

var dataStr = "1、麦兜我和我妈妈<br><br>\
导演：谢立文 / 李军民<br>\
编剧：谢立文<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、麦兜我和我妈妈   和下面的内容分割掉
	var c = d[i].split( "<br><br>" );
	
	data.push( { 

		img: c[0].replace( "、", " " ) + ".jpg",
		caption: c[0].split("、")[1],
		desc: c[1] // 所以这里的 c[1] 就是下面的全部内容

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

0 回复有任何疑惑可以回复我~

收起回答

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;}/*当元素不面向屏幕时隐藏*/

/*反面在上旋转180度呈现倒像不可见，正面在下旋转0度呈现正像可见*/

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

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

/*在正、反面已做3D动作基础之上再做翻转*/

/* photo_front：整体旋转0度，反面在上呈现倒像不可见，正面在下呈现正像且可见 */

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

/* photo_back：整体旋转180度，反面在下呈现正像可见，正面在上呈现倒像不可见 */

.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 回复有任何疑惑可以回复我~

收起回答

cgl85by 提问者

非常非常感谢你的代码分享。

2015-05-25 回复有任何疑惑可以回复我~

fighter_fighting
2015-05-25

如果不嫌弃可以改用一下

var data=[];

var dataString='1.吸血鬼助手 导演：保罗·韦兹 主演：约翰·C·赖利/克里斯·凯利/乔什·哈切森 类型：动作/冒险/幻想/惊悚 信息：美国|109分钟|2009年10月23日 2.大笑江湖 导演：朱延平/徐正超 主演：赵本山/小沈阳/林熙蕾/吴宗宪 类型：喜剧/古装 信息：中国|119分钟|2010年12月3 日3.狄仁杰之神都龙王 导演：徐克 主演：赵又廷/冯绍峰/林更新/杨颖/刘嘉玲/金范/陈坤 类型：剧情/动作/悬疑 信息：中国|135分钟|2013年9月28日 4.风声 导演：高群书/陈国富 主演：周迅/李冰冰/黄晓明/张涵予/苏有朋/英达/王志文 类型：剧情/惊悚/犯罪/悬疑 信息：中国大陆|114分钟|2009年9月29日 5.寒战 导演：梁乐民/陆剑青 主演：郭富城/梁家辉/李治廷/彭于晏/杨采妮 类型：动作/剧情 信息：中国香港|98分钟 6.暮光之城 导演：比尔·康顿 主演：克里斯汀·斯图尔特/罗伯特·帕丁森 类型：爱情/剧情/幻想/冒险 信息：美国|2011年11月18日 7.恋爱通告 导演：王力宏 主演：王力宏/刘亦菲/陈汉典/陈冲/乔振宇/曾轶可/谢园 类型：喜剧/爱情 信息：中国台湾|98分钟|2010年8月12日 8.让子弹飞 导演：姜文 主演：姜文/周润发/葛优/刘嘉玲/陈坤/周韵/廖凡 类型：剧情/喜剧/动作/西部 信息：中国大陆/香港|132分钟|2010年12月16日 9.杀神特工 导演：提莫·贝克曼贝托夫 主演：詹姆斯·麦卡沃伊/安吉丽娜·朱莉 类型：动作/惊悚/爱情/警匪 信息：美国|110分钟|2008年10月19日 10.神火之盗 导演：克里斯·哥伦布 主演：罗根·勒曼/布兰登·T·杰克逊 类型：喜剧/冒险/奇幻 信息：美国|118分钟|2010-02-10 11.同桌的你 导演：郭帆 主演：周冬雨/林更新/隋凯/王啸坤/龚格尔/李岷城/赵思园 类型：剧情/爱情/青春 信息：中国|98分钟|2014年4月25日 12.西游记之大闹天宫 导演：郑保瑞 主演：甄子丹/周润发/郭富城/何润东/夏梓桐/陈乔恩 类型：剧情/动作/神话 信息：中国香港|120分钟|2014年1月31日 13.心花路放 导演：宁浩 主演：黄渤/徐峥 类型：公路/爱情/喜剧 信息：中国大陆|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],

});

// console.log(c[0].replace('.',' ')+'.jpg');

};

1 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

CSS3+JS 实现超炫的散列画廊特效

参与学习 46091 人
解答问题 215 个

实现更自由的切换照片的画廊效果，打造超酷的切换动画

进入课程

本课相似问答

3 回答同求源码啊，老师

4 回答源码呢。。

4 回答现在没找到源码了啊

4 回答老师求源码

2 回答老师求源码

搜索更多本课相关问答

源码啊源码

我要回答关注问题

热搜

最近搜索清空

源码啊源码

5 回答

本课相似问答

源码啊源码