您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery相册代码特效 > 正文

jQuery背景图片墙聚光灯效果

2015-09-30 02:09:44 作者:天外飞仙 人气:275 Views

jQuery背景图片墙聚光灯效果
20150927100722
导入js代码

<script type="text/javascript" charset="utf-8" src='js/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 &lt;li&gt; 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>

下载地址
预览地址

链接:http://www.jqueryba.com/5773.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!