jquery實現背景牆聚光燈效果樣本

來源:互聯網
上載者:User

jquery實現背景牆聚光燈效果樣本

 這篇文章主要介紹了jquery實現背景牆聚光燈效果樣本,需要的朋友可以參考下

代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

 <meta http-equiv="Content-type" content="text/html; charset=utf-8">

 <title>jQuery背景牆聚光燈效果代碼 </title>

 <script type="text/javascript" charset="utf-8" src='/jquery.js'></script>

 <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>

 <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>

</head>

<body>

 <h3>jQuery背景牆聚光燈效果</h3>

    <p>點擊圖片查看效果</p>

 <!-- start spotlightWrapper div -->

<div class='spotlightWrapper'>

  <!-- start unordered list -->

  <ul>

   <li><a href='#'><img src='images/1.jpg' /></a></li>

   <li><a href='#'><img src='images/2.jpg' /></a></li>

   <li><a href='#'><img src='images/3.png' /></a></li>

   <li><a href='#'><img src='images/4.jpg' /></a></li>

   <li><a href='#'><img src='images/5.jpg' /></a></li>

   <li><a href='#'><img src='images/6.png' /></a></li>

   <li><a href='#'><img src='images/7.jpg' /></a></li>

   <li><a href='#'><img src='images/9.PNG' /></a></li>

   <li><a href='#'><img src='images/10.jpg' /></a></li>

   <li><a href='#'><img src='images/11.png' /></a></li>

   <li><a href='#'><img src='images/12.png' /></a></li>

   <li><a href='#'><img src='images/13.jpg' /></a></li>

   <li><a href='#'><img src='images/14.png' /></a></li>

   <li><a href='#'><img src='images/15.jpg' /></a></li>

   <li><a href='#'><img src='images/16.jpg' /></a></li>

   <div class='clear'></div>

  </ul>

  <!-- end unordered list -->

 </div>

 <!-- end spolightWrapper div -->

 

</body>

</html>

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.