知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    jquery文本向上滚动代码带上下翻转按钮的jQuery插

    作者:佳明妈 来源:油脂设备 2012-01-05 人气:
    基于jquery文本向上滚动代码带上下翻转按钮的jQuery插件,这个jquery文本向上滚动代码可自动滚动,也可以以点击向上向下按钮进行滚动。当前页面js代码中的 line:1 是配置一次滚动几行的

    基于jquery文本向上滚动代码带上下翻转按钮的jQuery插件,这个jquery文本向上滚动代码可自动滚动,也可以以点击向上向下按钮进行滚动。

    这里的演示样式简单的写了一个框架,vertical-align:bottom; zoom:1; 这东西是用来解决IE6下li的bug的,你再制作NX的样式时,最好参考使用一下。

    特别说明:当前页面js代码中的 line:1 是配置一次滚动几行的。

    js代码引用:
    <script src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="jq_scroll.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
            $("#scrollDiv").Scroll({line:1,speed:500,timer:3000,up:"but_up",down:"but_down"});
    });
    </script>

    css样式代码片段:
    <style type="text/css">
    body{ color:#333; font-size:13px;}
    h3,ul,li{margin:0;padding:0; list-style:none;}
    .scrollbox{width:400px; padding:10px;border:#ccc 1px solid;}
    #scrollDiv{width:400px;height:180px; overflow:hidden;}/*这里的高度和超出隐藏是必须的*/
    #scrollDiv li{height:25px;line-height:25px; vertical-align:bottom; zoom:1; border-bottom:#CCC dashed 1px;}
    #scrollDiv li a{ color:#333; text-decoration:none;}
    #scrollDiv li a:hover{ color:#FF0000; text-decoration:underline;}

    .scroltit{ height:26px; line-height:26px; border-bottom:#CCC dashed 1px; padding-bottom:4px; margin-bottom:4px;}
    .scroltit h3{ width:100px; float:left;}
    .scroltit small{float:right; font-size:13px;}
    </style>

    主体html结构:
    <div class="scrollbox">
        <div class="scroltit"><h3><a href="#">Jquery 特效</a></h3><small id="but_up">↑向上</small><small id="but_down">↓向下</small></div>
        <div id="scrollDiv">
            <ul>
                <li>[<a href='http://www.51xuediannao.com/js/texiao/'>网页特效</a>] <a href="http://www.51xuediannao.com/js/texiao/642.html" title="为网站增加圣诞节祝福动画百度的圣诞老人动画" class="linktit">为网站增加圣诞节祝福动画百度的圣诞老人动画</a></li>
                <li>[<a href='http://www.51xuediannao.com/yumenba/'>郁闷吧</a>] <a href="http://www.51xuediannao.com/yumenba/606.html" title="2011最简单最给力的兼职网赚项目" class="linktit">2011最简单最给力的兼职网赚项目</a></li>
                <li>[<a href='http://www.51xuediannao.com/yumenba/'>郁闷吧</a>] <a href="http://www.51xuediannao.com/yumenba/yuwangmen_heti.html" title="90后富家二小姐渔网妹欲造合体门(多图)" class="linktit">90后富家二小姐渔网妹欲造合体门(多图)</a></li>
                <li>[<a href='http://www.51xuediannao.com/yumenba/'>郁闷吧</a>] <a href="http://www.51xuediannao.com/yumenba/google.html" title="关于谷歌中国的最新声明(来自谷歌)" class="linktit">关于谷歌中国的最新声明(来自谷歌)</a></li>
                <li>[<a href='http://www.51xuediannao.com/jiqiao/'>建站技巧</a>] <a href="http://www.51xuediannao.com/jiqiao/chuangyi.html" title="设计创意究竟是怎么练出来的?" class="linktit">设计创意究竟是怎么练出来的?</a></li>
                <li>[<a href='http://www.51xuediannao.com/weike/'>威客网排行榜</a>] <a href="http://www.51xuediannao.com/weike/weike_daxuesheng.html" title="大三学生做威客一边学习一边赚生活费" class="linktit">大三学生做威客一边学习一边赚生活费</a></li>
                <li>[<a href='http://www.51xuediannao.com/js/texiao/'>网页特效</a>] <a href="http://www.51xuediannao.com/js/texiao/js-riqi.html" title="日期时间带星期农历js代码特效" class="linktit">日期时间带星期农历js代码特效</a></li>
                <li>[<a href='http://www.51xuediannao.com/html+css/htmlcssjq/'>html+css技巧</a>] <a href="http://www.51xuediannao.com/html+css/htmlcssjq/IE6 min.html" title="IE6最小高度最小宽度最大高度最大宽度css写法" class="linktit">IE6最小高度最小宽度最大高度最大宽度css写法</a></li>
            </ul>
        </div>
    </div>
     

    ↓ 查看全文

    jquery文本向上滚动代码带上下翻转按钮的jQuery插由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    jquery文本向上滚动代码带上下翻转按钮的jQuery插-最新评论