「坂曲線を利用したタワー2」の編集履歴（バックアップ）一覧はこちら
「坂曲線を利用したタワー2」(2012/10/31 (水) 05:57:22) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#javascript(){{{
<SCRIPT type=text/javascript>
// list of image filenames
var imageFileNameArray = new Array(
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image0.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image1.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image2.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image3.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image4.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image5.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image6.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image7.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image8.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image9.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image10.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image11.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image11.jpg');
// list of html image elements
var sketchUpImageArray = new Array();
var currentPos = 0;
var addToPos = 0;
var imageCount = 0;
var sketchUpObj = null;
var mouseXOrig;
var mouseX = 0;
var mouseY = 0;
var mouseIsDown = false;
var title = null;
function init3141592() {
title = document.getElementById('title');
sketchUpObj = document.getElementById('sketchUpObj');
imageCount = imageFileNameArray.length;
// load up the imageArray with the sketchUp images
var left = sketchUpObj.offsetLeft+180;
var top = sketchUpObj.offsetTop+112;
for (i = 0; i < imageCount; i++) {
sketchUpImageArray[i] = new Image();
sketchUpImageArray[i].src = imageFileNameArray[i];
sketchUpImageArray[i].className = 'sketchUpImage';
sketchUpImageArray[i].style.left = left + "px";
sketchUpImageArray[i].style.top = top + "px";
hide(sketchUpImageArray[i]);
document.body.appendChild(sketchUpImageArray[i]);
}
// create a transparent sheet over the images so that the mouse
// events go it it
var sheet = document.createElement("DIV");
document.body.appendChild(sheet);
sheet.id = "sheet";
sheet.style.left = left + "px";
sheet.style.top = top + "px";
sheet.onmousemove = handleRotate;
sheet.onmousedown = handleMouseDown;
sheet.onmouseup = handleMouseUp;
sheet.onmouseout = handleMouseUp;
setOpacity(sheet, 0.0);
currentPos = imageCount-1
show(sketchUpImageArray[currentPos]);
}
/**
* When the mouse goes down, start rotating the image
*
* @param {Event} mousedown event
*/
function handleMouseDown(e) {
if (!e) { e = window.event; }
getMouseXY(e);
mouseXOrig = mouseX;
addToPos = 0;
mouseIsDown = true;
}
/**
* When the mouse goes up, stop rotating the image
*
* @param {Event} mouseup event
*/
function handleMouseUp(e) {
mouseIsDown = false;
currentPos += addToPos;
}
/**
* Divide the width of the html object by the number of images.
* As the mouse moves over the html object, show the appropriate image
* giving the illusion that the user is spinning the object.
*
* @param {Event} mousemove event
*/
function handleRotate(e) {
if (!e) { e = window.event; }
if (!mouseIsDown) {
return;
}
getMouseXY(e);
// STEP is how many pixels equals an image swap
var STEP = 10;
var width = sketchUpObj.offsetWidth;
var delta = mouseX - mouseXOrig;
addToPos = Math.floor(delta/STEP);
//handle wrap around
var wrap = (currentPos + addToPos) % imageCount;
var newPos = (wrap < 0) ? imageCount + wrap : Math.abs(wrap);
//hide everyone except the image we are over
for (var i = 0; i < imageCount; i++) {
hide(sketchUpImageArray[i]);
}
show(sketchUpImageArray[newPos]);
return false;
}
/**
* Get the mouse position from the event e
* @param {Event} e mouse move event
*/
function getMouseXY(e) {
if (e.pageX) {
mouseX = e.pageX;
mouseY = e.pageY;
} else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
if (mouseX < 0){mouseX = 0;}
if (mouseY < 0){mouseY = 0;}
}
/**
* Get the left coordinate of the element
*/
function getLeft(element) {
var x = 0;
while (element) {
x += element.offsetLeft;
element = element.offsetParent;
}
return x;
};
function setOpacity(element, opacity) {
element.style.filter = "alpha(opacity=" + Math.round(opacity*100) + ")";
element.style.opacity = opacity;
}
/**
* Hides the HTML element.
* @param element HTMLElement the element we hide
*/
function hide(element) {
element.style.display = 'none';
}
/**
* show the HTML element.
* @param element HTMLElement the element we want to see.
*/
function show(element) {
element.style.display = 'block';
}
</SCRIPT>
}}}
#html2(){{{{{{
<DIV id=sketchUpObj></DIV>
}}}}}}
#javascript(){{{
<script>window.onload = function(){ init3141592();}</script>
}}}
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image1.jpg)
坂曲線４本と曲線レール３本をセットにして組んでいくと、ミニブロックでの調整なしでタワーがつくれます。
坂＋曲＋坂＋曲＋坂＋曲＋坂 の7本セットでくみます。
#ref(00.png)
最下段
#ref(01.png)
2周目
#ref(02.png)
3周目
#ref(03.png)
さらに
#ref(04.png)
坂曲線４つ
#javascript(){{{
<SCRIPT type=text/javascript>
// list of image filenames
var imageFileNameArray = new Array(
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image0.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image1.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image2.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image3.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image4.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image5.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image6.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image7.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image8.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image9.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image10.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image11.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image11.jpg');
// list of html image elements
var sketchUpImageArray = new Array();
var currentPos = 0;
var addToPos = 0;
var imageCount = 0;
var sketchUpObj = null;
var mouseXOrig;
var mouseX = 0;
var mouseY = 0;
var mouseIsDown = false;
var title = null;
function init3141592() {
title = document.getElementById('title');
sketchUpObj = document.getElementById('sketchUpObj');
imageCount = imageFileNameArray.length;
// load up the imageArray with the sketchUp images
var left = sketchUpObj.offsetLeft;
var top = sketchUpObj.offsetTop;
for (i = 0; i < imageCount; i++) {
sketchUpImageArray[i] = new Image();
sketchUpImageArray[i].src = imageFileNameArray[i];
sketchUpImageArray[i].className = 'sketchUpImage';
sketchUpImageArray[i].style.left = left + "px";
sketchUpImageArray[i].style.top = top + "px";
hide(sketchUpImageArray[i]);
document.body.appendChild(sketchUpImageArray[i]);
}
// create a transparent sheet over the images so that the mouse
// events go it it
var sheet = document.createElement("DIV");
document.body.appendChild(sheet);
sheet.id = "sheet";
sheet.style.left = left + "px";
sheet.style.top = top + "px";
sheet.onmousemove = handleRotate;
sheet.onmousedown = handleMouseDown;
sheet.onmouseup = handleMouseUp;
sheet.onmouseout = handleMouseUp;
setOpacity(sheet, 0.0);
currentPos = imageCount-1
show(sketchUpImageArray[currentPos]);
}
/**
* When the mouse goes down, start rotating the image
*
* @param {Event} mousedown event
*/
function handleMouseDown(e) {
if (!e) { e = window.event; }
getMouseXY(e);
mouseXOrig = mouseX;
addToPos = 0;
mouseIsDown = true;
}
/**
* When the mouse goes up, stop rotating the image
*
* @param {Event} mouseup event
*/
function handleMouseUp(e) {
mouseIsDown = false;
currentPos += addToPos;
}
/**
* Divide the width of the html object by the number of images.
* As the mouse moves over the html object, show the appropriate image
* giving the illusion that the user is spinning the object.
*
* @param {Event} mousemove event
*/
function handleRotate(e) {
if (!e) { e = window.event; }
if (!mouseIsDown) {
return;
}
getMouseXY(e);
// STEP is how many pixels equals an image swap
var STEP = 10;
var width = sketchUpObj.offsetWidth;
var delta = mouseX - mouseXOrig;
addToPos = Math.floor(delta/STEP);
//handle wrap around
var wrap = (currentPos + addToPos) % imageCount;
var newPos = (wrap < 0) ? imageCount + wrap : Math.abs(wrap);
//hide everyone except the image we are over
for (var i = 0; i < imageCount; i++) {
hide(sketchUpImageArray[i]);
}
show(sketchUpImageArray[newPos]);
return false;
}
/**
* Get the mouse position from the event e
* @param {Event} e mouse move event
*/
function getMouseXY(e) {
if (e.pageX) {
mouseX = e.pageX;
mouseY = e.pageY;
} else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
if (mouseX < 0){mouseX = 0;}
if (mouseY < 0){mouseY = 0;}
}
/**
* Get the left coordinate of the element
*/
function getLeft(element) {
var x = 0;
while (element) {
x += element.offsetLeft;
element = element.offsetParent;
}
return x;
};
function setOpacity(element, opacity) {
element.style.filter = "alpha(opacity=" + Math.round(opacity*100) + ")";
element.style.opacity = opacity;
}
/**
* Hides the HTML element.
* @param element HTMLElement the element we hide
*/
function hide(element) {
element.style.display = 'none';
}
/**
* show the HTML element.
* @param element HTMLElement the element we want to see.
*/
function show(element) {
element.style.display = 'block';
}
</SCRIPT>
}}}
#html2(){{{{{{
<DIV id=sketchUpObj></DIV>
}}}}}}
#javascript(){{{
<script>window.onload = function(){ init3141592();}</script>
}}}
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=143&file=model_image1.jpg)
坂曲線４本と曲線レール３本をセットにして組んでいくと、ミニブロックでの調整なしでタワーがつくれます。
坂＋曲＋坂＋曲＋坂＋曲＋坂 の7本セットでくみます。
#ref(00.png)
最下段
#ref(01.png)
2周目
#ref(02.png)
3周目
#ref(03.png)
さらに
#ref(04.png)
坂曲線４つ
