dlcpk
贫民
贫民
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数5
阅读:337回复:0

上下循环滚动内容信息!!!!

楼主#
更多 发布于:2016-11-21 09:50
有的时候制作需要一些特效,比如有客户要求在底部或者一些特定的位置实现整行或者部分上下循环滚动的内容,对于jQuery不熟悉,甚至根本就不会写的我们就是一种困扰,所以提别提取了一部分应用,实现这个代码,单纯的拿来主义。。。。。
代码如下:
<link rel="stylesheet" type="text/css" href="style/header.css">
<script type="text/javascript" src="jQuery-1.8.3/jquery-1.8.3.min.js"></script>
<div class="pageBottom">
<div class="websiteInfo">
            <div class="links">
                <span>友情链接:</span>
                <div id="link_up" class="ftlinksh clearfix">
                        <div class="ftlinkshinner">
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                        </div>
                        <div class="ftlinkshinner">
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                        </div>
                        <div class="ftlinkshinner">
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                            <a href="http://www.dlptt.com" target="_blank"  >麦芒网络运维</a>
                        </div>
                    </div>
                </div>
            </div>
<script>
    $(document).ready(function () {
        //四大金刚切换
        $('.personsList li[id^=personsList_]').click(function () {
            var id = $(this).attr('data-id');
            if (id != '0') {
                $('.personsImgListDiv ul[id^=personsImgList_]').addClass('displayNone');
                $('.personsImgListDiv #personsImgList_' + id).removeClass('displayNone');
                //
                $('.personsList li[id^=personsList_]').removeClass('hj_select');
                $(this).addClass('hj_select');
                $(".fourBtn a").addClass("displayNone");
                $(".fourBtn a:eq(" + (parseInt(id) - 1) + ")").removeClass("displayNone");
            }
        });
        //友情链接滚动
        rollUp.init('link_up', 1);
    });
    var rollUp = {
        init: function(id, step, time, distance) {
            var varUp = {
                step: 2,
                distance: 0,
                length: 0,
                intval: 10,
                time: 600,
                speed: 0,
                parent: null ,
                controlbox: null ,
                items: null ,
                timer: 2000,
                timeLog: -1,
                intvalLog: -1,
                move: true,
                create: function(id, step, time, distance) {
                    var self = this;
                    self.parent = $('#' + id);
                    self.items = self.parent.children();
                    self.length = self.items.length;
                    self.step = self.undef(step, 2);
                    if (self.length <= self.step) {
                        return;
                    }
                    if (typeof time != 'undefined') {
                        self.time = time;
                    }
                    if (typeof distance == 'undefined' || distance == '') {
                        var item = $(self.items[0]);
                        self.distance = item.height() * self.step;
                    } else {
                        self.distance = distance;
                    }
                    self.parent.css({
                        'height': self.parent.height(),
                        'overflow': ' hidden'
                    });
                    self.items.wrapAll('<div class="roll_box">');
                    self.controlbox = $('.roll_box', self.parent);
                    self.controlbox.mouseover(function() {
                        clearTimeout(self.timeLog);
                        self.move = false;
                    });
                    self.controlbox.mouseout(function() {
                        self.move = true;
                        self.timeout();
                    });
                    self.speed = self.distance / self.time;
                    self.timeout();
                },
                undef: function(val, def) {
                    if (typeof val == 'undefined') {
                        return def;
                    }
                    return val;
                },
                timeout: function() {
                    var self = this;
                    self.timeLog = setTimeout(self.up, self.timer);
                },
                up: function() {
                    var self = varUp;
                    clearTimeout(self.timeLog);
                    if (!self.move) {
                        return;
                    }
                    var startime = self.getTime();
                    var endtime = startime + self.time;
                    self.intvalLog = setInterval(function() {
                        var nowtime = self.getTime()
                                , marginTop = (nowtime - startime) * self.speed;
                        self.controlbox.css('margin-top', -marginTop);
                        if (nowtime >= endtime) {
                            clearInterval(self.intvalLog);
                            for (var i = 0; i < self.step; i++) {
                                self.controlbox.children(':first').appendTo(self.controlbox);
                            }
                            self.controlbox.css('margin-top', '');
                            self.timeout();
                        }
                    }, self.intval)
                },
                getTime: function() {
                    return (new Date()).getTime();
                }
            }
            varUp.create(id, step, time, distance);
            return varUp;
        }
    };
</script>
body{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
body{line-height:1;}
a,div,span{font-family:"微软雅黑";}
a{text-decoration:none;color:#000;}
.pageBottom{width:100%;overflow:hidden;background:url(pageBottomBg.jpg) repeat;padding-bottom:40px;}
.pageBottom .websiteInfo{font-size:12px;margin-top:34px;}
.pageBottom .websiteInfo .links{font-size:12px;color:#777;max-width:1080px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:20px;}
.pageBottom .websiteInfo .links span{height:18px;line-height:18px;float:left;margin-right:18px;}
.pageBottom .websiteInfo .links a{font-size:12px;color:#777;margin-left:10px;line-height:20px;}
.ftlinksh{height:18px;line-height:18px;width:1010px;overflow:hidden;}
.ftlinkshinner{width:1100px;height:18px;}
.ftlinksh a{float:left;display:block;height:18px;line-height:18px;margin-right:23px;}
.pageBottom .websiteInfo .para1{font-size:12px;line-height:22px;color:#777;text-align:center;}
附件名称/大小 下载次数 最后更新
1.zip (113KB)  0 2016-11-21 09:49
喜欢0 评分0
游客

返回顶部