html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年4月3日 星期二




<center>
<div class="FMdiv" id="F123456789" style="width:500px;height:300px;max-width:100%;max-height:100%">

<div id="F123456789_Bg" style="width:100%;height:100%;margin-top:0px;margin-left:0px;display:inline-block;text-align:center;line-height:100px;
 background-image: url('https://2.bp.blogspot.com/-olsNvxOg_bo/WTi8Dwe3E1I/AAAAAAAAO2w/lVUcldNb85EbZQ-5BZr7-EjOIgdSpgVtQCLcB/s1600/20170602_004.jpg');
-moz-background-size: contain ;
-o-background-size: contain;
-webkit-background-size: contain;
-ms-background-size: contain;
background-size: contain; 
background-position: center; background-repeat: no-repeat; border:2px solid #000000;background-color:#000000; ">
</div>

<div id="F123456789_BTUP" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.2"  style=" margin-top:-40px ; cursor:pointer;  vertical-align:middle;opacity:0.2" >

<div id="F123456789_IMG" style="text-align: center;vertical-align: top;display: table-cell; padding-right:2px;">
<img  style="width:20px;height:18px;" onclick="F123456789_inout()" src="https://1.bp.blogspot.com/-PlqS680IiLA/WrDeWgnjsQI/AAAAAAAAPig/Ozm5SXab-PAzMm3CKwlIRMKpMbx7L2mKQCLcBGAs/s80/%25E4%25B8%258B%25E8%25BC%2589.jpg" />
</div>

<div id="F123456789_BTLESS"style="text-align: center;vertical-align: top;display: table-cell; ">
<button class="But2" style="width:30px;height:20px;" onclick="F123456789_loss()" type="button"> - </button>
</div>

<div id="F123456789_BTPLAY" style="text-align: center;vertical-align: top;display: table-cell; ">
<button class="But2" style="width:50px;height:20px;" onclick="F123456789_PLay(this.innerHTML)" type="button">Play</button>
</div>

<div id="F123456789_BTADD"style="text-align: center;vertical-align: top;display: table-cell; padding-right:3px;">
<button class="But2" style="width:30px;height:20px;" onclick="F123456789_add()" type="button"> + </button>
</div>

<div id="F123456789_BTDP1"style="text-align: center;vertical-align: top;display: table-cell; padding-right:-1px;">
<button class="text1" style="width:100px;height:20px;"  type="button"> 999</button>
</div>

<div id="F123456789_BTDPALL"style="text-align: center;vertical-align: top;display: table-cell; padding-right:3px;">
<button class="text2" style="width:100px;height:20px;" type="button"> 999 </button>
</div>

</div>

</div>
<img src onerror='F123456789_onload()' style="display: none;">
</center>
<style>
.amouse{opacity:0.4 }
.amouse:hover {opacity:1.0 }:

</style>

<script>

var newid="";
var F123456789A= [ " ",
"https://2.bp.blogspot.com/-ZD55rVwzs4k/WrNiJSZ7X9I/AAAAAAAAPk4/goljmrKYpeoA8L4bhJcIk4S-1_ve8AqcwCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0002.jpg" ,
"https://3.bp.blogspot.com/-FQbqOis1Lm8/WrNiJRYqKcI/AAAAAAAAPk4/nPmUwEKAd18CBnWj6l53Y2rodO9s3ZyxACKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0003.jpg" ,
"https://3.bp.blogspot.com/-0Zi3KpShOG4/WrNiJetv0mI/AAAAAAAAPk4/mr-MIWMRxQw48Ci3Ts6tdPZezv0yKeoUgCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0024.jpg" ,
"https://2.bp.blogspot.com/-Vu4r4g49I0E/WrNiJc_yOrI/AAAAAAAAPk4/L3PvN8Yuq50en3gRSoTtmwowKlTrrXxkgCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0006.jpg" ,
"https://4.bp.blogspot.com/-xyJhCFZyNeQ/WrNiJZlB6rI/AAAAAAAAPk4/o_vKuipMg_wiSQpOdP3NjopUMTZoGzJXgCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0007.jpg" ,
"https://3.bp.blogspot.com/-55EYtqN1YbM/WrNiJUcFBiI/AAAAAAAAPk4/6ftPC2lnlAoCVrqFX71PcsbdXeRQDNfxACKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0008.jpg" ,
"https://1.bp.blogspot.com/-UfjoYi0NN7Q/WrNiJc-1JuI/AAAAAAAAPk4/9r6HbfGIDCgaKZ4Tcu1uFVtwXot6LLxoACKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0004.jpg" ,
"https://2.bp.blogspot.com/-X7uG4Dv0lYY/WrNiJcQRSFI/AAAAAAAAPk4/i1YtNXKdEUUw5ErsfLH7OVqfo0lZoyViQCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0005.jpg" ,
"https://3.bp.blogspot.com/-L3pe-Leh72E/WrNiJRocANI/AAAAAAAAPk4/Lo4W2GaY8J4JYEHi1IxlWwL1VwPugQUFQCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0009.jpg" ,
"https://4.bp.blogspot.com/-2Ni-hCwhrMo/WrNiJeJBX9I/AAAAAAAAPk4/4wvfi9v36h0CiD-E0o4qWTZW7rFifPD4QCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0010.jpg" ,
"https://4.bp.blogspot.com/-Rwp2mh_VYi8/WrNiJaSIQ0I/AAAAAAAAPk4/3GQdiW_lV60L59r6wVyw3kjMNNLxOH85QCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0015.jpg" ,
"https://2.bp.blogspot.com/-5EjUObVbgzE/WrNiJU-rVDI/AAAAAAAAPk4/Ukg39Q3UdzgUMH4i0mwTjv1Re4Ux3UkiQCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0011.jpg" ,
"https://1.bp.blogspot.com/-2jrH2s6BAXU/WrNiJUyJlYI/AAAAAAAAPk4/NRZ92hCQY7orOT8Qu4mZDllxsgVMHDzQgCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0013.jpg" ,
"https://1.bp.blogspot.com/-_ipmDfzGkkQ/WrNiJYDmBZI/AAAAAAAAPk4/e4SxOQXxJqYQbC1188ZHhXUeeg7fwe7TQCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0012.jpg" ,
"https://2.bp.blogspot.com/-p9qHpAaamPk/WrNiJdUwU3I/AAAAAAAAPk4/zKiYdREFbbQ6KzDSEalJdBUm238-rcOHQCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0016.jpg" ,
"https://2.bp.blogspot.com/-AWQrbam1ME8/WrNiJeOaIvI/AAAAAAAAPk4/e8SPvAZxe6AsDg_F-WyEff5x4nF_2ANLgCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0017.jpg" ,
"https://2.bp.blogspot.com/-iMaRbamGbhc/WrNiJYXhcII/AAAAAAAAPk4/_DoUymx2YUc_ZoBj8bDoyxcjfN-iBmddgCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0018.jpg" ,
"https://3.bp.blogspot.com/-62drd0ofopI/WrNiJQdHhwI/AAAAAAAAPk4/7DCE9U86V9sRVgQ3jDZnYsu4CfVUjW4_gCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0019.jpg" ,
"https://1.bp.blogspot.com/-vc1iS9zWvss/WrNiJUhNZYI/AAAAAAAAPk4/8QfCyayeRLsk3jGIlpw3ec8LDfhFMqX9wCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0020.jpg" ,
"https://4.bp.blogspot.com/-ZztLTdPvDkA/WrNiJd38pfI/AAAAAAAAPk4/aQOXIzkdwMQkbUoHsqAbB61_LkUewqp6wCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0021.jpg" ,
"https://4.bp.blogspot.com/-gPDl8Lf_Aew/WrNiJQ5IkHI/AAAAAAAAPk4/8Fz62iZ71-k0qYvZqNx9hB7egZbyJ7ZSwCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0014.jpg" ,
"https://2.bp.blogspot.com/-fkfcNOwXqY4/WrNiJYjUSLI/AAAAAAAAPk4/qppC-l2tZj8U-rLnRbtipfyT5mw2fQH7wCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0022.jpg" ,
"https://1.bp.blogspot.com/-fk4dWDvmkF0/WrNiJbftezI/AAAAAAAAPk4/ez4f5zIKeXYyFQX1E195We-yWcJNhcJFQCKgBGAs/s1600/%25E6%25B7%2598%25E5%25AF%25B620141224_0023.jpg" ,
]

function F123456789_onload(x) {
document.getElementById('F123456789_Bg').style.backgroundImage="url(" +F123456789A[1] + ")";
document.getElementById('F123456789_BTDP1').getElementsByClassName('text1')[0].innerHTML = 1;
document.getElementById('F123456789_BTDPALL').getElementsByClassName('text2')[0].innerHTML="/ "+ (F123456789A.length -1) ;
}
</script>

