欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > IT编程

JavaScript 拖拽翻页效果代码

程序员文章站 2022-03-23 13:31:59

拖拽翻页效果javascript特效-demo by //www.jb51.net html,body{ width:100%; hei...

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>拖拽翻页效果javascript特效-demo by //www.jb51.net</title>
<style type="text/css"> 
html,body{ 
    width:100%; 
    height:100%; 
    border:0px; 
    margin:0px; 
    overflow:hidden; 
} 
#menu{ 
    width:1000px; 
    height:500px; 
    overflow:hidden; 
    background:lightblue; 
} 
.page{ 
    position:absolute; 
    width:300px; 
    height:400px; 
    left:350px; 
    top:50px; 
    background:#fff; 
    border:1px solid #999; 
} 
ul{ 
    list-style:none; 
    height:320px; 
    margin:20px; 
    padding:0px; 
    background:#eee; 
} 
li{ 
     
    font-size:12px; 
    height:20px; 
    line-height:20px; 
    border-bottom:1px dashed #999; 
} 
li span{ 
    float:right; 
} 
li a{ 
    color:#000; 
    text-decoration:none; 
} 
li a:hover{ 
    text-decoration:underline; 
} 
.tip{ 
    display:block; 
    height:20px; 
    margin:0px 20px; 
    line-height:20px; 
    text-align:center; 
    font-size:12px; 
    background:#999; 
} 
</style>
<div id="menu"> 
    <div class="page"> 
        <ul>
<li>
<span>09-11-25</span><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8=" target="_blank" rel="nofollow">rsa文件加密原理及代码实现</a>
</li> 
            <li>
<span>09-11-25</span><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0" target="_blank" rel="nofollow">c#软件后门程序代码</a>
</li> 
            <li style="background:coral;">
<span>09-11-25</span><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8=" target="_blank" rel="nofollow">项目管理软件php版</a>
</li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
        </ul>
</div> 
    <div class="page"> 
        <ul>
<li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
        </ul>
</div> 
    <div class="page"> 
        <ul>
<li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
            <li><span>09-11-25</span></li> 
        </ul>
</div> 
</div>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

上一篇： Animate怎么制作线条变正方形的动画效果?

下一篇：从零开始搭建vue项目

推荐阅读