jquery点击大图遮罩,基于jQuery右侧带缩略图导航的焦点图

jquery点击大图遮罩,基于jQuery右侧带缩略图导航的焦点图。基于jQuery点击缩略图侧边滑出大图特效,jquery大图

据悉jQuery点击缩略图侧面滑出大图特效是一款基于strip.pkgd插件达成的点击左侧缩略图左侧滑出大图切换代码。效果图如下:

图片 1

在线预览    源码下载

落实的代码。

html代码:

<div id='page'>
    <div id="content" class='clearfix'>
        <section class='clearfix'>
            <p>
            <a href='images/bigdm1.jpg' class='strip thumbnail' data-strip-caption="Dorhout Mees F/W 2014-15" data-strip-group="dorhoutmees">
              <img src='images/dm1.jpg'>
            </a>
            <a href='images/bigdm2.jpg' class='strip thumbnail' data-strip-caption="Dorhout Mees F/W 2014-15" data-strip-group="dorhoutmees">
              <img src='images/dm2.jpg'>
            </a>
            <a href='images/bigdm3.jpg' class='strip thumbnail' data-strip-caption="Dorhout Mees F/W 2014-15" data-strip-group="dorhoutmees">
              <img src='images/dm3.jpg'>
            </a>
            </p>

            <p>
            <a href='images/bigjohn_singer.jpg' class='strip thumbnail thumbnail-landscape' data-strip-caption="John Singer Sargent - Portrait of a Boy - 1890" data-strip-group="art">
              <img src='images/john_singer.jpg'>
            </a>

            <a href='images/bighenry_scott_tuke.jpg' class='strip thumbnail thumbnail-landscape' data-strip-caption="Henry Scott Tuke - Beach Study - 1928" data-strip-group="art">
              <img src='images/henry_scott_tuke.jpg'>
            </a>

            <a href='images/bigwyeth.jpg' class='strip thumbnail thumbnail-landscape' data-strip-caption="Andrew Wyeth - Wind from the Sea - 1947" data-strip-group="art">
              <img src='images/wyeth.jpg'>
            </a>

            </p>
        </section>
    </div>
</div>

via:

基于jQuery点击缩略图右边滑出大图特效是生龙活虎款基于strip.pkgd插件完成的点击侧面缩略图右…

依附jQuery左边带缩略图导航的症结图,jquery缩略图

明天大家要来分享生机勃勃款侧边带缩略图导航的jQuery宗旨图插件,那款jQuery主题图插件的特征是左边手有一列缩略图导航列表,何况能够定义大肆数量的图样,你能够拖动列表来查阅全部的图片,点击缩略图后,就可以兑现图片的前后切换动画。

图片 2

在线预览   源码下载

福衢寿车的代码。

html代码:

 <div id="example5" class="slider-pro">
        <div class="sp-slides">
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg"
                    data-retina="images/image1_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg"
                    data-retina="images/image2_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg"
                    data-retina="images/image3_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg"
                    data-retina="images/image4_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg"
                    data-retina="images/image5_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg"
                    data-retina="images/image1_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg"
                    data-retina="images/image2_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg"
                    data-retina="images/image3_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg"
                    data-retina="images/image4_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg"
                    data-retina="images/image5_large.jpg" />
                <div class="sp-caption">
                    HTML5资源教程</div>
            </div>
        </div>
        <div class="sp-thumbnails">
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image1_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image2_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image3_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image4_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image5_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image6_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image7_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image8_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image9_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-image-container">
                    <img class="sp-thumbnail-image" src="images/image10_thumbnail.jpg" />
                </div>
                <div class="sp-thumbnail-text">
                    <div class="sp-thumbnail-title">
                        HTML5资源教程</div>
                    <div class="sp-thumbnail-description">
                        html5tricks.com</div>
                </div>
            </div>
        </div>
    </div>

js代码:

 $(document).ready(function ($) {
            $('#example5').sliderPro({
                width: 670,
                height: 500,
                orientation: 'vertical',
                loop: false,
                arrows: true,
                buttons: false,
                thumbnailsPosition: 'right',
                thumbnailPointer: true,
                thumbnailWidth: 290,
                breakpoints: {
                    800: {
                        thumbnailsPosition: 'bottom',
                        thumbnailWidth: 270,
                        thumbnailHeight: 100
                    },
                    500: {
                        thumbnailsPosition: 'bottom',
                        thumbnailWidth: 120,
                        thumbnailHeight: 50
                    }
                }
            });
        });

via:

昨日我们要来分享大器晚成款侧面带缩略图导航的jQuery宗旨图插件,那款jQuery核心图插件的特点…

据说jQuery左边小图滚动右边大图展现代码,jquery大图

前日给大家享用大器晚成款
jQuery左侧小图滚动侧面大图展现代码是生机勃勃款基于jQuery完毕的侧面滚动图片点击大图查看效果代码。该实例适用浏览器:IE8、360、Fire福克斯、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

图片 3

在线预览   源码下载

兑现的代码。

