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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
类的另类用法--数据的封装
2006/10/09 PHP
php,不用COM,生成excel文件
2006/10/09 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
Python文件的读写和异常代码示例
2017/10/31 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
django admin组件使用方法详解
2019/07/19 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python super()方法原理详解
2020/03/31 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
行政专员工作职责
2013/12/22 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
班长自荐书范文
2014/02/11 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers