更新时间：2015年10月21日

JS实现图片翻书效果

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实现图片翻书效果-懒人图库</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;

</div>
						<br>
						<div class="clear blank10"></div>
						上一篇： <a href="/thread-3649-1.html" title="图片自动按比例缩小代码防止页面被图片撑破">图片自动按比例缩小代码防止页面被图片撑破</a><br>
						下一篇：<a href="/thread-3651-1.html" title="给图片加上播放按钮">给图片加上播放按钮</a>
						<div class="clear"></div>
					</div>
				</div>
			</div>
        </div>
    </div>

<div class="footer wow animated fadeInUp">
    <div class="mainbox container clearfix">
        <div class="foot_l fl">
            <i class="title">联系我们</i>
            <div class="footer_address">长沙高新开发区像素大厦(上门请先电话预约)</div>
            <em class="foooter_phone">0731-84469346/15274839229</em>
            <span class="sm-hide">0731-84469346</span>

<p class="mld" >用心打造长沙网站制作优秀品牌，用心服务 <br>携手共赢！</p>
          <P class="mld">在线QQ技术服务中心：  点击对话
			  <a 
target=blank href=tencent://message/?uin=273039264&Site=龙帝网络科技&Menu=yes  ><font class="red">273039264</font></a> 
<a target=blank href=tencent://message/?uin=95018369&Site=龙帝网络科技&Menu=yes ><font class="red">95018369</font></a> 
<a target=blank href=tencent://message/?uin=975371319&Site=龙帝网络科技&Menu=yes ><font class="red">975371319</font></a></p>
        </div>
        <div class="foot_c fl">
            <div class="title">信息导航</div>
            <div class="aboutlist">
 <a href="http://www.ld99.cn/list-1689.html" target="_blank">经典案例</a>
 <a href="http://www.ld99.cn/list-1692.html" target="_blank">新闻动态</a>
 <a href="http://www.ld99.cn/list-1690.html" target="_blank">公司简介</a>
 <a href="http://www.ld99.cn/list-1690.html#wh" target="_blank">企业文化</a>            
 <a href="http://www.ld99.cn/list-1690.html#zp" target="_blank">加入我们</a>
 <a href="http://www.ld99.cn/list-1691.html" target="_blank">联系我们</a>
            </div>
        </div>
        <div class="foot_r fr">
            <div class="title">关注公众号</div>
            <div class="aboutlist"><img src="/ld/images/weixi.jpg"></div>
        </div>
    </div>
    <div class="mainbox container copyright clearfix">
       
        <span class="span_l fl" >Copyright ©2023 长沙龙帝网络科技有限公司 版权所有   <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023008034号</a>
 <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43019002001179" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="http://kj.zhzszq.com/i.png" style="float:left;"/> 湘公网安备 
43019002001180号</a>
</span>

<span class="span_r fr"><a href="http://www.ld99.cn">长沙网站设计</a> | <a href="http://www.ld99.cn">长沙手机网站建设</a> | <a href="http://www.ld99.cn">长沙网站优化</a> |  <a href="
http://www.ld99.cn">长沙网站备案</a> <a href="http://www.ld99.cn">长沙做网站的公司</a></span>
    </div>
</div>

<script src='/js/jquery.js'></script>
<script src="/js/index.js"></script>
<script type="text/javascript" src="/ld/js/script.js"></script>

}
pageAnimate('.page-animate');

//设置选中
	(function($a) {

var href = location.href,
        target;
    if (location.search != '') {
        href = href.split(location.search)[0]
    }
    
    for (var i = 0; i < $a.length; i++) {
        var thisHref = $a[i].href;
        if (thisHref == href) {
            target = $a[i];
            break;
        };

}

var $li = $(target).parent(),
        $menu = $(target).parents('.dropdown-menu');
    if ($menu.length != 0) {

$li = $menu.parent()

}

$li.addClass('active').siblings().removeClass('active');

})($('.nav-box').find('a'));

</script>
<script>
    function relyLoadedCallBackInPage(){
  $('.page-timer').each(count);
      $('.case-tab').find('li').eq('0').addClass('curr').siblings().removeClass('curr')
      $('.case-box').find('.case-welcome').each(function () {
         var _value = $(this).attr('data-base'); 
        if(_value == 0){
            $(this).removeAttr("href");
            $(this).hide()
        }
    })
    $('.case-right a').click(function(){
            $('#qidian_wpa_2852156247_26').contents().find('.btn-area').click()
        })
    var mySwiper =  new Swiper('.swiper-container', {
       
        slidesPerView: 6,
        paginationClickable: true,
        spaceBetween: 15,
         breakpoints: {
            //宽度小于1024的时候
            768: {
                slidesPerView: 4,
                spaceBetween: 10
            },
       
        }

});
}
</script>
</body>
</html>