当前位置: 代码迷 >> .NET相关 >> 基于jq流利度非常好的图片左右切换焦点图
  详细解决方案

基于jq流利度非常好的图片左右切换焦点图

热度:111   发布时间:2016-04-24 02:51:13.0
基于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>

via:http://www.w2bc.com/Article/36388

1楼Cyclone77
mark
  相关解决方案