现实生活

使用jQuery的幻灯片效果变得非常受欢迎,我整理出比较具有代表性的几款分享给大家，有些还提供功能下载，让我们一起来看看吧。

1. Nivo

http://nivo.dev7studios.com/

2. Slidesjs

http://www.slidesjs.com/

3. Hevoq

http://www.davidmassiani.com/horinaja/in...

相比Windows Vista操作系统，为什么有些人更青睐Windows XP和Mac
OSX？毕竟，Vista相比XP视觉上更美观圆润，性能上更先进，并且在很多方面也远胜于Mac
OSX。为什么那么多人喜欢Xbox，而Windows Mobile则无人问津？

相
比Windows Vista操作系统，为什么有些人更青...

 

DEMO   Download 

 

    跟之前介绍的一个十分简洁滚动插件EasySilder不一样（猛点此处查看：http://jsssc.cn/easy-slider-15-the-easiest-jquery-plugin-for-sliding/）, 这个组件有诸多优点：

• 可滑动任何HTML内容
• 上下页导航箭头
• 导航tab页支持无限动态创建
• 可对导航文字进行自定义
• 支持可暂停的自动播放
• 每一个滚动项均有#标签方便连接至任意特定项
• 支持无限连续滚动
• 支持同一页面多个滚动效果
• 可选的鼠标滑过暂停滚动效果
• 支持从普通链接直接跳转至相应的滚动项（意思是页面上的文本链接点击后直接滑动至该滚动项）

该插件的英文详细介绍看这里：http://css-tricks.com/anythingslider-jquery-plugin/

使用介绍&参数说明

$(’.anythingSlider’).anythingSlider({
        easing: “swing”,                // Anything other than “linear” or “swing” requires the easing plugin

        autoPlay: true,                 // 是否自动播放
        startStopped: false,            // 如果选择自动播放，这个配置让插件开始时时停止的
        delay: 3000,                    // 自动切换时间

        animationTime: 600,             // 过渡效果持续时间
        hashTags: true,                 // 是否让#标签来变化当前url

        buildNavigation: true,          // 是否添加导航tab
        pauseOnHover: true,             // 是否在鼠标hover时暂停滚动

        startText: “Start”,             // 开始按钮文字
        stopText: “Stop”,               // 结束按钮文字
        navigationFormatter: null       // 自定义的文字格式化函数名，详细使用可参照demo源码
});

 自定义使用

• 添加删除滚动项：仅需添加或删除<div class=”wrapper”>内的<li>标签即可。
• 修改滚动框大小：如果你需要将滚动框的大小从660px改为580px，你需要修改css文件 中.anythingSlider ul li 为580px，把.anythingSlider .wrapper 的宽度改为 580px，将.anythingSlider 的width减少100px 为660px。
• 直接连接至滚动框：

  $(”#slide-jump”).click(function(){
      $(’.anythingSlider’).anythingSlider(6);
  });

    css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果，但是目前支持css3的浏览器少之又少，往往了实现圆角效果要去写一堆代码，下面介绍 的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。

   在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。

1.多重背景

#backgrounds-box {
background: url(top-backgroundg.png) top left no-repeat,
url(bottom-backgroundg.png) bottombottom left no-repeat,
url(middle -backgroundg.png) left repeat-y;
padding: 35px;
}

2.文字阴影

b { text-shadow:  5px 5px 5px #666666; }

3.圆角

#rounded-corners-box {
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-rightright-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-rightright-radius: 8px;
}

 4.透明效果

.div-name { background: #333333; opacity:0.8; width: 380px; height:70px; }

 

下面来看看jQuery插件实现css3效果的插件：

jQuery Corners 0.3

轻松地实现漂亮的圆角，无需额外的标签或图片。支持 iPhone.、Chrome、Firefox、Safari 2+、 Opera 9.0+、Internet Explorer 6+。

 jQuery Canvas Rounded Corners

通过canvas 实现圆角的jQuery插件，支持IE7、FF。

How To  Border Image with CSS3 and jQuery

CSS3 draft 介绍灰墙强大的图片边框技术。

 

How To CSS Multiple Backgrounds / Background Layering with jQuery

实现多重图片背景的这个插件可以极大地减少xhtml标签，精简你的代码，多重背景的概念类似于PS的图层，一个图层叠在另一个图层上面。

How To Drop Shadow with jQuery

为页面上的文字和透明图片添加柔和和阴影效果。

How To Text-shadow in Internet Explorer using jQuery

这个教程会教你如何在IE中轻松实现文字阴影效果。

How To Element Gradient with jquery

允许你自定义元素的填充渐变效果，支持指定渐变的方向。

How to Rounded Corners in jQuery

一个简易的用jQuery实现圆角的教程。

CSS3 Template Layout realized with jQuery

实现CSS3布局。

Creating a polaroid photo viewer with CSS3 and jQuery

结合CSS3的 Box Shadow 属性Rotate 实现拖动图片过程中的阴影效果。

jSlickmenu: A jQuery plugin for slick CSS3 menus

jSlickmenu通过类似CSS3的rotation 和shadows属性现非常酷的菜单效果。

1.真的很酷？

看看官网这个惊艳的DEMO:

http://www.progressivered.com/cu3er/

可以看到一个图片幻灯片该有的功能它CU3ER它都有了，而且更漂亮更酷。

2.我也要试试

CU3ER的使用十分简单，保证3分钟内你就可以学会了。

下载

到http://www.progressivered.com/cu3er/download/猛击那个红色的大按钮，下载源文件。

配置

配置上最核心的就是config.xml这个文件了，接下来介绍一下大致标签的含义：

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>

    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>

        <slide>
            <url>images/slide_2.jpg</url>
        </slide>

        <slide>
            <url>images/slide_3.jpg</url>
        </slide>
    </slides>

</cu3er>

很简明的，每一张图片都是包含在<slide>标签之中的，你可以把图片地址修改为你要的图片。

修改好图片之后，就是“前进，后退“按钮以及自动播放的问题了，这些配置全部包含在<settings>标签以内的，我们简单的看看先：

<settings>
    	<prev_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</prev_button>
    	<prev_symbol>
			<tweenOver tint="0x000000" />
		</prev_symbol>
    	<next_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF"  scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</next_button>
    	<next_symbol>
			<tweenOver tint="0x000000" />
		</next_symbol>	
	</settings>
<prev_button>代表后退按钮， 
<prev_symbol>代表后退按钮的“箭头”。前进按钮与箭头同上。 
<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>是指当鼠标移上（mouseover）前进后退按钮时，按钮样式变大1.1倍，并变为ffffff这个颜色。  假如你想要幻灯片自动播放，需要在里加入以下代码：
<auto_play>
	<defaults symbol="circular" time="3" />
	<tweenIn x="500" y="50" width="35" height="35" tint="0xFFFFFF" />

即可。

详细的说明文档请参见官网document

</auto_play>
网盘下载：http://www.esnips.com/doc/a8adabb9-fa48-410c-ae2f-ddbad05aeec4/cu3er-v0.9.2

下载：http://www.esnips.com/doc/38635268-ecb2-418b-a56b-c1bbf0fd0b0d/BANNER-ROTATOR-with-Auto-Delay-Time.zip

BEFORE PURCHASE PLEASE CONSIDER THIS :
No technical support available for this item from me (author).
No emails replied / responded to the buyers except there are bugs in the source file.

This is an XML banner rotator with automatic delay time depending on the number of words used in caption. There are more features, around 35 settings parameters available in the xml file.

Features:
- Can load JPEG , PNG, GIF images and SWF files
- Resizable to any extent
- Auto Time delay according to number of words (length of caption)
- Fixed time delay also can be added
- 5 Different Transition Effects
- Supports both Embedded and non embedded fonts
- Usual HTML formatting can be added to the non embedded fonts
- Also some of the HTML options works for embedded fonts.(example: Color, hyper link, line breaks, font size and many more)
- Adjustable line spacing and letter spacing
- Choice for sequential and random order
- Adjustable transition speed (for the “move” transition)
- Enable / disable buttons
- Enable / disable Auto play

这是我最近找到最实用的banner 图片展示系统之一

下载：http://www.esnips.com/doc/38635268-ecb2-418b-a56b-c1bbf0fd0b0d/BANNER-ROTATOR-with-Auto-Delay-Time.zip

     

     

     

  

 

同样的一堆信息摆在面前，展现方式设计的好坏可以让用户感觉差异多大？为什么同样的一个“任务”，一天也能“完成”，一周也可能没法“完成”？

这个例子是我2007年从Google的一位产品经理那里听来的，任务的目的是展示美国的几个城市在不同月份的平均降水量。很自然的，一开始我们就 会想到用一张表格，如下图，横轴是一月到十二月，纵轴是城市名称，分别是San Francisco、Seattle、Chicago、New York、Miami，表格中每个元素就是某城市在那个月的平均降水量，单位是“英寸每月”。

上图已经把所有的信息都展示出来了，但重点不够突出，各种信息都用一样的字体 让人不知道一开始看哪里，而下图就优化了很多。首先各种文字用了不一样的字体，图表的标题最明显，让人一眼就知道这个图表是说什么的，月份与城市信息稍微 弱化以突出数据内容，特别值得一提的是这里用了不同深浅的颜色来突出数据，让人很容易解读出某个城市全年整体的降水情况，降水季节分布等信息。

我常说“字不如表，表不如图”，再回忆一下上面的图表，你还能记住Miami在8月的平均降水量么？我是不能，但我记得Miami在 夏季的降水量很大。这给了我们启发，其实要传递的并不是具体的数字，而是每个城市在全年的降水量整体情况与分布，数据只是给极少数做科学研究的人，在需要 的时候可以查到就可以了，在表现形式上，我们可以处理成鼠标悬停在某个水滴上的时候，就展现出相应的数字。于是，我们进一步优化出下图，用很符合读者心智 模型的水滴大小、颜色深浅来表示不同的降水量区间。现在更加一目了然了，San Francisco最干，冬天稍微好一些；而New York全年降水很平均……

还可以优化么？是的，还可以。上面几个城市为什么会有这样的降水情况呢？我们可以如下图，把它们放在地图里，从地理的角度得到解释，比如San Francisco “因为三面环水，并受太平洋加利福尼亚寒流影响，旧金山是典型的凉夏型地中海式气候”，所以夏季降雨极少，冬天经常下雨。而Miami则“拥有温暖、湿润 的夏雨型暖副热带气候”，所以降水充沛。下图把时间轴做了个动态展现，拖动时间轴，我们可以看到几大城市，甚至可以推测出全美国在一年中各地的降水情况。 当然，如此炫的表达也有其弱点，那就是没法如上图一次性看到所有信息了，这个需要我们来权衡利弊。