基于jquery的circle插件

jsntghf

浏览: 2560000 次
性别:
来自: 苏州

最近访客更多访客>>

SleepyzzZ1002

samhunglv

loginboot

yongjiucui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

jQuery JavaScript CSS XHTML UP

这是一个轻量级的插件，它基于InnerFade、Slideshow、jqShuffle这几个插件实现。

这个插件提供了pause-on-hover、auto-stop、auto-fit、before/after callbacks、click triggers等等效果。

下面看个例子。

html代码：

<!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>
    <link href="css/cycle.css" type="text/css" rel="stylesheet">
      <style type="text/css">
        pre { display:none }
        #right { cursor: pointer }
        #twtr-search-widget { width: 300px; float: right; margin-left: 20px }
      </style>
      <script src="javascript/jquery-1.2.3.js" type="text/javascript"></script>
      <script src="javascript/jquery.cycle.all.js" type="text/javascript"></script>
      <script src="javascript/jquery.easing.1.1.1.js" type="text/javascript"></script>
      <script type="text/javascript">
        $.fn.cycle.defaults.speed   = 900;
        $.fn.cycle.defaults.timeout = 4000;
        $(function() {
         $('#demos pre code').each(function() {
            eval($(this).text());
          });
        });
      </script>
   </head>
   <body>
   <div id="demos">
    <table cellspacing="20"><tr><td>
        <h2>shuffle</h2>
        <div id="shuffle" class="pics">
           <img src="images/beach1.jpg" width="200" height="200" />
           <img src="images/beach2.jpg" width="200" height="200" />
           <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre>
          <code class="mix">
             $('#shuffle').cycle({
                fx:     'shuffle',
                easing: 'backout',
                delay:  -2000
              });
          </code>
        </pre>
        </td><td>
        <h2>zoom</h2>
        <div id="zoom" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
          $('#zoom').cycle({
            fx:    'zoom',
            sync:  false,
            delay: -2000
          });</code></pre>
        </td><td>
        <h2>fade</h2>
        <div id="fade" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">$('#fade').cycle();</code></pre>
    </td></tr>
    <tr><td>
        <h2>turnDown</h2>
        <div id="slide" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
           $('#slide').cycle({
           fx:      'turnDown',
           delay:   -2000
          });</code></pre>
    </td><td>
        <h2>curtainX</h2>
        <div id="up" class="pics">
           <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
          $('#up').cycle({
          fx:    'curtainX',
          sync:  false,
          delay: -2000
        });</code></pre>
    </td><td>
        <h2>scrollRight (click)</h2>
        <div id="right" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
          $('#right').cycle({
          fx:      'scrollRight',
          next:   '#right',
          timeout:  0,
          easing:  'backinout'
        });</code></pre>
    </td></tr></table>
  </div>
 </body>
</html>

具体效果请参见附件。

circle.rar (90.5 KB)
下载次数: 1028

分享到：

flash图片轮换效果（一） | CSS文本渐变效果

2009-12-23 09:50
浏览 1952
评论(6)
论坛回复 / 浏览 (6 / 6073)
分类:Web前端
查看更多

6 楼 freedomstyle 2009-12-26

真的很不错哈感谢楼主啊

5 楼 gxyxd 2009-12-25

很不错的...................

4 楼 makemyownlife 2009-12-25

效果不错，楼主用心了

3 楼 bluesky.mo 2009-12-24

很不错，谢谢分享

2 楼 ehow 2009-12-23

试了下，挺好，楼主加油

1 楼 222xiaohuan 2009-12-23

相当好的东东，各种效果都有，不错，不错！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

基于jquery的circle插件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

基于jquery的circle插件

评论

发表评论

相关推荐

密码输入延迟屏蔽

日历控件

渐变打分条

滚动新闻

网页配色

圆角文本框的实现

javascript加载xml，在chrome下失败的解决办法

可输入文本的下拉框

二级树形菜单

不规则菜单

二级树形菜单

随机显示图片

滚动字幕效果

美化select

无图片圆角

设置滚动条的颜色

CSS细线表格

分页效果

FormTools

表单当前行高亮的实现

最近访客更多访客>>