源码啊源码

个回答

clown11

2016-05-15 00:19:57

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

0
summerstarry

2015-06-07 11:53:26

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

吃饭去咯,哈哈！！！

0

summerstarry: 2015-06-07 11:51:20

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

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" );
}

fighter_fighting

2015-05-25 17:19:10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>海报画廊</title>
<link rel="stylesheet" href="">
<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>
<body onselectstart="return false;">
<div id="warp">

<div class="photo photo_center photo_back" id="photo_{{index}}" onclick="turn(this)">

<div>
<div class="side side_front">
<img src="img/{{img}}">
{{caption}}
</div>
<div class="side side_back">
<ul>
<li>导演：{{info_d}}</li>
<li>主演：{{info_a}}</li>
<li>类型：{{info_t}}</li>
<li>信息：{{info_i}}</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/data.js"></script>
<script>
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
fighter_fighting

2015-05-25 17:18:37

如果不嫌弃可以改用一下
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