Maison > interface Web > js tutoriel > jquery图片放大镜功能的实例代码_jquery

jquery图片放大镜功能的实例代码_jquery

WBOY
Libérer: 2016-05-16 17:39:27
original
1387 Les gens l'ont consulté

jquery图片放大镜功能的实例代码_jquery

复制代码 代码如下:

/*放大镜*/
.ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;}
.ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;}
.ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none;width:195px; height:195px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);}
.ZoomMain .zoomDetail{display:none;border:1px solid #DCDDDD;width:393px; height:393px; position:absolute;right:-405px;top:0px; overflow:hidden;}
.littleImg {margin-top:10px;height:54px;overflow:hidden;position:relative;}
.littleImg span {position: absolute;display:block;width:10px;height:55px;background:#999;cursor:pointer;}
.littleImg span em {display: none;width:10px;height:55px;}
.littleImg span.btnL {left:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top;}
.littleImg span.btnL em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left -57px;}
.littleImg span.btnR em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px -57px;}
.littleImg span.btnR {right:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px top;}
.littleImg span.hover em {display:block;}
.littleImg .slideMain {width:343px;height:55px;margin-left:26px;overflow:hidden;position:relative;}
.littleImg .slideMain ul {position:absolute;left:0;width:355px;padding-top:1px;}
.littleImg .slideMain ul li {float:left;margin-right:6px;cursor:pointer;width:50px;height:50px;border:1px solid #dbdbdb;}
.littleImg .slideMain ul li.selected {border-color:#999;}
.littleImg .slideMain ul li img {float:left;width:50px;height:50px;}
/*放大镜end*/





 

        
         jquery图片放大镜功能的实例代码_jquery
 

 

      
      
       

             

                   
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •                
  • jquery图片放大镜功能的实例代码_jquery

  •              

       

 

 

            jquery图片放大镜功能的实例代码_jquery
 



  

?

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal