jquery实现背景墙聚光灯效果示例分享


Posted in Javascript onMarch 02, 2014
<!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>
Javascript 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
React实现评论的添加和删除
Oct 20 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 #Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 #Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 #Javascript
jquery获取当前点击对象的value方法
Feb 28 #Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 #Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 #Javascript
如何设置一定时间内只能发送一次请求
Feb 28 #Javascript
You might like
global.php
2006/12/09 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
destoon二次开发入门示例
2014/06/20 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
教师求职信范文分享
2013/12/27 职场文书
大学生思想汇报范文
2013/12/31 职场文书
高中政治教学反思
2014/01/18 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
求职教师自荐书
2014/06/19 职场文书
2014年超市工作总结
2014/11/19 职场文书
入党积极分子群众意见
2015/06/01 职场文书
停发工资证明范本
2015/06/12 职场文书