html代码:

  <div class="caseImg03 w1002">
        <div class="slideCase03">
            <div class="bd03">
                <ul>
                    <li class="clearfix">
                        <div class="smallImg03">
                            <img src="img/smallImg01.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg01.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京 装机容量:100KW
                                    <div class="text03">
                                        项目简介:<p class="p03">
                                            北京奥运“鸟巢”光伏示范发电工程,全部采用了阳光电源逆变器和系统设计服务,为“鸟巢”不断输送绿色电力。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="smallImg03">
                            <img src="img/smallImg02.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg02.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="smallImg03">
                            <img src="img/smallImg03.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg03.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京 装机容量:100KW
                                    <div class="text03">
                                        项目简介:<p class="p03">
                                            北京奥运“鸟巢”光伏示范发电工程,全部采用了阳光电源逆变器和系统设计服务,为“鸟巢”不断输送绿色电力。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="smallImg03">
                            <img src="img/smallImg01.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg01.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="smallImg03">
                            <img src="img/smallImg02.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg02.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京 装机容量:100KW
                                    <div class="text03">
                                        项目简介:<p class="p03">
                                            北京奥运“鸟巢”光伏示范发电工程,全部采用了阳光电源逆变器和系统设计服务,为“鸟巢”不断输送绿色电力。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="smallImg03">
                            <img src="img/smallImg03.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg03.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="smallImg03">
                            <img src="img/smallImg01.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg01.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京 装机容量:100KW
                                    <div class="text03">
                                        项目简介:<p class="p03">
                                            北京奥运“鸟巢”光伏示范发电工程,全部采用了阳光电源逆变器和系统设计服务,为“鸟巢”不断输送绿色电力。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="smallImg03">
                            <img src="img/smallImg02.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg02.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="smallImg03">
                            <img src="img/smallImg03.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg03.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京 装机容量:100KW
                                    <div class="text03">
                                        项目简介:<p class="p03">
                                            北京奥运“鸟巢”光伏示范发电工程,全部采用了阳光电源逆变器和系统设计服务,为“鸟巢”不断输送绿色电力。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="smallImg03">
                            <img src="img/smallImg02.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg02.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="smallImg03">
                            <img src="img/smallImg01.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg01.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京 装机容量:100KW
                                    <div class="text03">
                                        项目简介:<p class="p03">
                                            北京奥运“鸟巢”光伏示范发电工程,全部采用了阳光电源逆变器和系统设计服务,为“鸟巢”不断输送绿色电力。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="smallImg03">
                            <img src="img/smallImg03.jpg" />
                            <div class="hidden">
                                <img src="img/bigImg03.jpg" />
                                <div class="hiddBg">
                                    项目名称:奥运鸟巢光伏并网发电项目 建设地点:北京
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="hd03">
                <a class="next"></a>
                <ul>
                </ul>
                <a class="prev"></a>
            </div>
        </div>
        <div class="caselayBox">
            <div class="casehtml">
            </div>
        </div>
    </div>

css代码:

 *
        {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a, img
        {
            border: 0;
        }
        body
        {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
        /*clearfix清除浮动*/
        .clearfix:after
        {
            visibility: hidden;
            display: block;
            content: " ";
            clear: both;
            height: 0;
            line-height: 0;
        }
        .clearfix
        {
            zoom: 1;
        }
        .w1002
        {
            width: 1002px;
            margin: 0 auto;
        }

via:

前几日给大家分享风华正茂款
jQuery左侧小图滚动侧面大图突显代码是生机勃勃款基于jQuery完成的侧面…

jQuery点击图片弹出大图遮罩层,jquery点击大图遮罩

使用jQuery插件HoverTreeShow弹出遮罩层呈现大图

效果与利益体验:

在付出HoverTreeTop项目标成品展现效果进度中,因为要把成品图片的大图显示给客商看,就采纳jQuery制作了叁个插件:HoverTreeShow
,使用该插件能够极低价的弹出图片的大图,已经选取在档案的次序中了,除了下面链接的示范外,HoverTreeTop项目标出品显示也是叁个实例,请访谈链接:

HoverTreeTop是贰个ASP.NET开源项目,用于集团网址建设,里面也含有HoverTreeShow插件的源码,有必要的意中人能够下载源码:

弹出层后,可以点击右上角的 X 按钮关闭,也得以双击页面关闭层。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>使用HoverTreeShow插件弹出图片大图层_何问起</title><base target="_blank" />
    <meta charset="utf-8" />
    <link href="http://hovertree.com/texiao/hovertreeshow/hovertreeshow.css" rel="stylesheet" />
    <script src="http://down.hovertree.com/jquery/jquery-1.12.1.min.js"></script>
    <style>#hovertreeshow{
    width:400px;height :400px;overflow:scroll;margin:5px auto;}
    #hovertreeshow img{max-height:100%;}
    #headhovertree{margin:5px auto;width:400px;}a{color:blue;}
    </style>
</head>
<body>
    <div id="headhovertree"><h3>使用HoverTreeShow插件弹出图片大图层</h3>
    请点击下方图片,将弹出遮罩层显示图片原图。<a href="http://hovertree.com/h/bjag/o46xlsnm.htm">说明</a> <a href="http://hovertree.com">首页</a></div>
    <div id="hovertreeshow" class="hovertreeshow">
        <img src='http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg' /><img src='http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg' />
        <img src="http://hovertree.com/hvtimg/201512/o9qashmi.gif" />
    </div>
    <div style="height:600px;width:100%"></div>
    <script src="http://hovertree.com/texiao/hovertreeshow/hovertreeshow.js"></script>
</body>
</html>

更加多特效:

使用jQuery插件HoverTreeShow弹出遮罩层呈现大图 效果体验:

网站地图xml地图