首页>>Jquery图片>>highslide使用实例,点击图片放大效果，再次点击缩小(2013-08-24)

highslide使用实例,点击图片放大效果，再次点击缩小

highslide使用实例,点击图片放大效果，再次点击缩小,一般用于图片展示列表中,各种浏览器通用。

highslide使用实例,点击图片放大效果，再次点击缩小
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code复制内容到剪贴板
  1. <script type="text/javascript" src="highslide/highslide.js"></script>  
  2. <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />  
  3. <script type="text/javascript">  
  4. hs.graphicsDir = 'highslide/graphics/';  
  5. hs.align = 'center';  
  6. hs.transitions = ['expand', 'crossfade'];  
  7. hs.outlineType = 'rounded-white';  
  8. hs.wrapperClassName = 'controls-in-heading';  
  9. hs.fadeInOut = true;  
  10. //hs.dimmingOpacity = 0.75;  
  11.   
  12. // Add the controlbar  
  13. if (hs.addSlideshow) hs.addSlideshow({  
  14. //slideshowGroup: 'group1',  
  15. interval: 5000,  
  16. repeat: false,  
  17. useControls: true,  
  18. fixedControls: false,  
  19. overlayOptions: {  
  20. opacity: 1,  
  21. position: 'top right',  
  22. hideOnMouseOut: false  
  23. }  
  24. });  
  25. </script>  
  26. <a href="images/image-1.jpg" class="highslide"  
  27. onclick="return hs.expand(this)"><img src="images/thumb-1.jpg"  
  28. alt="Highslide JS" /> </a>  
  29. <div class="highslide-caption highslide-display-block" id="" align="right" style="overflow-x: hidden; overflow-y: hidden; z-index: 2; margin-top: 0px; visibility: visible; height: 17px">  
  30. <img src="001_files/clickToC.png" onclick="return hs.close(this)" title="close" style="cursor:pointer;" alt="Close"/>  
  31. </div>  
  32. <a href="images/1.jpg" class="highslide"  
  33. onclick="return hs.expand(this)"><img src="images/1.jpg"  
  34. alt="Highslide JS" /> </a>  
  35. <div class="highslide-caption highslide-display-block" id="" align="right" style="overflow-x: hidden; overflow-y: hidden; z-index: 2; margin-top: 0px; visibility: visible; height: 17px">  
  36. <img src="001_files/clickToC.png" onclick="return hs.close(this)" title="close" style="cursor:pointer;" alt="Close"/>  
  37. </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_1.html