更新时间：2015年10月21日

超酷JS拖拽翻页效果

<html>
<head>
<title>blog</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
body{
        border:0px;
        margin:0px;
        overflow:hidden;
        background-color:transparent;
        font-family:宋体;
}
.page{
        position:absolute;
        width:700px;
        border:1px solid #999;
        background-color:#000;
        left:425px;
        margin-left:-350px;
        cursor:default;
        z-index:0;
}
ul{
        height:320px;
        list-style:none;
        margin:40px 50px 0px;
        padding:0px;
}
li{
        width:100%;
        height:30px;
        line-height:30px;
        font-size:14px;
        text-align:left;
        border-bottom:1px dashed #999;
}
a{
        text-decoration:none;
        color:#999;
}
a:hover{
        font-weight:bold;
}
li span{
        float:right;
        color:#999;
}
.tip{
        display:block;
        width:100%;
        font-size:12px;
        color:#999;
        text-align:center;
        margin:10px 0px 20px;
}
</style>
</head>
<body onselectstart="return false;">
<script>
function id(obj){
        return document.getElementById(obj);
}
var page;
var lm,mx;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
        page=document.getElementsByTagName("div");
        if(page.length>0){
                page[0].style.zIndex=2;
        }
        for(i=0;i<page.length;i++){
                page[i].className="page";
                page[i].innerHTML+="<span class=tip>第 "+(i+1)+"/"+page.length+" 页 提示：左右拖拽翻页</span>";
                page[i].id="page"+i;
                page[i].i=i;
                page[i].onmousedown=function(e){
                        if(!en){
                                if(!e){e=e||window.event;}
                                lm=this.offsetLeft;
                                mx=(e.pageX)?e.pageX:e.x;
                                this.style.cursor="w-resize";
                                md=true;
                                if(document.all){
                                        this.setCapture();
                                }else{
                                        window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                                }
                        }
                }
                page[i].onmousemove=function(e){
                        if(md){
                                en=true;
                                if(!e){e=e||window.event;}
                                var ex=(e.pageX)?e.pageX:e.x;
                                this.style.left=ex-(mx-lm)+350;
                                
                                
                                
                                
                                if(this.offsetLeft<75){
                                        var cu=(this.i==0)?page.length-1:this.i-1;
                                        page[sh].style.zIndex=0;
                                        page[cu].style.zIndex=1;
                                        this.style.zIndex=2;
                                        sh=cu;
                                }
                                if(this.offsetLeft>75){
                                        var cu=(this.i==page.length-1)?0:this.i+1;
                                        page[sh].style.zIndex=0;
                                        page[cu].style.zIndex=1;
                                        this.style.zIndex=2;
                                        sh=cu;
                                }
                                
                                
                                
                                
                                
                                
                                
                        }
                }
                page[i].onmouseup=function(){
                        this.style.cursor="default";
                        md=false;
                        if(document.all){
                                this.releaseCapture();
                        }else{
                                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                        }
                        flyout(this);
                }
        }
}
function flyout(obj){
        if(obj.offsetLeft<75){
                if(                (obj.offsetLeft + 350 - 20)        >        -275        ){
                        obj.style.left=obj.offsetLeft + 350 - 20;
                        window.setTimeout("flyout(id('"+obj.id+"'));",0);
                }else{
                        obj.style.left=-275;
                        obj.style.zIndex=0;
                        flyin(id(obj.id));
                }
        }
        if(obj.offsetLeft>75){
                if(                (obj.offsetLeft + 350 + 20)        <        1125        ){
                        obj.style.left=obj.offsetLeft + 350 + 20;
                        window.setTimeout("flyout(id('"+obj.id+"'));",0);
                }else{
                        obj.style.left=1125;
                        obj.style.zIndex=0;
                        flyin(id(obj.id));
                }
        }
}
function flyin(obj){
        if(obj.offsetLeft<75){
                if(                (obj.offsetLeft + 350 + 20)        <        425                ){
                        obj.style.left=obj.offsetLeft + 350 + 20;
                        window.setTimeout("flyin(id('"+obj.id+"'));",0);
                }else{
                        obj.style.left=425;
                        en=false;
                }
        }
        if(obj.offsetLeft>75){
                if(                (obj.offsetLeft + 350 - 20)        >        425                ){
                        obj.style.left=obj.offsetLeft + 350 - 20;
                        window.setTimeout("flyin(id('"+obj.id+"'));",0);
                }else{
                        obj.style.left=425;
                        en=false;
                }
        }
}
</script>
<div>
        <ul>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>东方之珠</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>啊！停不住的爱人</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>宁静温泉</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>你的样子</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>恋曲1980</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>恋曲1990</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>恋曲2000</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>亚细亚的孤儿</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>伴侣</a></li>
                <li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>童年</a></li>
        </ul></div>

</div>
						<br>
						<div class="clear blank10"></div>
						上一篇： <a href="/thread-3652-1.html" title="javascript显示系统时间">javascript显示系统时间</a><br>
						下一篇：<a href="/thread-3654-1.html" title="div的内容图片垂直居中代码兼容多浏览器">div的内容图片垂直居中代码兼容多浏览器</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>