2019年07月30日
shadow
iframe {position:absolute;top:55px;transition-duration:0.7s;width:100%;height:calc(100vh - 50px)}
.frmshadow{
cursor:pointer;
top: 55px;
background-color: white;
background-color: white;
box-shadow: -3px -3px 17px 0px #00000061;
border-radius: 6px;
transform: rotate(-0.1deg);
transform-origin:right top;
/*
transform:rotateY(20deg);
*/
}
.fset{
top:50px;
left;0px;
}
function menuSlide(){
document.getElementById("menu").style.left=0;
document.getElementById("menusheet").style.visibility="visible";
// elm[fnum].style.left=50+"px";
// elm[fnum].style.top=70+"px";
changefrm(fnum)
}
function menuSlideLoad(){
document.getElementById("menu").style.left=-255+"px";
document.getElementById("menusheet").style.visibility="hidden";
for(var i =0;i<=fnum;i++){
elm[i].className="fset"
elm[i].style.left=0;
elm[i].style.top=50+"px";
elm[i].style.transform ="scale(1,1)"
};
}
function frmChange(URL){
document.getElementById("f0").src=URL
//menuSlide()
changefrm(0)
}
// iframeを取得
var elm = document.getElementsByTagName("iframe");
var fnum=0
elm[fnum].style.left=0;
elm[fnum].style.top=50+"px";
function changefrm(frmNum){
fnum=frmNum
var flag=false
var cnt=0
for(var i =0;i<=elm.lenght;i++){elm[i].className = 'frmshadow' };
for (var i = 3;i>frmNum; i--){
if(elm[i].style.left==(150*(i+1))+"px"){
setTimeout("Right('"+i+"')", 100*cnt);
cnt+=1
flag=true
}
}
cnt=0
for (var i = 0;i< frmNum+1; i++){
elm[i].className = 'frmshadow'
if(!flag && elm[i].style.left!=150*(Number(i)+1)+"px"){
setTimeout("Left('"+i+"')", 100*cnt);
cnt+=1
}
}
}
function Right(i){
elm[i].style.left=(120)+"%"
elm[i].style.top=58+"px"
}
function Left(i){
elm[i].style.left=(150*(Number(i)+1))+"px";
elm[i].style.top=60+(i*2)+"px";
elm[i].style.transform ="scale(0.9,1)"
// alert("frame"+i+": "+elm[i].style.left)
}
【このカテゴリーの最新記事】
-
no image
-
no image
-
no image
-
no image
-
no image
posted by vbahtmlmemo at 10:09| （カテゴリなし）