<!-------------------------- Play Stop------------------------------------------------------------------>
<script>
function F123456789_PLay() {
var F123456789_PS = document.getElementById('F123456789_BTPLAY').getElementsByClassName('But2')[0].innerHTML;
if( F123456789_PS == "Play" ){
document.getElementById('F123456789_BTPLAY').getElementsByClassName('But2')[0].innerHTML = "Stop";
F123456789_auto();
}
else {
document.getElementById('F123456789_BTPLAY').getElementsByClassName('But2')[0].innerHTML = "Play";
clearTimeout(F123456789_AUTO)
}

}
</script>

<!-------------------------- Play AUTO------------------------------------------------------------------>
<script>
function F123456789_auto() {
var F123456789_automig = document.getElementById('F123456789_BTDP1').getElementsByClassName('text1')[0].innerHTML;
    F123456789_automig++ ; if(F123456789_automig >= F123456789A.length ) { F123456789_automig = 1;}
     document.getElementById('F123456789_Bg').style.backgroundImage="url(" +F123456789A[F123456789_automig] + ")";
     document.getElementById('F123456789_BTDP1').getElementsByClassName('text1')[0].innerHTML=F123456789_automig;
    F123456789_AUTO = setTimeout('F123456789_auto( )', 2000)
}
//alert(migpage);

</script>
<!-------------------------- 減--------------------------------------------------------------------->
<script>
function F123456789_loss() {
   var xx = document.getElementById('F123456789_BTDP1').getElementsByClassName('text1')[0].innerHTML;
   xx--;
   if(xx <= 0 ) { xx = F123456789A.length-1;}
       document.getElementById('F123456789_Bg').style.backgroundImage="url(" +F123456789A[xx] + ")";
       document.getElementById('F123456789_BTDP1').getElementsByClassName('text1')[0].innerHTML=xx;
}
</script>
<!--------------------------加----------------------------------------------------------------------->
<script>
function F123456789_add() {
   var xx = document.getElementById('F123456789_BTDP1').getElementsByClassName('text1')[0].innerHTML;
   xx++;
   if(xx >= F123456789A.length ) { xx = 1;}
       document.getElementById('F123456789_Bg').style.backgroundImage="url(" +F123456789A[xx] + ")";
       document.getElementById('F123456789_BTDP1').getElementsByClassName('text1')[0].innerHTML=xx;
}
</script>
<!--------------------------按 ESC 取消全螢幕顯示 改 height width------------------------------------------------------------------------>
<script>
            document.addEventListener("fullscreenchange", screen_change);
            document.addEventListener("webkitfullscreenchange", screen_change);
            document.addEventListener("mozfullscreenchange", screen_change);
            document.addEventListener("MSFullscreenChange", screen_change);
function screen_change() {
  var fullE= document.getElementById('F123456789');
if( document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
}
else{fullE.style.height   = "300px";
    fullE.style.width    = "500px";;}
        }
</script>


<!--------------------------進出 全螢幕顯示------------------------------------->
<script>
function F123456789_inout() {
   if((window.fullScreen) ||(window.innerWidth == screen.width && window.innerHeight == screen.height)) {F123456789_Fout()}
   else { F123456789_Fin()  }
}
</script>
<!--------------------------全螢幕顯示------------------------------------->
<script>
function F123456789_Fin() { 
var fullE= document.getElementById('F123456789');
if(fullE.requestFullscreen) { fullE.requestFullscreen();   } else
if(fullE.mozRequestFullScreen) { fullE.mozRequestFullScreen();   } else
if(fullE.webkitRequestFullscreen) { fullE.webkitRequestFullscreen();   } else
if(fullE.msRequestFullscreen) {  fullE.msRequestFullscreen();   }
fullE.style.height   = "100%";
fullE.style.width    = "100%";
}
</script>

<!--------------------------取消全螢幕顯示------------------------------------->
<script>
function F123456789_Fout() { 
var fullE= document.getElementById('F123456789');
if (document.exitFullscreen) {document.exitFullscreen();}      else
if (document.msExitFullscreen) {document.msExitFullscreen();}      else
if (document.mozCancelFullScreen) {document.mozCancelFullScreen();}      else
if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}
fullE.style.height   = "300px";
fullE.style.width    = "500px";
}
</script>

沒有留言:

張貼留言