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 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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 存储文本换行实现方法
2010/01/05 PHP
PHP安全配置详细说明
2011/09/26 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
初学Javascript的一些总结
2008/11/03 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
Node.js实现文件上传
2016/07/05 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
跟老齐学Python之模块的加载
2014/10/24 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
使用Python发现隐藏的wifi
2020/03/04 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
酒吧副总经理岗位职责
2013/12/10 职场文书
单位车辆管理制度
2015/08/05 职场文书
Oracle锁表解决方法的详细记录
2022/06/05 Oracle