拼图图片原理 2019-03-22

作者: CondorHero | 来源:发表于2019-03-23 00:01 被阅读8次

原理解释：

根据实际效果我们知道，图片被瓜分为大小相同的盒子，每个盒子绝对定位，小盒子里面放图片，通过调整小盒子里的图片位置来控制显示出来的区域，再由小盒子共同拼成一张大图。这就是我们看到的图片拼图。

拼图图片原理.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拼图轮播</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    /*给每个盒子添加背景图、大小、定位*/
        div {
            height: 100px;
            width: 100px;
            border: 1px solid skyblue;
            background: url(images/befu.jpg);
            position: absolute;
        }
    </style>
</head>
<body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    <script src = "js/jquery-1.12.3.min.js"></script>
    <script>
        //使用each 遍历
        $("div").each(function(i){
            $(this).css({
                //设置默认样式
                "top" : 200,
                "left" : 800,
                "background-position" : -i%8*100 + "px " + -parseInt(i/8)*100 + "px"
                // 超级无敌大坑中间px 后面有一个空格，空格后面必须有加号。
            }).delay(i*300).animate({
                //设置延迟，运动目的。
                "top" : parseInt(i/8)*100,
                "left" : i%8*100,
            },1000);
        });
    </script>
</body>
</html>

可能大家看不懂 animate后面的运动目的地，它的计算公式怎么来的?
特殊说明下：

我们一共把图分成八列五行使用each进行遍历的时候，编号从零开始到三十九。一共四十个盒子。我们在算目的地要求第一行0~7编号 top 为零，左边第一列0 8 16 32 编号 left 为零。以此类推第二列第二行......
得出如下公式;均除以列数就行了
top : parseInt(i/8)*100,
left : i%8*100,

代码优化，写 div 太麻烦了，使用 jQuery 批量添加 div 盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拼图轮播</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    /*给每个盒子添加背景图、大小、定位*/
        div {
            height: 100px;
            width: 100px;
            border: 1px solid skyblue;
            background: url(images/befu.jpg);
            position: absolute;
        }
    </style>
</head>
<body>
    <script src = "js/jquery-1.12.3.min.js"></script>
    <script>
        //创建div盒子代码
        for(var row = 0; row < 8;row++)
            for (var col = 0; col <5 ; col++) {
                var $div = $("<div></div>");
                $("body").append($div);
        }
        
        $("div").each(function(i){//使用each 遍历
            $(this).css({
                //设置默认样式
                "top" : 200,
                "left" : 800,
                "background-position" : -i%8*100 + "px " + -parseInt(i/8)*100 + "px"
                // 超级无敌大坑中间px 后面有一个空格，空格后面必须有加号。
            }).delay(i*300).animate({
                //设置延迟，运动目的。
                "top" : parseInt(i/8)*100,
                "left" : i%8*100,
            },1000);
        });
    </script>
</body>
</html>

网友评论

基础前端

本文标题：拼图图片原理 2019-03-22

本文链接：https://www.haomeiwen.com/subject/ewjdvqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

拼图图片原理 2019-03-22

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

基础前端