当前位置:首页 > 网页特效 > 鼠标特效 >

非常酷的鼠标拖拽翻页效果

时间:2016-07-16 08:45 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
非常酷的鼠标拖拽翻页效果

非常酷的鼠标拖拽翻页效果,值得收藏。

<html>
<head>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,codesocang.com,sky,www.codesocang.com,源码搜藏网" />
<meta name="description" content="www.codesocang.com,源码搜藏网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在源码搜藏网" />
<title>非常酷的鼠标拖拽翻页效果,codesocang整理收集,源码搜藏网欢迎您。</title>
<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;">
<a href="http://www.codesocang.com/">源码搜藏网</a>,站长必备的高质量网页特效和广告代码。codesocang.com,站长js特效。<hr>
<!--欢迎来到源码搜藏网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.codesocang.com,codesocang@msn.com,用.net打造靓站-->
<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);
                    }
                } //欢迎来到源码搜藏网,我们的网址是www.codesocang.com,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
            }
            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;
                    }
                } //欢迎来到源码搜藏网,我们的网址是www.codesocang.com,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
            }
            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));
            } //欢迎来到源码搜藏网,我们的网址是www.codesocang.com,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        }
    }
    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;
            }
        } //欢迎来到源码搜藏网,我们的网址是www.codesocang.com,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        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.codesocang.com">源码搜藏网</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">啊!停不住的爱人</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">宁静温泉</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">你的样子</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">恋曲1980</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">恋曲1990</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">恋曲2000</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">亚细亚的孤儿</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">伴侣</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">童年</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">源码搜藏网</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">爱人同志</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">思念</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">母亲</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">是否</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=5">牧童</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">青春舞曲</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">蒲公英</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">未来的主人翁</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">如今才是唯一</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">codesocang.com</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">弹唱词</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">飞车</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=1">东方之珠</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">滚滚红尘</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">光阴的故事</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">之乎者也</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">现象七十二变</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">乡愁四韵</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">穿过你的黑发我的手</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">源码搜藏网</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">歌</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">黄色面孔</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">台北红玫瑰</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">我所不能了解的事</a></li>
 </ul>
</div>
</body>
</html>

 

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-shubiao/4644.html

鼠标特效下载排行

最新文章