我爱模板网 > 特效插件 > 表格弹出层 >  白色风格动感的SexyLightBox弹出层jQuery代码正文

白色风格动感的SexyLightBox弹出层jQuery代码

特效介绍
白色风格动感的SexyLightBox弹出层

白色风格动感的SexyLightBox弹出层jQuery代码。点击应用了该特效的图片,会非常动感的从顶部弹出一个漂亮的层,显示该图的最大尺寸。点击下一个按钮的时候,弹出层会弹性的收缩或者放大以适应下一张图片的尺寸。这里要说明下,如果使用了该特效的页面没有竖向滚动条,也就是body或者html的高度没有超过一屏的高度的话,会导致弹出层在IE8等IE内核下的浏览器显示不正常。所以尽量保证页面有足够的高度,除此之外,兼容主流浏览器。随着滚动条滑动,SexyLightBox也会弹性的向上或者向下滚动,始终保持在浏览器的正中间。
使用方法
1、在head引入下面的代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
  SexyLightbox.initialize({color:'white', dir: 'sexyimages'});
});
</script>
调用函数参数说明:color为SexyLightBox弹出层边框的颜色,这里为白色,黑色的效果参见“黑色风格动感的SexyLightBox弹出层jQuery代码”。dir是弹出层风格的路径,例如SexyLightBox弹出层背景图片、弹出层关闭按钮、上一页下一页按钮等。
2、在需要使用SexyLightBox弹出层特效的图片外面套个a链接,a链接的rel="sexylightbox"属性为使用没有翻页效果的弹出层特效,rel="sexylightbox[group1]"属性(数组)为使用有翻页效果。a链接的href=""里面的地址为大图地址。而title=""属性里面的字符串将会显示在弹出层下面。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:黑色风格动感的SexyLightBox弹出层jQuery代码 下一篇:可嵌套的SexyLightBox弹出层引用本地和互联网内容
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