用JQuery实现背景墙聚光灯效果，直接上代码：
<!DOCtype html> <HTML> <head> <meta http-eqUIv="Content-type" content="text/html; charset=utf-8"> <title>jQuery背景墙聚光灯效果代码 </title> <script type="text/javascript" charset="utf-8" src='/demo/JS/jq.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='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='HTTPS://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='HTTPs://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <li><a href='#'><img src='https://www.jiangweishan.com/zb_users/upload/2017/11/20171112231859_71896.jpeg' /></a></li> <div class='clear'></div> </ul> <!-- end unordered list --> </div> <!-- end spolightWrapper div --> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: