面白８-１■ +CSS 拡大縮小回転スライド+コメ+リンク-原本

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>面白８-１■ +CSS 拡大縮小回転スライド+コメ+リンク-原本</title>

</head>
<body>

<!--★コピーここから-->
<!-- BEGINNING OF THE CODE FOR THE CSS3-ROTATION-AND-ZOOM-SLIDESHOW-->

<!----------------------------------------->
<!-- TEXT-STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<!-- Set the text-style within ".textboxstyle" -->
<!-- Set the backgroundcolor within ".textboxbackgroundstyle" -->
<!-- "-moz-" is required for Firefox. "-webkit-" is required for Safari and Chrome -->
<style>
.textboxstyle {
font-family:Arial;
font-size:10pt;
color:white;
text-align:center;
vertical-align:middle;
}

.textboxbackgroundstyle {
background-color:black;
padding:0px;
}
</style>
<!----------------------------------------->
<!-- TEXT-STYLE-CONFIGURATION ENDS HERE -->
<!----------------------------------------->


<style>
.imgbox { 
	float:left;
	position:absolute;
	top:0px;
	left:0px;
	display:block; 
	-webkit-transform: rotate(0deg); 
	-moz-transform: rotate(0deg);	
	-o-transform: rotate(0deg);		
} 
</style>

<script>

// CREDITS:
// CSS3-Slideshow with rotation and zoom effect effect
// by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// 08/17/2010

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this script will be running.

// CONFIGURATION:
// Go to http://www.fabulant.com and get the original code 
// with step-by-step instructions and copy-and-paste installation.


/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// Set the elements of your slides. Each block below contains the URL of your images as well as the corresponding messages and links. In this case the pictures are in the same directory as the HTML-file. Add as many slides as you like. Just follow the rules below:

// { Each block starts with this brackets
// imgsrc : "../the path/or/url/to/your/image.jpg",
// message : "the comment at the bottom of the slide",
// linkto : "http://the-url-of-your-link.com" This line does not end with a comma
//}, Each block ends with a bracket and comma. ATTENTION: The very last block does not end with a comma!!!


//★画像、コメント、リンク指定
var slide= [
{
imgsrc : "a1.jpg",
message : "That's the smile of Mona Lisa",
linkto : "http://www.fabulant.com"
},

{
imgsrc : "a2.jpg",
message : "Lena looks like an angel",
linkto : "http://www.fabulant.com"
},

{
imgsrc: "a3.jpg",
message : "Most women are waterproof",
linkto : "http://www.fabulant.com"
},

{
imgsrc : "a4.jpg",
message : "Beauty has no age",
linkto : "http://www.fabulant.com"
}
]

// Set the target of the your links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"

// Set the width and height of your images (pixels)★画像の横幅と縦幅指定
var imgwidth=370
var imgheight=245

// Set the height of your textbox (pixels)★コメント領域の縦幅指定
var textheight=20

// Set opacity-strength (transparency-effect). Values may range from 1 to 100//★コメントの背景領域の透過度指定
var opacitystrength=60

// Set the pause (standstill) between the rotations (seconds)★切替速度。秒で指定
var pause=2


/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////

// do not edit below this line
var maxrotations=2
var step=36
var i_imgwidth=0
var i_imgsrc=0
var i=0
var maxdegree=maxrotations*360
pause*=1000

var imgpreload=new Array()
for (ii=0;ii<=slide.length-1;ii++) {
	imgpreload[ii]=new Image()
	imgpreload[ii].src=slide[ii].imgsrc
}

function enlarge() {
	i+=step
	i_imgwidth+=imgwidth/(360*maxrotations/step)
	if (i_imgwidth>imgwidth) {
		i_imgwidth=imgwidth
	}
	if (i<=maxdegree) {
		document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
		document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
		tmr=setTimeout("enlarge()",20)
	}
	else {
		clearTimeout(tmr)
		i=0
		i_imgwidth=imgwidth
		showmessage()
	}
}

function showmessage() {
	document.getElementById("textbox").innerHTML='<div class="textboxbackgroundstyle">'+slide[i_imgsrc].message+'</div>'
	tmr=setTimeout("hidemessage()",pause)
}

function hidemessage() {
	document.getElementById("textbox").innerHTML=""
	shrink()
}


function shrink() {
	i+=step
	i_imgwidth-=imgwidth/(360*maxrotations/step)
	if (i_imgwidth<1) {
		i_imgwidth=1
	}
	if (i<=maxdegree) {
		document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
		document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
		tmr=setTimeout("shrink()",20)
	}
	else {
		clearTimeout(tmr)
		i_imgsrc++
		if (i_imgsrc>slide.length-1) {
			i_imgsrc=0
		}
		i=0
		i_imgwidth=0
		tmr=setTimeout("enlarge()",500)
	}
}

document.write("<div id='roof' style='position:relative;width:"+imgwidth+"px;height:"+imgheight+"px;'>")
document.write("<div class='imgbox' id='dt' style='width:"+imgwidth+"px;height:"+imgheight+"px;top:0px;left:0px;'></div>")
document.write("<div id='text'  style='position:absolute;width:"+imgwidth+"px;height:"+textheight+"px;top:"+(imgheight-textheight)+"px;left:0px;filter:alpha(opacity="+opacitystrength+");opacity:"+(opacitystrength/100)+";'><table width="+imgwidth+" height="+textheight+"><tr><td id='textbox' class='textboxstyle'></td></tr></table></div>")

document.write("</div>")

window.onload=enlarge
</script>

<!-- END OF THE CODE FOR THE CSS3-ROTATION-AND-ZOOM-SLIDESHOW-->
<!--★ここまでコピー-->

</body>
</html>
面白８-１■ +CSS 拡大縮小回転スライド+コメ+リンク-原本 UP日時 : 2016/10/02

　面白８-１■ +CSS 拡大縮小回転スライド+コメ+リンク-原本　　　　UP日時 : 2016/10/02
