`

MovingBoxes左右滑动放大图片插件

阅读更多

MovingBoxes左右滑动放大图片插件在产品预览时很有用哦



 

实例代码

<!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>MovingBoxes滑动放大图片插件</title>
        <link type="text/css" href="/api/jq/5733e358c8829/css/style.css" rel="stylesheet">
 <script type="text/javascript" src="/api/jq/5733e358c8829/js/jquery.js"></script>
            <script type="text/javascript" src="/api/jq/5733e358c8829/js/jquery.movingboxes.js"></script>
            <script type="text/javascript">
                $(function() {
                    $('#focus').movingBoxes({
                        startPanel: 1, // 从第一个li开始
                        reducedSize: .5, // 缩小到原图50%的尺寸
                        wrap: true, // 是否无缝循环
                        buildNav: false, // 是否显示分页
                        navFormatter: function() {
                            return "&#9679;";// 返回分页格式
                        }
                    });
                });
            </script>
    </head>
    <body>
        <!-- 代码开始 -->
        <ul id="focus">
            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img01.jpg"></a></li>
            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img02.jpg"></a></li>
            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img03.jpg"></a></li>
            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img04.jpg"></a></li>
            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img05.jpg"></a></li>
        </ul>
        <!-- 代码结束 -->
    </body>
</html>

 运行一下

 

下载地址

  • 大小: 95.7 KB
1
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery插件MovingBoxes实现左右滑动中间放大图片效果

    MovingBoxes左右滑动放大图片插件在产品预览时很有用哦 实例代码 &lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&gt; &lt;...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail惟美的图片Tip提示效果 86. 分享一款jquery仿...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...

    100多个JQuery效果示例(实例)div+css+javascrpit

    88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...

    jquery 动态示例

    88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jquery实现图片放大插件imgBox下载 70.一款jQuery实现漂亮精美相册插件源码 71.一款jQuery左右箭头控制大图滚动切换的代码 72.一款jquery常用产品图片放大效果插件下载 73.一款jQuery插件slide幻灯片...

Global site tag (gtag.js) - Google Analytics