只能實(shí)現(xiàn)到頁(yè)面翻轉(zhuǎn)那里，輸出海報(bào)就不可以了，報(bào)錯(cuò)如下
Uncaught TypeError: document[method] is not a function
? ? at g (index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:137)
? ? at addPhotos (index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:153)
? ? at index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:166
g @ index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:137
addPhotos @ index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:153
(anonymous) @ index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:166
請(qǐng)問(wèn)我的報(bào)這個(gè)錯(cuò)是怎么回事啊？求大神，謝謝。而且只能實(shí)現(xiàn)到頁(yè)面翻轉(zhuǎn)
2017-11-16
源碼貼出來(lái)看一下
2018-02-24
新手請(qǐng)教下，/photo_center/這種寫(xiě)法是js特有的嗎，之前學(xué)js的時(shí)候沒(méi)接觸過(guò)，有大神講解下嗎
2017-11-21
好像是你的圖片文件夾引用的不對(duì)，導(dǎo)致找不到圖片。
如果是按照老師的思路來(lái)寫(xiě)的話，圖片文件夾應(yīng)該與index.html文件并列，所以路徑應(yīng)該是img/圖片名.jpg
2017-11-20
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>海報(bào)畫(huà)廊</title>
? ?<style type="text/css">
*{padding:0;margin: 0;}
? ? ? ?body {
? ? ? ? ? ?background-color: #ffffff;
font-size: 14px;
font-family: 'Avenir Next','Lantinghei SC';
color: #555555;
-webkit-font-smoothing: antialiased; /*字體抗鋸齒*/
}
? ? ? ?/*設(shè)置垂直居中方法：
? ? ? ?position：absolute；
? ? ? ?top：50%；
? ? ? ?margin-top：-300px；設(shè)置為高度一半
? ? ? ?*/
.wrap{
? ? ? ? ? ?width:100%;
height:600px;
position: absolute;
top:50%;
margin-top: -300px;
background-color: black;
overflow: hidden;
-webkit-perspective: 800px;/*使得出現(xiàn)旋轉(zhuǎn)的特效*/
}
? ? ? ?/*海報(bào)樣式*/
.photo{
? ? ? ? ? ?width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0,0,0,01);
}
? ? ? ?.photo .side {
? ? ? ? ? ?width:100%;
height: 100%;
background-color: #eeeeee;
position: absolute;
top:0;
right:0;
padding: 20px;
box-sizing: border-box;/*內(nèi)容和padding都會(huì)在邊框之內(nèi)呈現(xiàn)*/
}
? ? ? ?.photo .side-front{}
? ? ? ?.photo .side-front .image{
? ? ? ? ? ?width: 100%;
height:250px;
line-height: 250px;
overflow: hidden;
}
? ? ? ?.photo .side-front .image img {
? ? ? ? ? ?width:100%;
}
? ? ? ?.photo .side-front .caption{
? ? ? ? ? ?text-align: center;
font-size: 16px;
line-height: 50px;
}
? ? ? ?.photo .side-back{}
? ? ? ?.photo .side-back .desc{
? ? ? ? ? ?color: black;
font-size: 14px;
line-height: 1.5em;
}
? ? ? ?/*當(dāng)前選中的海報(bào)樣式*/
.photo_center{
? ? ? ? ? ?left:50%;
top: 50%;
margin: -160px 0 0 -130px;
z-index: 999;/*顯示透明度，不會(huì)被其他的樣式遮擋*/
}
? ? ? ?/*負(fù)責(zé)翻轉(zhuǎn)*/
.photo-wrap{
? ? ? ? ? ?position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;/*支持子元素的3D效果*/
-webkit-transition: all .6s;
}
? ? ? ?.photo-wrap .side-front{
? ? ? ? ? ?-webkit-transform: rotateY(180deg);/*定義位移以及沿著Y軸旋轉(zhuǎn)*/
}
? ? ? ?.photo-wrap. side-back{
? ? ? ? ? ?-webkit-transform: rotateY(0deg);
}
? ? ? ?.photo-wrap.side{
? ? ? ? ? ?-webkit-backface-visibility: hidden;/*當(dāng)元素不面向屏幕時(shí)隱藏*/
}
? ? ? ?.photo_front .photo-wrap{
? ? ? ? ? ?-webkit-transform: rotateY(180deg);
}
? ? ? ?.photo_back .photo-wrap{
? ? ? ? ? ?-webkit-transform: rotateY(0deg);
}
? ?</style>
</head>
<body onselectstart="return false;">
<!--2.改寫(xiě)視圖，為模板字符串-->
<div class="wrap" id = "wrap">
? ?<div class="photo photo_center photo_front" onclick="turn(this)"
id = "photo_{{index}}">
<!--photo-wrap負(fù)責(zé)翻轉(zhuǎn)，photo負(fù)責(zé)平移和旋轉(zhuǎn)-->
<div class="photo-wrap">
? ? ? ? ? ?<div class="side side-front">
? ? ? ? ? ? ? ?<p class="image"><img src="../img/{{img}}" ></p>
? ? ? ? ? ? ? ?<p class="caption">{{caption}}</p>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="side side-back">
? ? ? ? ? ? ? ?<p class="desc">{{desc}}</p>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
</div>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
//3.通用函數(shù)
function g(selector){
? ? ? ?var method=selector.substr(0,1)=="."?"getElementsByClassName":"getElementById";
return document[method](selector.substr(1));
}
? ?//隨機(jī)生成一個(gè)值0~20，支持取值范圍，ranom([min,max]);
// ? ?function random(range) {
// ? ? ? ?var max = Math.max(range[0],range[1]);
// ? ? ? ?var min = Math.max(range[0],range[1]);
//
// ? ? ? ?var diff = max - min;//差值，[1,6] =>5(0~5)
//
// ? ? ? ?var number = Math.ceil(Math.random() *diff +min);//取整
// ? ? ? ?return number;
// ? ?}
? ?//4.輸出所有的海報(bào)
var data = data;
function addPhotos() {
? ? ? ?var template=g("#warp").innerHTML.replace(/^\s*/,"").replace(/\s*$/,"");
var html = [];
// var nav = [];
for(s in data){//for(var s = 0; s<data.length; s++
var _html = template
? ? ? ? ? ? ? ?.replace('{{index}}',s)
? ? ? ? ? ? ? ?.replace('{{img}}',data[s].img)
? ? ? ? ? ? ? ?.replace('{{caption}}',data[s].caption)
? ? ? ? ? ? ? ?.replace('{{desc}}',data[s].desc);
html.push(_html);
//nav.push('<span id="nav_'+s+'" onclick="turn(g(\'#photo_'+s+'\'))"> </span>');
}
? ? ? ?//html.push('<div>'+nav.join("")+'</div>');
g('#wrap').innerHTML = html.join('');
//resort(random([0,data.length-1]));
}
? ?addPhotos();
//5.排序海報(bào)
// ? ?function resort(n) {
// ? ? ? ?var photo_center = g('#photo_'+n);
// ? ? ? ?photo_center.className += 'photo_center';
//
// ? ?}
? ?//1.翻面控制
function turn(elem) {
? ? ? ?var cls = elem.className;
if(/photo_front/.test(cls)){
? ? ? ? ? ?cls = cls.replace(/photo_front/,'photo_back')
? ? ? ?}
? ? ? ?else {
? ? ? ? ? ?cls = cls.replace(/photo_back/,'photo_front')
? ? ? ?}
? ? ? ?return elem.className = cls;
}
</script>
</body>
</html>
根據(jù)視頻到這一步應(yīng)該就可以顯示出來(lái)圖片，但是我的沒(méi)有顯示只能翻轉(zhuǎn)。報(bào)錯(cuò)變成了如下：
GET http://localhost:63342/%E6%85%95%E8%AF%BE%E7%BD%91htmlcss/img/%7B%7Bimg%7D%7D 404 (Not Found)
data.js:51 1? 仙人掌.jpg
data.js:51 2? 熊童子<br> <br>肉肉名稱：熊熊<br>肉肉生日：2016.5.21<br>肉肉簡(jiǎn)介：原產(chǎn)南美草原的仙人掌科(Cactaceae)Notocactus屬植物，<br>仙人球?qū)伲ń痃鷮貳chinocactus），</br>有象牙金琥（E.grusonii）、大金琥（E.ingens）等25種。<br>株形小，圓球狀到橢圓柱狀，常盆栽觀賞。.jpg
data.js:51 3? 玉露.jpg
data.js:51 4? 黃麗.jpg
index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:153 Uncaught TypeError: Cannot read property 'innerHTML' of null
? ? at addPhotos (index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:153)
? ? at index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:169
addPhotos @ index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:153
(anonymous) @ index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:169