今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图。这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载。效果图如下:
实现的代码。
html代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0,0" /> </filter> </defs></svg> <div class="container"> <div class="content"> <div class="gallery"> <ul class="gallery-pictures"> <li class="gallery-picture"> <img src="img/1.jpg" alt="img01"> </li> <li class="gallery-picture"> <img src="img/2.jpg" alt="img02"> </li> <li class="gallery-picture"> <img src="img/3.jpg" alt="img03"> </li> <li class="gallery-picture"> <img src="img/4.jpg" alt="img04"> </li> <li class="gallery-picture"> <img src="img/5.jpg" alt="img05"> </li> <li class="gallery-picture"> <img src="img/6.jpg" alt="img06"> </li> <li class="gallery-picture"> <img src="img/7.jpg" alt="img07"> </li> <li class="gallery-picture"> <img src="img/8.jpg" alt="img08"> </li> <li class="gallery-picture"> <img src="img/9.jpg" alt="img09"> </li> </ul> <div class="gallery-pagination"> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> <button class="gallery-pagination-dot"> </button> </div> </div> <p> 鼠标点击拖到查看效果!</p> </div> </div>
via:http://www.w2bc.com/Article/36388
- 1楼Cyclone77
- mark