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 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
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
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JavaScript 原型继承
2011/12/26 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python 实现链表实例代码
2017/04/07 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
基于Python解密仿射密码
2019/10/21 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
应聘教师推荐信
2013/10/31 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
超市创意活动方案
2014/08/15 职场文书
导游词格式
2015/02/13 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
晚会开场白和结束语
2015/05/29 职场文书
市级三好生竞选稿
2015/11/21 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android