你的位置:首页 > Java教程

[Java教程]基于jq流畅度非常好的图片左右切换焦点图


今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图。这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <svg ="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