首页>>焦点图>>可以增加不同滤镜效果的焦点图，带缩略图(2014-05-27)

可以增加不同滤镜效果的焦点图，带缩略图

可以增加不同滤镜效果的焦点图，带缩略图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form action="#" method="post" id="interaction-form">  
  2. <div id="interaction">  
  3. <ul class="thumbnails">  
  4. <li class="thumb"><img src="images/500/lighthouse.jpg" width="50" height="33" alt=""></li>  
  5. <li class="thumb"><img src="images/500/staples.jpg" width="50" height="33" alt=""></li>  
  6. <li class="thumb current"><img src="images/500/bee.jpg" width="50" height="33" alt=""></li>  
  7. <li class="thumb"><img src="images/500/leaves.jpg" width="50" height="33" alt=""></li>  
  8. <li class="thumb"><img src="images/500/louvre.jpg" width="50" height="33" alt=""></li>  
  9. <li class="thumb"><img src="images/500/sign.jpg" width="50" height="33" alt=""></li>  
  10. <li class="thumb"><img src="images/500/road.jpg" width="50" height="33" alt=""></li>  
  11. <li class="thumb"><img src="images/500/jordan.jpg" width="50" height="33" alt=""></li>  
  12. <li class="thumb"><img src="images/500/stones.jpg" width="50" height="33" alt=""></li>  
  13. </ul>  
  14. <img id="filter-target" src="images/500/bee.jpg" width="500" height="333" alt="">  
  15. <label class="selector"> Filter:  
  16. <select id="filter-selector">  
  17. </select>  
  18. </label>  
  19. <div class="controls" id="controls-blur">  
  20. <label> Amount:  
  21. <input type="range" name="data-pb-blur-amount" min="0" max="10" step="0.05" value="0">  
  22. </label>  
  23. </div>  
  24. <div class="controls" id="controls-edges">  
  25. <label> Amount:  
  26. <input type="range" name="data-pb-edges-amount" min="0" max="1" step="0.01" value="1">  
  27. </label>  
  28. </div>  
  29. <div class="controls" id="controls-emboss">  
  30. <label> Amount:  
  31. <input type="range" name="data-pb-emboss-amount" min="0" max="1" step="0.01" value="0.2">  
  32. </label>  
  33. </div>  
  34. <div class="controls" id="controls-greyscale">  
  35. <label> Opacity:  
  36. <input type="range" name="data-pb-greyscale-opacity" min="0" max="1" step="0.01" value="1">  
  37. </label>  
  38. </div>  
  39. <div class="controls" id="controls-matrix">  
  40. <label> Amount:  
  41. <input type="range" name="data-pb-matrix-amount" min="0" max="1" step="0.01" value="0.2">  
  42. </label>  
  43. </div>  
  44. <div class="controls" id="controls-mosaic">  
  45. <label> Opacity:  
  46. <input type="range" name="data-pb-mosaic-opacity" min="0" max="1" step="0.01" value="1">  
  47. </label>  
  48. <label> Size:  
  49. <input type="range" name="data-pb-mosaic-size" min="1" max="40" step="1" value="5">  
  50. </label>  
  51. </div>  
  52. <div class="controls" id="controls-noise">  
  53. <label> Amount:  
  54. <input type="range" name="data-pb-noise-amount" min="0" max="100" step="1" value="30">  
  55. </label>  
  56. <label> Type:  
  57. <input type="radio" name="data-pb-noise-type" value="mono">  
  58. Mono  
  59. <input type="radio" name="data-pb-noise-type" value="colour">  
  60. Colour </label>  
  61. </div>  
  62. <div class="controls" id="controls-posterize">  
  63. <label> Amount:  
  64. <input type="range" name="data-pb-posterize-amount" min="2" max="100" step="1" value="5">  
  65. </label>  
  66. <label> Opacity:  
  67. <input type="range" name="data-pb-posterize-opacity" min="0" max="1" step="0.01" value="1">  
  68. </label>  
  69. </div>  
  70. <div class="controls" id="controls-sepia">  
  71. <label> Opacity:  
  72. <input type="range" name="data-pb-sepia-opacity" min="0" max="1" step="0.01" value="0.5">  
  73. </label>  
  74. </div>  
  75. <div class="controls" id="controls-sharpen">  
  76. <label> Amount:  
  77. <input type="range" name="data-pb-sharpen-amount" min="0" max="1" step="0.01" value="0.2">  
  78. </label>  
  79. </div>  
  80. <div class="controls" id="controls-tint">  
  81. <label> Colour:  
  82. <input type="text" name="data-pb-tint-color" value="#FF0000">  
  83. </label>  
  84. <label> Opacity:  
  85. <input type="range" name="data-pb-tint-opacity" min="0" max="1" step="0.01" value="0.5">  
  86. </label>  
  87. </div>  
  88. <button class="apply" type="submit">Apply</button>  
  89. </div>  
  90. </form>  

 


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