JQuery插件第三十个 : 图片批量滚动的封装功能增强版

原创 2012年03月26日 08:53:58
<!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=gb2312" />
    <title>图片批量滚动</title>
</head>
<body>
    <div class="box" style='overflow: hidden; height: 120px; width: 700px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td id="pic01" class="pic" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="box" style='overflow: hidden; height: 120px; width: 700px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td id="pic11" class="pic" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="box" style='overflow: hidden; height: 120px; width: 700px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td id="pic21" class="pic" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                            <td width="30">
                            </td>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="vbox" style='overflow: hidden; height:500px; width:150px; color: #ff0000'>
        <table align="left" cellpadding="0" cellspace="0" border="0">
            <tr>
                <td valign="top">
                    <table border="0" cellpadding="0" cellspacing="0" class="pic" >
                        <tr>
                            <td>
                                <a href="http://www.fankelipinka.com" target="_blank">
                                    <img border="0" src="4.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明一</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.wangtx.com" target="_blank">
                                    <img border="0" src="5.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明二</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.yamaxun.org" target="_blank">
                                    <img border="0" src="2.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明三</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.cnwenger.com" target="_blank">
                                    <img border="0" src="3.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明四</b>
                                </center>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="http://www.pc555.com" target="_blank">
                                    <img border="0" src="1.jpg" width="150" height="100" hspace="22"></a><br>
                                <center>
                                    <b>说明五</b>
                                </center>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript" language="javascript" src="jquery-1.6.js"></script>

    <script type="text/javascript" language="javascript">
(function ($) { 
  $.fn.runPic = function(options){
        var defaults = {  speed:10,picClass:"pic",c:0}
        var opts = $.extend(defaults, options);
        var css='.'+opts.picClass;
        var ma = (opts.c != 1)?function(b){
            var pic=$(css,b).get(0);
            if(pic.offsetWidth-b.scrollLeft<=0)
              b.scrollLeft-=pic.offsetWidth
            else{
              b.scrollLeft++
            }
        }:function(b){
            var pic=$(css,b).get(0);
            if(pic.offsetHeight-b.scrollTop<=0)
              b.scrollTop-=pic.offsetHeight
            else{
              b.scrollTop++
            }
        }
      this.each(function(){
            var b=this;
            var pic=$(css,b);pic.after(pic.clone());
            var M=setInterval(function(){ma(b);},opts.speed);
            $(b).mouseover(function() {
            clearInterval(M)}).mouseout(function() { 
            M=setInterval(function(){ma(b);
            }
            ,opts.speed
            )});
      });
  };
})(jQuery);
      
$(function(){
    $(".box").runPic({speed:18});//水平滚动    
    $(".vbox").runPic({speed:18,c:1});//纵向滚动
});  
    </script>

</body>
</html>

做的插件水平还是垂直方向都能滚动

相关文章推荐

jQuery插件第五十六:十七种翻页插件

leaf分页插件应用在17种不同场景下的翻页,让你编写js分页只需提供记录总数,url和ajax分页通用,并且能DIY翻页显示的控制按钮。...

OpenCV代码提取:dilate函数的实现

OpenCV代码提取:dilate函数的实现

JQuery插件第十三个 : 图片批量滚动的封装

图片批量滚动 说明一 ...

图片滚动加载 MingGe JQUERY插件

  • 2016年01月08日 11:59
  • 355KB
  • 下载

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之升值,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只...

bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现

在一般大型的网页,会有顶部和侧面两个导航。bootstrap提供的附加导航(侧面导航)可以实现监听页面滚动功能,下面看一下是什么样的:如上图所示,右侧导航原本是相对定位的,当它随页面滚动到顶部的时候,...

jQuery插件-div中滚动图片

(function($){ $.extend($.fn,{ divInit:function(options){ options=$.extend({ picWidth : 500...

自编JQuery插件第十二个:水平滚动图片

水平滚动图片效果: .margin_18 { MARGIN-RIGHT: 18px } #runbox { DISPLAY: block; OVERFLOW: hidden; WIDTH...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery插件第三十个 : 图片批量滚动的封装功能增强版
举报原因:
原因补充:

(最多只允许输入30个字)