手机端图片预览查看



<span style="color: #0000ff"><<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">Meta <span style="color: #ff0000">charset<span style="color: #0000ff">="UTF-8"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">Meta <span style="color: #ff0000">http-equiv<span style="color: #0000ff">=X-UA-Compatible <span style="color: #ff0000">content<span style="color: #0000ff">="IE=edge"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">Meta <span style="color: #ff0000">name<span style="color: #0000ff">=viewport <span style="color: #ff0000">content<span style="color: #0000ff">="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">title<span style="color: #0000ff">>图片预览<span style="color: #0000ff"></<span style="color: #800000">title<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">link <span style="color: #ff0000">rel<span style="color: #0000ff">="stylesheet"<span style="color: #ff0000"> href<span style="color: #0000ff">="css/reset.css"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">link <span style="color: #ff0000">rel<span style="color: #0000ff">="stylesheet"<span style="color: #ff0000"> href<span style="color: #0000ff">="css/webuploader.css"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">style<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #008000">/<span style="background-color: #f5f5f5; color: #008000">正式样式 start<span style="background-color: #f5f5f5; color: #008000">/<span style="background-color: #f5f5f5; color: #800000">
.wrap </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
<span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

.head-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 40px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; #4ecbf3</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    text-align</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; center</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    line-height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 40px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
<span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

.head-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> h4 </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; #fff</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
<span style="background-color: #f5f5f5; color: #000000"&gt;}</span>
<span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a></span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #800000"&gt;
.photos-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a></span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 50px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 50px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>

<span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
.photos-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> img</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
    height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
<span style="background-color: #f5f5f5; color: #000000"&gt;}</span>
<span style="background-color: #f5f5f5; color: #008000"&gt;/**/</span><span style="background-color: #f5f5f5; color: #800000"&gt;
#close </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        font-size</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 16px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        z-index</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 999999</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 45px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 45px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        right</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; .8</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;#333</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        border-radius</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0 0 0 80%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
close:before,#close:after <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">
content</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; " "</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 2px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 20px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
background-color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; hsl(0,100%,100%)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 10px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 24px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">
close:before <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">
-webkit-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
-moz-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
-ms-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
-o-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">
close:after <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">
-webkit-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
-moz-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
-ms-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
-o-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">
.image-footer <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">

text-align<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> center<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000">

font-size<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> 16px !important<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000">

bottom<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> 20px !important<span style="background-color: #f5f5f5; color: #000000">;

<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">

.imgName<span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">
          font-size</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 17px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
          text-align</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;center</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
          display</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; block</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
          color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;#fff</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
          margin</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;10px auto</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>


    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
.image-viewer<span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">position<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> fixed !important<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000"> bottom<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> 0<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">

.image-viewer .viewer<span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000"> position<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> absolute<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000"> transform<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> translateY(-50%)<span style="background-color: #f5f5f5; color: #000000">; <span style="background-color: #f5f5f5; color: #000000">}

<span style="color: #0000ff"></<span style="color: #800000">style<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="wrap"<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="head-Box"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">h4<span style="color: #0000ff">>图片预览<span style="color: #0000ff"></<span style="color: #800000">h4<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="photos-Box"<span style="color: #0000ff">>
        <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; <img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>预览1"&gt;
        <img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>预览2"&gt;<img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>预览3"&gt;<img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>预览4"&gt;<img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>预览5"&gt;<img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>预览6"&gt; </span><span style="color: #008000"&gt;--></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="js/jquery-1.8.3.min.js"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; <script src="js/light7.js"&gt;</script> </span><span style="color: #008000"&gt;--></span>
<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">type<span style="color: #0000ff">="text/javascript"<span style="color: #ff0000"> src<span style="color: #0000ff">="js/imageViewer.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">><span style="background-color: #f5f5f5; color: #000000">

$(<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000">() {

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> photos <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzU1ODg5NjNfOGM4MDI3MzQtNDViNS00NDA3LWI3MzQtN2IwOWE3Njg0M2M3,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjQ2NDY2MDk4MzlfOTA3ZDhlZmMtMTkwYy00M2YxLWEwNmYtZGRiMTBmZmYxNjY4,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjQ2NDY2MTMxNzVfYjI2Y2UwNGUtMWQ4ZC00N2JhLWJlZjEtYTA1MWU5NjY1MjUy,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjQ2NDY2MTcwOTBfMjE3MmRjNWUtZGVjMC00MDdhLWE2NjMtN2U3NDY5NDFkZjI0<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">;

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">分割成数组

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> photoArr <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> photos.split(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">);

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> innerhtml <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">;

<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000">(<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> i <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;i<span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000">photoArr.length;i<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){

console.log(photoArr[i]);

innerhtml <span style="background-color: #f5f5f5; color: #000000">+= <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000"><img class="img-list" src="<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000">photoArr[i]<span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">"/><span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">;

};

$(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">.photos-Box<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">).append(innerhtml);

imageViewerOpition({className:<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">.img-list<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">});<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">图片预览

<span style="background-color: #f5f5f5; color: #000000">    })

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>
手机端图片预览查看

close:before,#close:after <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">

close:before <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">

close:after <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">

猜你在找的JavaScript相关文章
