欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js圖片翻書效果代碼分享

 更新時(shí)間：2015年08月20日 09:37:10   投稿：lijiao  
這篇文章主要介紹了js實(shí)現(xiàn)圖片翻書效果,代碼簡(jiǎn)單，效果很棒，感興趣的小伙伴們可以參考一下

這是一款基于javascript實(shí)現(xiàn)圖片翻書效果代碼，圖片可以從左右兩個(gè)方向進(jìn)行切換，用戶還可以自定義對(duì)應(yīng)圖片的標(biāo)題與文字說明，是一款非常實(shí)用的圖片特效源碼。

七夕情人節(jié)也可以是表白的神器，放一些回憶的照片，還可以永久保存，是不是很有心意，推薦給大家，有需要的小伙伴可以學(xué)習(xí)學(xué)習(xí)。

運(yùn)行效果圖：

大家可以先運(yùn)行一下    -------------------------------------效果運(yùn)行-----------------------------------------

為大家分享的jQuery幻燈片帶縮略圖輪播代碼如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS實(shí)現(xiàn)圖片翻書效果</title>
<META http-equiv=imagetoolbar content=no>
<STYLE type=text/css>
#center {
 LEFT: 50%; POSITION: absolute; TOP: 50%
}
#DHTMLBOOK {
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
}
#TXTBOX {
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center
}
.page {
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
}
.right {
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%
}
.turn {
 BACKGROUND: #000000
}
.img {
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%
}
</STYLE>

<SCRIPT type=text/javascript><!--

document.onselectstart = function () { return false; }

var nI = 0;
var kI = 0;
var run = false;

function setOpacity(obj,o) {
 if (o<0) o=0; else if (o>100) o = 100;
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
 P1.style.left = 50-(2.5*p)+"%";
 P1.style.width = (2.5*p)+"%";
 setOpacity(P1i, .5*p*p);
 if (p == 20) run = false;
}
function TPR_(p) {
 P2.style.width = 50-(2.5*p)+"%";
 setOpacity(P2i, 100-.5*(p*p));
 if (p == 20) {
 P2i.src = IMGSRC[kI].src;
 setOpacity(P2i, 100);
 P2.style.width = "50%";
 for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
 }
}
function TPR() {
 if (!run) {
 run = true;
 P01i.src = IMGSRC[kI].src;
 P1.style.width = 0;
 kI++;
 if (kI>=nI) kI = 0;
 titLe(kI);
 P02i.src = IMGSRC[kI].src;
 P1i.src = IMGSRC[kI].src;
 for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
 } else setTimeout("TPR()", 100);
}

function TPL__(p) {
 P2.style.width = (2.5*p)+"%";
 setOpacity(P2i, .5*p*p);
 if (p == 20) run = false;
}
function TPL_(p) {
 P1.style.left = (2.5*p)+"%";
 P1.style.width = 40+(10-2.5*p)+"%";
 setOpacity(P1i, 100-.5*(p*p));
 if (p == 20) {
 P1i.src = IMGSRC[kI].src;
 setOpacity(P1i, 100);
 P1.style.left = 0;
 P1.style.width = "50%";
 for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
 }
}
function TPL() {
 if (!run) {
 run = true;
 P02i.src = IMGSRC[kI].src;
 P2.style.width = 0;
 kI--;
 if (kI < 0) kI = nI-1;
 titLe(kI);
 P01i.src = IMGSRC[kI].src;
 P2i.src = IMGSRC[kI].src;
 for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
 } else setTimeout("TPL()", 100);
}
function titLe(p) {
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}
onload = function() {
 IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");
 DB = document.getElementById("DHTMLBOOK");
 P01 = DB.getElementsByTagName("span")[0];
 P01i = P01.getElementsByTagName("img")[0];
 P02 = DB.getElementsByTagName("span")[1];
 P02i = P02.getElementsByTagName("img")[0];
 P1 = DB.getElementsByTagName("span")[2];
 P1i = P1.getElementsByTagName("img")[0];
 P2 = DB.getElementsByTagName("span")[3];
 P2i = P2.getElementsByTagName("img")[0];
 nI = IMGSRC.length;
 P1i.src = IMGSRC[kI].src;
 P2i.src = IMGSRC[kI].src;
 titLe(kI);
 DB.style.visibility = "visible";
}
//-->
</SCRIPT>

<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY>

<DIV id=center>
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>
<SPAN class="page right" onMouseDown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
<SPAN class="page turn right" onMouseDown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN> 
<DIV id=TXTBOX></DIV></DIV></DIV>
<DIV id=imgsrc style="VISIBILITY: hidden">
<IMG alt="JS實(shí)現(xiàn)圖片翻書效果" src="img/1.jpg">
<IMG alt="JS實(shí)現(xiàn)圖片翻書效果" src="img/2.jpg">
<IMG alt="JS實(shí)現(xiàn)圖片翻書效果" src="img/3.jpg"></DIV>

</BODY></HTML>

以上就是為大家分享的javascript圖片翻書效果，希望大家可以喜歡。

相關(guān)文章

  • HTML中的setCapture和releaseCapture使用介紹

    HTML中的setCapture和releaseCapture使用介紹

    setCapture函數(shù)的作用就是將后續(xù)的mouse事件都發(fā)送給這個(gè)對(duì)象，releaseCapture就是將鼠標(biāo)事件還回去，由 document、window、object之類的自行來處理。這樣就保證了在拖動(dòng)的過程中，不會(huì)由于經(jīng)過了其它的元素而受到干擾
    2012-03-03
  • javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說明

    javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說明

    今天在寫一段js時(shí)，發(fā)現(xiàn)IE與FF在動(dòng)態(tài)加載Html元素時(shí)，有一些差別，一起過來看看下面的代碼吧
    2014-01-01
  • js實(shí)現(xiàn)購物網(wǎng)站商品放大鏡效果

    js實(shí)現(xiàn)購物網(wǎng)站商品放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購物網(wǎng)站商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • JavaScript 正則表達(dá)式詳解

    JavaScript 正則表達(dá)式詳解

    正則表達(dá)式(Regular Expression)是一門簡(jiǎn)單語言的語法規(guī)范，是強(qiáng)大、便捷、高效的文本處理工具，它應(yīng)用在一些方法中，對(duì)字符串中的信息實(shí)現(xiàn)查找、替換和提取操作
    2021-11-11
  • JavaScript作用域與作用域鏈優(yōu)化方式

    JavaScript作用域與作用域鏈優(yōu)化方式

    這篇文章主要介紹了JavaScript作用域與作用域鏈優(yōu)化方式,圍繞主題展開JavaScript作用域以及作用域鏈的那些事情，以及針對(duì)它們的一些我們?cè)诖a中優(yōu)化小技巧，需要的朋友可以參考一下
    2022-07-07
  • JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼

    JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼

    本文給大家分享JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼，需要的朋友參考下吧
    2017-06-06
  • JS原形與原型鏈深入詳解

    JS原形與原型鏈深入詳解

    這篇文章主要介紹了JS原形與原型鏈,結(jié)合實(shí)例形式深入分析了JS原型鏈、繼承、組合繼承等相關(guān)原理、操作技巧及注意事項(xiàng),需要的朋友可以參考下
    2020-05-05
  • Javascript中的window.event.keyCode使用介紹

    Javascript中的window.event.keyCode使用介紹

    我們之前發(fā)過不少關(guān)于event.keyCode相關(guān)的文章，大家都可以參考下。
    2011-04-04
  • ES2020系列之空值合并運(yùn)算符 ''??''

    ES2020系列之空值合并運(yùn)算符 ''??''

    這篇文章主要介紹了ES2020系列之空值合并運(yùn)算符 '??'，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • uniapp時(shí)間格式和距離格式的轉(zhuǎn)換

    uniapp時(shí)間格式和距離格式的轉(zhuǎn)換

    這篇文章主要介紹了uniapp時(shí)間格式和距離格式的轉(zhuǎn)換,第一種是把? YYYY-MM-DD hh:mm:ss 轉(zhuǎn)換成?MM月DD日,第二種是把? hh:mm:ss 轉(zhuǎn)換成?hh:mm,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09

最新評(píng)論