网页前端设计

http://www.86y.org

搜索文章

兼容IE/FF可控制图片左右滚动+文字上下滚动

用声音读出全文关注我吧
 2011/3/17 12:04:47 阅读次数:8643

击左右/上下滚动,可以用按钮点击控制,也可以自行滚动!兼容IE/FF可控制图片左右滚动+文字上下滚动
效果图如下:

代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml"><head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    <title>兼容IE/FF可控制图片左右滚动+文字上下滚动</title>  
    <script type="text/javascript">  
    //******comes http://www.86y.org********//  
    //******Editor by charrysong 2010-03-10********//  
    function ok22(container,btnPrevious,btnNext)  
    {  
        ////////////////对外接口/////////////////////////  
        this.IsAutoScroll = true; //是否自动滚动   
        this.IsSmoothScroll= true;//是否平滑连续滚动 平滑滚动:true 间隔滚动:false  
        this.PauseTime = 1000;//间隔滚动时每次滚动间隔的时间。单位:毫秒。建议值:100--3000 适用于间隔滚动。  
        this.Direction = "N"; //滚动方向.向东:E,向北:N  
        this.ControllerType = "click";//上一个和下一个按钮事件的触发方式:click为点击触发滚动 否则就是 鼠标按住按钮触发滚动。支持click 和mousedown两种模式  
        this.BackCall = null;//回调函数 滚动到末尾时执行  
        this.Step = 1;//步长 可以理解为速度1--10  
        ////////////////对外接口/////////////////////////  
          
        this.Speed = 10;  
        this.container = container;  
      
        this.NextButton = this.$(btnNext);  
        this.PreviousButton = this.$(btnPrevious);  
        this.ScrollElement = this.$(container);  
          
        this.UlElement = this.$(container).getElementsByTagName('ul')[0];//ul元素  
        this.UlElement.innerHTML+=this.UlElement.innerHTML;  
      
        this.UlSpace ;//ul的实际宽度  
        this.LiSpace;  
    }  
    ok22.prototype = {  
        lastpos:0,  
        curPos:0,  
        curTimeoutId:null,  
        curIntervalScrollTimeoutId:null,  
        ScrollElementPos:0,  
        $:function(element)  
        {  
            return document.getElementById(element);  
        },  
        Init:function()  
        {  
            this.UlSpace = this.Direction=="E"?this.UlElement.offsetWidth:this.UlElement.offsetHeight;//ul的实际宽度  
            this.LiSpace = parseInt(this.UlSpace/this.UlElement.getElementsByTagName('li').length);  
            this.UlSpace = this.LiSpace*this.UlElement.getElementsByTagName('li').length;  
            this.Direction=="E"?this.$(this.container).style.width=this.UlSpace+"px":this.$(this.container).style.height=this.UlSpace+"px";  
              
            //设置基础样式  
            this.ScrollElement.style.overflow="visible";  
            //this.ScrollElement.parentNode.style.overflow="hidden"; 父节点的样式  
            this.Direction=="E"?this.ScrollElement.style.width="10000px":this.ScrollElement.style.height="10000px";  
            this.UlElement.style.float="left";  
              
            this.ScrollType=this.Direction=="E"?"left":"top";  
            this.Bind(this,this.PreviousButton,this.ControllerType,"Pre");  
            this.Bind(this,this.NextButton,this.ControllerType,"Next");  
              
            this.ScrollElement.onmouseover = this.GetFunction(this,"MouseOver");  
            this.ScrollElement.onmouseout = this.GetFunction(this,"MouseOut");  
        },  
        Reset:function()  
        {  
            this.Pause();  
            this.ScrollElement.style[this.ScrollType] = '0px'  
        },  
        Bind:function(_this,el,type,param)  
        {  
            if(el)  
            {  
                if(type=="click"){  
                    el.onclick = this.GetFunction(this,param);  
                }  
                else  
                {  
                    el.onmousedown = this.GetFunction(this,"MouseDown",param);  
                    el.onmouseup = this.GetFunction(this,"MouseUp");  
                }   
                el.onmouseover = this.GetFunction(this,"MouseOver");  
                el.onmouseout = this.GetFunction(this,"MouseOut");  
            }  
        },  
        Start:function()  
        {  
            if(!this.IsAutoScroll) return;  
            if(this.IsSmoothScroll)  
            {  
                this.SmoothScroll();  
            }  
            else  
            {         
                this.IntervalScroll();  
            }  
        },  
        Pause:function()  
        {  
            clearTimeout(this.curTimeoutId);  
            clearTimeout(this.curIntervalScrollTimeoutId);  
        },  
        MouseOver:function()  
        {     
            clearTimeout(this.mouseoutTimeoutId);  
            this.mouseoverTimeoutId = setTimeout(this.GetFunction(this,"Pause"),10);  
        },  
        MouseOut:function()  
        {  
            clearTimeout(this.mouseoverTimeoutId);  
            this.mouseoutTimeoutId = setTimeout(this.GetFunction(this,"Start"),10);  
        },  
        MouseDown:function(direction)  
        {  
            var _step;  
            var _to;  
            if(direction=="Pre")  
            {  
                _step = this.Step*2;  
                curPos = parseInt(this.ScrollElement.style[this.ScrollType]);  
                if(!curPos) curPos=0;  
                if(curPos==0)  
                {  
                    this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";  
                    this.curPos=-this.UlSpace/2;  
                }  
                _to = 0;  
            }  
            else  
            {  
                _step = -this.Step*2;  
                _to = -this.UlSpace/2;  
            }  
            moveParams = {from:this.curPos, to:_to, step: _step,controller:"MouseDown:" + direction,callback:this.GetFunction(this,"ScrollFinish")};              
            this.RunScroll(moveParams);  
        },  
        MouseUp:function()  
        {  
            clearTimeout(this.curTimeoutId);  
        },  
        Pre:function()  
        {  
            var curPos = parseInt(this.ScrollElement.style[this.ScrollType]);  
            if(!curPos) curPos=0;  
            var _to ;  
            if(curPos==0)  
            {  
                this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";  
                this.curPos=-this.UlSpace/2;  
                _to = -this.UlSpace/2 + this.LiSpace;  
            }  
            else  
            {  
                _to = this.curPos%this.LiSpace==0?this.curPos + this.LiSpace:parseInt(this.curPos/this.LiSpace)*this.LiSpace;  
            }  
            moveParams = {from:this.curPos, to:_to, step: this.Step*2,controller:"Previous",callback:this.GetFunction(this,"ScrollFinish")};              
            this.RunScroll(moveParams);  
        },  
        Next:function()  
        {  
            _to = this.curPos%this.LiSpace==0?this.curPos - this.LiSpace:(parseInt(this.curPos/this.LiSpace)-1)*this.LiSpace;  
            moveParams = {from:this.curPos, to:_to, step: -this.Step*2,controller:"Next",callback:this.GetFunction(this,"ScrollFinish")};             
            this.RunScroll(moveParams);  
        },  
        IntervalScroll:function()  
        {  
            var _to = parseInt(this.curPos/this.LiSpace)*this.LiSpace-this.LiSpace;  
            var moveParams = {from:this.curPos, to:_to, step: -this.Step,controller:"IntervalScroll",callback:this.GetFunction(this,"ScrollFinish")};     
            this.RunScroll(moveParams);  
        },  
        SmoothScroll:function()  
        {  
            var _to = -this.UlSpace/2;  
            var moveParams = {from:this.curPos, to:_to, step: -this.Step,controller:"SmoothScroll",callback:this.GetFunction(this,"ScrollFinish")};   
            this.RunScroll(moveParams);  
        },  
        RunScroll:function(params)  
        {  
            this.Scroll(params);  
        },  
        Scroll:function(param)  
        {  
            var step = Math.abs(param.to - this.curPos)<Math.abs(param.step)?param.to - this.curPos:param.step;  
            this.ScrollElement.style[this.ScrollType] =(param.from+step)+"px";  
            this.curPos = parseInt(this.ScrollElement.style[this.ScrollType]);  
            clearTimeout(this.curTimeoutId);  
            if(this.curPos!=param.to)  
            {  
                var moveParams = {from:this.curPos, to:param.to, step: param.step,controller:param.controller,callback:param.callback};  
                this.curTimeoutId = setTimeout(this.GetFunction(this,"Scroll",moveParams),this.Speed);  
            }  
            else  
            {  
                if(param.callback) param.callback();  
                if(param.controller=="SmoothScroll")  
                {   this.SmoothScroll();}  
                else if (param.controller=="IntervalScroll")  
                {  
                    if(this.curIntervalScrollTimeoutId) clearTimeout(this.curIntervalScrollTimeoutId);  
                    this.curIntervalScrollTimeoutId = setTimeout(this.GetFunction(this,"IntervalScroll"),this.PauseTime);  
                }  
                else if(param.controller.indexOf("MouseDown")!=-1)  
                {  
                    derection = param.controller.split(':')[1];  
                    this.MouseDown(derection);  
                }  
            }  
        },  
        ScrollFinish:function()  
        {  
            if(this.curPos<=-this.UlSpace/2)  
            {  
                this.ScrollElement.style[this.ScrollType] = "0px";  
            }  
            else if(this.curPos>=0)  
            {  
                this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";  
            }  
            this.curPos = parseInt(this.ScrollElement.style[this.ScrollType]);  
            if(this.BackCall)this.BackCall();  
        },  
        GetFunction:function(variable,method,param)  
        {  
            return function()  
            {  
                variable[method](param);  
            }  
        }  
    }  
    </script>  
    <style>  
    *{margin:0;padding:0;font-style:normal;font-weight:normal;}  
    a{color:#333;}  
    h2{font-size:14px;}  
    /*合作媒体  图片滚动左右,文字上下滚动,兼容ie/ff  兼容IE/FF可控制图片左右滚动+文字上下滚动*/  
    .picsbox{width:642px;padding:0 0 16px;border:1px solid #BDDEF4;margin:10px;}  
    .picsbox .picList{width:610px;height:160px;margin:10px 0 0 0;overflow:hidden;position:relative;}  
      
    #photolist_84 {position:relative;width:50000px;overflow: visible;}  
    #photolist_84 ul{float:left;margin:0px;padding:0px 0 0 12px;}  
    #photolist_84 ul li{float:left;width:120px;margin:0 12px 0 23px;display:inline;overflow:hidden;font-size:12px;}  
    #photolist_84 ul li a img{border:none;width:120px;height:160px;}  
      
    .blockR2{ float:left;margin:10px 10px 0 10px;display:inline;background:#fff;border:1px solid #BDDEF4;width:313px;}  
    .scrollList_38 {position: relative;padding:0 10px;width:293px;height:105px;margin:10px 0;overflow:hidden;}  
    .scrollList_38 .photolist {position: relative;overflow: visible;height:10000px;}  
    .scrollList_38 .photolist ul{float:left;margin:0px;padding:0px;}  
    .scrollList_38 .photolist li {float:left;width:310px;list-style:none;line-height:22px;font-size:12px;}  
      
    .us_tit{ background:url(http://www.86y.org/upload/images/20110317114118857.jpg) no-repeat;height:25px;padding:17px 0 0 6px;}  
    .us_tit span{float:right;margin:-2px 0 0;}  
    .us_tit span a{background:url(http://www.86y.org/upload/images/20110317114052529.png) no-repeat 0 0;width:23px;height:19px;margin-right:5px;display:inline-block;cursor:pointer;}  
    .us_tit span a.scollLeft{background-position:0 0;}  
    .us_tit span a.scollRight{background-position:0 -19px;}  
    .us_tit span a.scollup{background-position:0 -38px;}  
    .us_tit span a.scolldown{background-position:0 -57px;}  
    </style>  
    </head>  
    <body>  
    <div class="picsbox">  
        <h2 class="us_tit"><span><a class="scollLeft" id="pre_84"></a><a class="scollRight" id="next_84"></a></span><a href="http://www.86y.org">左右移动</a></h2>  
        <div class="picList">  
            <div id="photolist_84">  
                <ul class="us_blue">  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714001807_S.jpg"></a></li>  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714004648_S.jpg"></a></li>  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714012809_S.jpg"></a></li>  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714015509_S.jpg"></a></li>  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714021876_S.jpg"></a></li>  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714024050_S.jpg"></a></li>  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714031618_S.jpg"></a></li>  
                    <li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714040139_S.jpg"></a></li>  
                </ul>  
            </div>  
        </div>  
    </div>      
    <div class="blockR2">  
        <h2 class="us_tit"><span><a class="scollup" id="pre_38"></a><a class="scolldown" id="next_38"></a></span><a href="http://www.86y.org">上下移动</a></h2>  
        <div class="scrollList_38">  
            <div class="photolist" id="photolist_38">       
                <ul>  
                    <li><a href="http://www.86y.org">武汉一幼儿园校车发生车祸 4死3伤 </a></li>  
                    <li><a href="http://www.86y.org">小学规定不准自带食物入校 学生躲厕所喝</a></li>  
                    <li><a href="http://www.86y.org">"滑板妈妈"行乞供儿女上学:希望有份工作</a></li>  
                    <li><a href="http://www.86y.org">3岁男童患怪病 数次“病危”全家举债救病童</a></li>  
                </ul>  
            </div>  
        </div>  
    </div>  
    <script language="javascript" type="text/javascript">  
        var scroll_84= new ok22("photolist_84","pre_84","next_84");  
        scroll_84.IsAutoScroll = true;//是否自动滚动  
        scroll_84.Speed=20;//滚动速度微调  
        scroll_84.IsSmoothScroll= false;//是否平滑连续滚动 平滑滚动:true 间隔滚动:false  
        scroll_84.PauseTime = 5000;//间隔滚动时每次滚动间隔的时间。单位:毫秒。建议值:100--3000 适用于间隔滚动。  
        scroll_84.Direction = "E";//滚动方向.向东:E,向北:N  
        scroll_84.Step =22;     //滚动步长,可以理解为滚动速度。值越大速度越快。值范围:1--10  
        scroll_84.ControllerType = "click";//上一个和下一个按钮事件的触发方式:click为点击触发滚动 否则就是 鼠标按住按钮触发滚动。支持click 和mousedown两种模式  
        scroll_84.BackCall = null;//回调函数 滚动到末尾时执行   
        scroll_84.Init();  
        scroll_84.Start();  //开始滚动  
          
        var scroll_38= new ok22("photolist_38","pre_38","next_38");  
        scroll_38.Speed=80;//滚动速度微调  
        scroll_38.IsSmoothScroll= true;//是否平滑连续滚动 平滑滚动:true 间隔滚动:false  
        scroll_38.PauseTime = 1000;//间隔滚动时每次滚动间隔的时间。单位:毫秒。建议值:100--3000 适用于间隔滚动。  
        scroll_38.Direction = "N";//滚动方向.向东:E,向北:N  
        scroll_38.Step =1;      //滚动步长,可以理解为滚动速度。值越大速度越快。值范围:1--10  
        scroll_38.ControllerType = "mousedown";//上一个和下一个按钮事件的触发方式:click为点击触发滚动 否则就是 鼠标按住按钮触发滚动。支持click 和mousedown两种模式  
        scroll_38.BackCall = null;//回调函数 滚动到末尾时执行   
        scroll_38.Init();  
        scroll_38.Start();              //开始滚动  
    </SCRIPT>  
    </body>  
    </HTML>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=131【兼容IE/FF可控制图片左右滚动+文字上下滚动】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