jQuery背景墙聚光灯效果代码

查看演示立即下载

插件描述：jQuery背景墙聚光灯效果代码

感谢X.z提供

按一下顺序操作！

引入jQuery

1	`<script` `src="/"></script>`

jQuery插件

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
        var spotlight = {
            // the opacity of the "transparent" images - change it if you like
            opacity: 0.2,
            /*the vars bellow are for width and height of the images so we can make 
    the <li> same size */
            imgWidth: $('.spotlightWrapper ul li').find('img').width(),
            imgHeight: $('.spotlightWrapper ul li').find('img').height()
 
        };
 
        //set the width and height of the list items same as the images
        $('.spotlightWrapper ul li').css({
            'width': spotlight.imgWidth,
            'height': spotlight.imgHeight
        });
 
        //when mouse over the list item...
        $('.spotlightWrapper ul li').hover(function() {
 
            //...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
            $(this).find('img').addClass('active').css({
                'opacity': 1
            });
 
            //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array 
            $(this).siblings('li').find('img').css({
                'opacity': spotlight.opacity
            });
 
            //when mouse leave...
        },
        function() {
 
            //... find the image inside of the list item we just left and remove the active class
            $(this).find('img').removeClass('active');
 
        });
 
        //when mouse leaves the unordered list...
        $('.spotlightWrapper ul').bind('mouseleave',
        function() {
            //find the images and change the opacity to 1 (fully visible)
            $(this).find('img').css('opacity', 1);
        });
 
    });
</script>

CSS样式

<style type="text/css" media="screen">
  body { background:black; color:white; font-family: 'georgia' } /* not important */
  .spotlightWrapper ul { 
   list-style-type: none; /* remove the default style for list items (the circles) */ 
   margin:0px; /* remove default margin */
   padding:0px; /* remove default padding */
  }
  .spotlightWrapper ul li { 
   float:left; /* important: left float */
   position:relative; /* so we can use top and left positioning */
  }
  .spotlightWrapper ul li a img { 
   width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */
   position:relative; /* so we can use top and left positioning */
   border:none; /* remove the default blue border */
  }
  .spotlightWrapper ul li a img.active {
   border:4px solid white; /* choose whatever you like */
   z-index:1; /* show it on top of the other images (they have z-index 0) */
   left: -4px; /* same as border width but negative */
   top: -4px; /* same as border width but negative */
  }
  .clear { clear:both; } /* to clear the float after the last item */
 </style>

HTML

<div class='spotlightWrapper'>
  <ul>
   <li><a href='#'><img src='images/1.jpg' /></a></li>
  </ul>
</div>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery瀑布流插件
下一个特效： jquery形象照片卷轴插件