突出显示特效

 

突出显示特效,点击可以查看大图
需      要: 0.0 金币
折      扣: 100 (% 折)
 
相关搜索: 突出 显示  jquery 
下载次数: 16
支持一下(1)
100.00%
踩一下(0)
0.00%
  • 下载等级:
  • 编  号: 20120601173916
  • 浏览器兼容IE6.0及以前,IE7.0,IE8.0,IE9.0,Firefox9.0及以前,Firefox10.0,Chrome17.0及以前,Chrome18.0,Opera
  • 更新日期: 2012-06-01
  • 大  小: 442.89K
  • 浏览次量: 3681
  • 开发者链接: 官网  演示
  • 相  关: 违规举报
  • 收  藏:( 0 人收藏) 加入收藏
  • 此内容校验人员: sinacomcn
分享到:   
pengbin  
 中尉 上传于/2012-06-01 17:41:27
VIP会员   
   

<!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>突出显示 by 25175</title>
 <script type="text/javascript" charset="utf-8" src="index_files/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 &lt;li&gt; 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>25175</h3>
 <h5>ww.25175.com</h5>
 <h5>How to use it? Just hover over the images and you will see the effect.</h5>
 <!-- start spotlightWrapper div -->
 <div class="spotlightWrapper">
  <!-- start unordered list -->
  <ul>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/1.jpg"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/2.jpg"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/3.png"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" class="" src="index_files/4.jpg"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/5.jpg"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/6.png"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/7.jpg"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/9.PNG"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/10.jpg"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/11.png"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/12.png"></a></li>
   <li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/13.jpg"></a></li>

   <div class="clear"></div>
  </ul>
  <!-- end unordered list -->
 </div>
 <!-- end spolightWrapper div -->

 

</body></html>

 购买记录
cnzsq
新兵
ztdhtong
新兵
opq5120
新兵
miladhamzelo
新兵
chenpeng007
新兵
cping1210
新兵
hd520520
新兵
rg0606
新兵
zgh9412
新兵
刘涛_90
新兵
zw124578
新兵
tianzy
新兵
会员评论:  

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

  验证码:
 
反馈请帮助我们提高!意见反馈