原生js代码新闻文字列表分页拖拽翻页特效



132 524 175



特效描述:新闻文字列表 分页拖拽翻页 拖拽翻页特效,

代码结构

1. HTML代码

<html>
<head>
<title>列表</title>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<style type="text/css">
body{border:0px;margin:0px;overflow:hidden;background-color:transparent;font-family:宋体;-moz-user-select:none;}
a{text-decoration:none;color:#999;}
a:hover{font-weight:bold;}
/* page */
.page{position:absolute;width:700px;border:1px solid #999;background-color:#000;left:425px;margin-left:-350px;cursor:default;z-index:0;}
.page ul{height:320px;list-style:none;margin:40px 50px 0px;padding:0px;}
.page li{width:100%;height:30px;line-height:30px;font-size:14px;text-align:left;border-bottom:1px dashed #999;}
.page li span{float:right;color:#999;}
.page .tip{display:block;width:100%;font-size:12px;color:#999;text-align:center;margin:10px 0px 20px;}
</style>
</head>
<body onselectstart="return false;">
<script type="text/javascript">
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.dijiuzhanzhang.com/">东方之珠</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">啊!停不住的爱人</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">宁静温泉</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">你的样子</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">恋曲1980</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">恋曲1990</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">恋曲2000</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">亚细亚的孤儿</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">伴侣</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">童年</a></li>
		</ul>
	</div>
	<div>
		<ul>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">爱的箴言</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">爱人同志</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">思念</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">母亲</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">是否</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">牧童</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">青春舞曲</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">蒲公英</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">未来的主人翁</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">如今才是唯一</a></li>
		</ul>
	</div>
	<div>
		<ul>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">暗恋</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">弹唱词</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">飞车</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">东方之珠</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">滚滚红尘</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">光阴的故事</a></li>
			<li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>之乎者也</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">现象七十二变</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">乡愁四韵</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">穿过你的黑发我的手</a></li>
		</ul>
	</div>
	<div>
		<ul>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">大兵歌</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">歌</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">黄色面孔</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">台北红玫瑰</a></li>
			<li><span>2009-4-9 12:35</span><a href="http://www.dijiuzhanzhang.com/">我所不能了解的事</a></li>
		</ul>
	</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 文字层叠 文字淡出淡进 文字淡出 文字淡进 文字放大缩小 文字缩放 文字大小 文字放大 文字缩小 文字变大 文字变小 文字收缩展开 文字收缩 文字展开 文字提示框 提示文字 文字全屏 文字拖动 文字拖拽 文字延迟加载 文字延迟 文字加载 文字翻转 文字旋转 360全景 360度全景 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 拖动 拖拽 拖动插件 拖拽插件 文字切换 文字选项卡 文字滑动 文字滑块 文字滚动 文字无缝滚动 文字间歇滚动 图片文字 文字导航菜单 文字导航 文字菜单 文字 文字插件 文字拖动 文字拖拽 文字列表

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到