betway必威-betway必威官方网站
做最好的网站

依附jQuery图片自适应排列展现代码,jQuery完成预

必威官方网站,基于jQuery图片自适应排列显示代码,jquery自适应

基于jQuery图片自适应排列显示代码。这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果。效果图如下:

必威官方网站 1

在线预览    源码下载

实现的代码。

html代码:

<div style="max-width:900px;margin:auto;padding:0 10px">
    <h3>演示样式一</h3>
</div>

<div style="max-width:908px;margin:auto;padding:0 10px 10px">
    <div id="demo1" class="flex-images">
        <div class="item" data-w="219" data-h="180"><img src="images/1.jpg"></div>
        <div class="item" data-w="279" data-h="180"><img src="images/2.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="images/3.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="images/4.jpg"></div>
        <div class="item" data-w="147" data-h="180"><img src="images/5.jpg"></div>
        <div class="item" data-w="276" data-h="180"><img src="images/6.jpg"></div>
        <div class="item" data-w="319" data-h="180"><img src="images/7.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="images/8.jpg"></div>
        <div class="item" data-w="240" data-h="180"><img src="images/9.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="images/10.jpg"></div>
        <div class="item" data-w="240" data-h="180"><img src="images/11.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="images/12.jpg"></div>
        <div class="item" data-w="283" data-h="180"><img src="images/13.jpg"></div>
        <div class="item" data-w="271" data-h="180"><img src="images/14.jpg"></div>
        <div class="item" data-w="258" data-h="180"><img src="images/15.jpg"></div>
    </div>
</div>

<div style="max-width:900px;margin:auto;padding:0 10px 50px">

    <h3>演示样式二</h3>
    <div id="demo2" class="flex-images">
        <div class="item" data-w="219" data-h="180"><img src="blank.gif" data-src="images/1.jpg"></div>
        <div class="item" data-w="279" data-h="180"><img src="blank.gif" data-src="images/2.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/3.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/4.jpg"></div>
        <div class="item" data-w="147" data-h="180"><img src="blank.gif" data-src="images/5.jpg"></div>
        <div class="item" data-w="276" data-h="180"><img src="blank.gif" data-src="images/6.jpg"></div>
        <div class="item" data-w="319" data-h="180"><img src="blank.gif" data-src="images/7.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/8.jpg"></div>
        <div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="images/9.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/10.jpg"></div>
        <div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="images/11.jpg"></div>
    </div>

    <p style="margin:60px 0 8px">演示样式三</p>
    <div id="demo4" class="flex-images">
        <div class="item" data-w="219" data-h="197">
            <div class="img"><img src="blank.gif" data-src="images/1.jpg"></div>
            <div class="bottom">Caption 1</div>
        </div>
        <div class="item" data-w="279" data-h="197">
            <div class="img"><img src="blank.gif" data-src="images/2.jpg"></div>
            <div class="bottom">Caption 2</div>
        </div>
        <div class="item" data-w="270" data-h="197">
            <div class="img"><img src="blank.gif" data-src="images/3.jpg"></div>
            <div class="bottom">Caption 3</div>
        </div>
        <div class="item" data-w="270" data-h="197">
            <div class="img"><img src="blank.gif" data-src="images/4.jpg"></div>
            <div class="bottom">Caption 4</div>
        </div>
        <div class="item" data-w="147" data-h="197">
            <div class="img"><img src="blank.gif" data-src="images/5.jpg"></div>
            <div class="bottom">Caption 5</div>
        </div>
    </div>

    <p style="margin:60px 0 8px">演示样式四</p>
    <div id="demo5" class="flex-images">
        <div class="item" data-w="219" data-h="180">
            <img src="blank.gif" data-src="images/1.jpg">
            <div class="over">Caption 1</div>
        </div>
        <div class="item" data-w="279" data-h="180">
            <img src="blank.gif" data-src="images/2.jpg">
            <div class="over">Caption 2</div>
        </div>
        <div class="item" data-w="270" data-h="180">
            <img src="blank.gif" data-src="images/3.jpg">
            <div class="over">Caption 3</div>
        </div>
        <div class="item" data-w="270" data-h="180">
            <img src="blank.gif" data-src="images/4.jpg">
            <div class="over">Caption 4</div>
        </div>
        <div class="item" data-w="147" data-h="180">
            <img src="blank.gif" data-src="images/5.jpg">
            <div class="over">Caption 5</div>
        </div>
    </div>

    <p style="margin:60px 0 8px">演示样式五</p>
    <div id="demo6" class="flex-images">
        <div class="item" data-w="450" data-h="300">
            <a target="_blank" href="http://sc.chinaz.com">
                <img src="images/1.jpg">
            </a>
        </div>
        <div class="item" data-w="450" data-h="437">
            <a target="_blank" href="http://sc.chinaz.com">
                <img src="images/2.jpg">
            </a>
        </div>
        <div class="item" data-w="450" data-h="300">
            <a target="_blank" href="http://sc.chinaz.com">
                <img src="images/3.jpg">
            </a>
        </div>
        <div class="item" data-w="450" data-h="298">
            <a target="_blank" href="http://sc.chinaz.com">
                <img src="images/4.jpg">
            </a>
        </div>
    </div>
    <p style="margin:15px 0 5px">演示样式六</p>
    <div>
        <img style="max-width:100%" src="images/1.jpg">
    </div>

</div>

via:

基于jQuery图片自适应排列显示代码。这是一款基于jquery.flex-images插件实现的类似谷歌图片流...

这段js代码用于预加载图片,记住是预加载,不是后加载哟,就是在图片还不显示的时候就将图片下载到用户浏览器的缓存中,这样要显示的时候就非常快,无需再到服务器上去读取图片。

js代码:

jQuery.preloadImages = function() { 
  for(var i = 0; i < arguments.length; i  ) { 
    $("<img />").attr('src', arguments); 
  }
};
//用法 
$.preloadImages('image1.gif','/path/to/image2.png','some/image3.jpg');

以上所述是小编给大家介绍的jQuery 实现图片的依次加载图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文由betway必威发布于网页设计,转载请注明出处:依附jQuery图片自适应排列展现代码,jQuery完成预

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。