郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

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

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript > jquery插件 >

jquery文本向上滚动代码带上下翻转按钮的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插http://www.51xuediannao.com/js/jquery/jquery_scroll_sx.html

(责任编辑:懒人建站)

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

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