[科技]基于jq流暢度非常好的圖片左右切換焦點圖
今天給大家分享一款基于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>