当前位置:主页 > 网页特效 > HTML5+CSS3 >

jQuery和css3图片画廊Lightbox插件

发布时间:2019/05/11?来源:未知?浏览:?关键词:jquery?CSS3?Lightbox?画廊?
jQuery和css3图片画廊Lightbox插件 jQuery和css3图片画廊Lightbox插件
阿里云
简要教程

这是一款使用?jQuery?和?CSS3?制作的图片画廊Lightbox插件。该插件中使用CSS3来为图片制作阴影和旋转效果,并使用jQuery来在点击图片的时候制作淡入淡出的图片放大效果。

HTML结构

HTML结构采用section作为wrapper。图片部分分为两部分:

对放置的是缩略图,
是对应的大图。它们通过第一个div中a元素的href和第二个div中的id值来对应。

  
    
        
          
      
    
...
...

CSS样式

通过CSS3来为图片添加阴影和旋转角度。

a.polaroid {
  -moz-transition:all0.2s ease-in-out;
  -webkit-transition:all0.2s ease-in-out;
  display:block;background:#fff;
  padding:10px;margin:5px;
  -moz-box-shadow:#ccc5px5px20px;
  -webkit-box-shadow:#ccc5px5px20px;
  margin-bottom:1em;
}
a.polaroid img {width:200px; }
a.polaroid:hover {
  -moz-box-shadow:#6665px5px20px;
  -webkit-box-shadow:#6665px5px20px;
}

JAVASCRIPT

插件中使用了fancyzoom.js,它能够将元素放到,并带有非常酷的淡入淡出效果。使用时首先要引入jQuery和fancyzoom.js文件:


然后就可以使用下面的方法来调用插件:

$(function() {
    $("a.polaroid").each(function() {
        $(this).css({
            "-webkit-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg)',
            "-moz-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg)'
        })
        .hover(function() {
            $(this).css({
                "-webkit-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1.05)',
                "-moz-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1.05)'
            })
        },function() {
            $(this).css({
                "-webkit-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1)',
                "-moz-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1)'
            })
        });
    });
    $('a[rel=lightbox]').fancyZoom();
});

共有人阅读,期待你的评论!评论
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top