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框架的AJAX实例代码
Nov 03 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
js调用刷新界面的几种方式
May 03 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python with用法实例
2015/04/14 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
为什么称python为胶水语言
2020/06/16 Python
python如何建立全零数组
2020/07/19 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
大学生个人简历中的自我评价
2013/12/27 职场文书
《王二小》教学反思
2014/02/27 职场文书
广告学专业求职信
2014/06/19 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
简历自荐信范文
2015/03/09 职场文书
湘江北去观后感
2015/06/15 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS