!!!ie7 ie6 使用jQuery生成视差效果的广告栏设计

发布于2013-11-15，阅读1031次，收藏 4次，评论条 - 来自Terry  |

使用jQuery生成视差效果的广告栏设计

#文章

jQuery

jQuery插件

图片特效

在线演示1

申请达人，去除赞助商链接

如果大家需要制作网站的广告条的话，这篇文章介绍的jQuery Smart3D，肯定能够帮你大忙，它使用jQuery开发，通过叠加多个透明图片来生成一个动态的视差效果的广告banner，使用也非常简单，代码如下：

HTML：

<a href="http://www.gbtags.com">

<ul id="gbevent">

<li><img src="gbtags/bg.png" /></li>

<li><img src="gbtags/tags.png" /></li>

<li><img src="gbtags/pop.png" /></li>

<li><img src="gbtags/money.png" /></li>

<li><img src="gbtags/title.png" /></li>

</ul>

</a>

JS：

$(function() {

$('#gbevent').smart3d({lastStatic:true,vertical:true});

});

是不是非常简单，如果你想了解更多的参数，请访问网站：http://4coder.info/en/code/jquery-plugins/smart3d/

相关参数如下：

frameWidth (integer) (optional)Width. You can set in CSS.

frameHeight (integer) (optional)Height. You can set in CSS.

horizontal (boolean) (optional)Default: true

vertical (boolean) (optional)Default: true

firstStatic (boolean) (optional)Default: false

lastStatic (boolean) (optional)Default: false

invertHorizontal (boolean) (optional)Default: false

invertVertical (boolean) (optional)Default: false

这篇文章是最近做的Live课程分享的一个总结，希望对大家有用，感谢阅读！

关于作者

Terry

曾经的J2EE开发程序员，先后在华大基因，Softbrain，Sybase，SUN Microsystem效力，喜欢开发和研究基于前端的技术教程和页面特效，如果你对于前端也有兴趣，求互粉！

极客主页：Terry

新浪微博：访问微博