网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 拖动翻页效果
内容
    查看效果:拖动翻页效果
    <html>
    <head>
    <title>拖动翻页效果</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=#>东方之珠</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>啊！停不住的爱人</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>宁静温泉</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>你的样子</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>恋曲1980</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>恋曲1990</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>恋曲2000</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>亚细亚的孤儿</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>伴侣</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>童年</a></li>
    </ul>
    </div>
    <div>
    <ul>
    <li><span>2009-4-9 12:35</span><a href=#>爱的箴言</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>爱人同志</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>思念</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>母亲</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>是否</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>牧童</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>青春舞曲</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>蒲公英</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>未来的主人翁</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>如今才是唯一</a></li>
    </ul>
    </div>
    <div>
    <ul>
    <li><span>2009-4-9 12:35</span><a href=#>暗恋</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>弹唱词</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>飞车</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>东方之珠</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>滚滚红尘</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>光阴的故事</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>之乎者也</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>现象七十二变</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>乡愁四韵</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>穿过你的黑发我的手</a></li>
    </ul>
    </div>
    <div>
    <ul>
    <li><span>2009-4-9 12:35</span><a href=#>大兵歌</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>歌</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>黄色面孔</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>台北红玫瑰</a></li>
    <li><span>2009-4-9 12:35</span><a href=#>我所不能了解的事</a></li>
    </ul>
    </div>
    </body>
    </html>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/23 6:18:53