电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > javascript > 正文
[组图]jquery图片插件galleryview2.0自定义漂亮的图片特效
jquery图片插件galleryview2.0自定义漂亮的图片特效
2010-3-13 9:08:46  文/佚名   出处:cnblogs   

先来看下效果图:

效果很漂亮吧。

使用方法

<link type="text/css" rel="stylesheet" href="galleryview.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-2.0.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#photos').galleryView({
            panel_width: 800,
            panel_height: 300,
            frame_width: 100,
            frame_height: 100,
            easing: 'swing',
            pause_on_hover: true,
            nav_theme: 'light',
            overlay_opacity: 0.5,
            overlay_height: 10
        });
    });
</script>

 <ul id="photos">
    <li><span class="panel-overlay"> 春</span>    <img src="img/01.jpg" /> </li>
    <li><span class="panel-overlay"> 夏</span> <img src="img/02.jpg" /> </li>
    <li><span class="panel-overlay"> 蜗牛</span> <img src="img/03.jpg" /> </li>
    <li><span class="panel-overlay"> 花</span> <img src="img/04.jpg" /> </li>
    <li><span class="panel-overlay"> 秋</span> <img src="img/05.jpg" /> </li>
    <li><span class="panel-overlay"> 浪</span> <img src="img/06.jpg" /> </li>
    <li><span class="panel-overlay"> 泉</span> <img src="img/07.jpg" /> </li>
     <li><span class="panel-overlay"> 冬</span> <img src="img/08.jpg" /> </li>
  </ul>

2.0版本参数如下

以上参数可以根据自己需要设置,比如图片大小, 透明度,动画效果,缩略图在左、右、上、下,缩略图箭头大小,是否显示文字描述,是否隐藏某部分啊等

本文所讲jquery图片插件galleryview2.0官方下载地址:

插件下载:http://plugins.jquery.com/project/galleryview

官方网:http://spaceforaname.com/galleryview

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    js或jquery获取网页控件的offset值的…
    验证JS中Object和Function的关系的代…
    使用jquery的Dialog出现内存泄露问题…
    如何优化jQuery性能的12种方法解析
    不支持ASP的空间能用JS吗?
    关于20个Ajax关键问题的疑问及解答
    extjs重新设置按钮button的text的方…
    58项经典的JS代码
    详解总结使用jquery的ajax调用webse…
    为jQuery-easyui的tab组件添加右键菜…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号