源码啊源码
cgl85by
2015-05-25 09:24
哪里可以得到源码，不甚感激
5回答
-
- clown11
- 2016-05-15 00:19:57
图上可以看得明白，附上测试链接：http://www.w3school.com.cn/tiy/t.asp?f=jseg_split_1
-
- summerstarry
- 2015-06-07 11:53:26
还有我发现，你的 string 内容，如果 <br> 没有加上 \ 的话，就会出错，不然就要像你那样，写在一起，这是为啥呢？
吃饭去咯,哈哈！！！
-
- 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">
<!-- photo 位移和旋转 -->
<div class="photo photo_center photo_back" id="photo_{{index}}" onclick="turn(this)">
<!-- photo_warp 3D翻转 -->
<div>
<div class="side side_front"><!-- 正面旋转0度 -->
<p><img src="img/{{img}}"></p>
<p>{{caption}}</p>
</div>
<div class="side side_back"><!-- 反面旋转180度呈现镜像效果 -->
<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>
-
- fighter_fighting
- 2015-05-25 17:18:37
如果不嫌弃可以改用一下
var data=[];
var dataString='1.吸血鬼助手<br><br>导演：保罗·韦兹<br>主演：约翰·C·赖利/克里斯·凯利/乔什·哈切森<br>类型：动作/冒险/幻想/惊悚<br>信息：美国|109分钟|2009年10月23日<br><br><br>2.大笑江湖<br><br>导演：朱延平/徐正超<br>主演：赵本山/小沈阳/林熙蕾/吴宗宪<br>类型：喜剧/古装<br>信息：中国|119分钟|2010年12月3<br><br>日3.狄仁杰之神都龙王<br><br>导演：徐克<br>主演：赵又廷/冯绍峰/林更新/杨颖/刘嘉玲/金范/陈坤<br>类型：剧情/动作/悬疑<br>信息：中国|135分钟|2013年9月28日<br><br><br>4.风声<br><br>导演：高群书/陈国富<br>主演：周迅/李冰冰/黄晓明/张涵予/苏有朋/英达/王志文<br>类型：剧情/惊悚/犯罪/悬疑<br>信息：中国大陆|114分钟|2009年9月29日<br><br><br>5.寒战<br><br>导演：梁乐民/陆剑青<br>主演：郭富城/梁家辉/李治廷/彭于晏/杨采妮<br>类型：动作/剧情<br>信息：中国香港|98分钟<br><br><br>6.暮光之城<br><br>导演：比尔·康顿<br>主演：克里斯汀·斯图尔特/罗伯特·帕丁森<br>类型：爱情/剧情/幻想/冒险<br>信息：美国|2011年11月18日<br><br><br>7.恋爱通告<br><br>导演：王力宏<br>主演：王力宏/刘亦菲/陈汉典/陈冲/乔振宇/曾轶可/谢园<br>类型：喜剧/爱情<br>信息：中国台湾|98分钟|2010年8月12日<br><br><br>8.让子弹飞<br><br>导演：姜文<br>主演：姜文/周润发/葛优/刘嘉玲/陈坤/周韵/廖凡<br>类型：剧情/喜剧/动作/西部<br>信息：中国大陆/香港|132分钟|2010年12月16日<br><br><br>9.杀神特工<br><br>导演：提莫·贝克曼贝托夫 <br>主演：詹姆斯·麦卡沃伊/安吉丽娜·朱莉<br>类型：动作/惊悚/爱情/警匪<br>信息：美国|110分钟|2008年10月19日<br><br><br>10.神火之盗<br><br>导演：克里斯·哥伦布<br>主演：罗根·勒曼/布兰登·T·杰克逊<br>类型：喜剧/冒险/奇幻<br>信息：美国|118分钟|2010-02-10<br><br><br>11.同桌的你<br><br>导演：郭帆<br>主演：周冬雨/林更新/隋凯/王啸坤/龚格尔/李岷城/赵思园<br>类型：剧情/爱情/青春<br>信息：中国|98分钟|2014年4月25日<br><br><br>12.西游记之大闹天宫<br><br>导演：郑保瑞<br>主演：甄子丹/周润发/郭富城/何润东/夏梓桐/陈乔恩<br>类型：剧情/动作/神话<br>信息：中国香港|120分钟|2014年1月31日<br><br><br>13.心花路放<br><br>导演：宁浩<br>主演：黄渤/徐峥<br>类型：公路/爱情/喜剧<br>信息：中国大陆|118分钟|2014年9月30日';
var d=dataString.split('<br><br><br>');
for (var n = d.length - 1; n >= 0; n--) {
var c=d[n].split('<br><br>');
var i=c[1].split('<br>');
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');
};
CSS3+JS 实现超炫的散列画廊特效
46091 学习 · 215 问题
相似问题