JavaScript之图片操作3

在页面布局中，常常会用到九宫格布局，如下图所示：

本次我们就以九宫格为基础进行图片的布局操作，首先我们以上面的图片的为例，假设每个格子的大小都相同，将每一个格子相对其父元素进行定位，这样，我们只需要控制每个格子的left和top属性，就可以控制图片的位置了，例如上面序号为4的格子，其left属性值就是每个格子一倍的宽度值，top属性值就是每个格子的一倍高度值，以此为基础，我们将实现下面的效果：

通过用户点击自定义每列显示的个数，来动态控制布局。

首先我们需要在页面中写入基础代码，实现图一的默认显示效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #top{
            padding: 20px;
        }

        #bottom{
            position: relative;
        }

        .box{
            width: 220px;
            height: 360px;
            margin: 0 15px 15px 0;
            background-color: #e8e8e8;
        }

        .box p:last-child{
            font-size: 13px;
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="top">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="bottom">
        <div class="box">
            <img src="image/1.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/2.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/3.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/4.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/5.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/6.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/7.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/8.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/9.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/10.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/11.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/12.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/13.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/14.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/15.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
    </div>
</body>
</html>

然后获取相应的标签，监听用户的点击事件，得到每列显示的个数

 //获取需要的标签
        var btns = document.getElementById("top").children;
        var bottom = document.getElementById("bottom");
        var allCols = 1;
        // 2.监听按钮的点击
        btns[0].onclick = function () {
           allCols = 3;
        };

        btns[1].onclick = function () {
            allCols = 4;
        };

        btns[2].onclick = function () {
           allCols = 5;
        };

第三步，我们需要根据每个盒子的大小和每列显示的个数，依次计算每个盒子的位置：

//根据每个盒子的大小定义变量
 var boxW = 220, boxH = 360, marginXY = 15;

 //遍历
for(var i=0; i<bottom.children.length; i++){
    //求出当前盒子所在的行和列
    var row = parseInt(i / allCols);
    var col = parseInt(i % allCols);
   // console.log("当前盒子在第" + row  + " ,第" + col);

   //盒子的定位
   var currentBox = parentNode.children[i];
   currentBox.style.position = ‘absolute‘;
   currentBox.style.left = col * (boxW + marginXY) + ‘px‘;
   currentBox.style.top = row * (boxH + marginXY) + ‘px‘;}

现在，基本功能已经完成，需要将代码进行稍微的整理，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #top{
            padding: 20px;
        }

        #bottom{
            position: relative;
        }

        .box{
            width: 220px;
            height: 360px;
            margin: 0 15px 15px 0;
            background-color: #e8e8e8;
        }

        .box p:last-child{
            font-size: 13px;
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="top">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="bottom">
        <div class="box">
            <img src="image/1.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/2.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/3.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/4.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/5.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/6.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/7.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/8.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/9.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/10.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/11.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/12.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/13.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/14.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/15.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
    </div>
<script>
    window.onload = function () {
        //获取需要的标签
        var btns = document.getElementById("top").children;
        var bottom = document.getElementById("bottom");

        //监听按钮的点击
        btns[0].onclick = function () {
            j_flex(3, bottom);
        };

        btns[1].onclick = function () {
            j_flex(4, bottom);
        };

        btns[2].onclick = function () {
            j_flex(5, bottom);
        };

        function j_flex(allCols, parentNode) {
            //根据每个盒子的大小定义变量
            var boxW = 220, boxH = 360, marginXY = 15;

            //遍历
            for(var i=0; i<parentNode.children.length; i++){
                //求出当前盒子所在的行和列
                var row = parseInt(i / allCols);
                var col = parseInt(i % allCols);
                // console.log("当前盒子在第" + row  + " ,第" + col);

                //盒子的定位
                var currentBox = parentNode.children[i];
                currentBox.style.position = ‘absolute‘;
                currentBox.style.left = col * (boxW + marginXY) + ‘px‘;
                currentBox.style.top = row * (boxH + marginXY) + ‘px‘;
            }
        }
    }
</script>
</body>
</html>

完整代码下载链接：点这里

原文地址：https://www.cnblogs.com/yuyujuan/p/9537458.html

时间： 2024-08-03 13:30:02

JavaScript之图片操作3的相关文章

JavaScript之图片操作1

在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在html中创建一个放照片的容器和两个切换的按钮. <img id="icon" src="img/icon_01.png" alt=""> <button id="prev">上一张</button>

JavaScript之图片操作2

在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换.因此,我们需要三个容器分别放标题,大图和小图.  <p id="des">蒲公英</p>  <img id="big_img" src="img/1.jpg" width="540"> <!-

本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为了实现上面的效果,我们需要在html中进行简单的布局: <div id="box"> <img id="pic" src="images/timg.jpg" alt=""> <span id=&quo

UIScrollView缩放图片操作

要想ScrollView缩放,必须告诉缩放那个控件,它自身的大小是不会缩放的: 并且ScrollView只能缩放自己内部的子控件: 1:这时就要用到代理,代理告诉ScrollView缩放哪个控件.(设置代理对象) 2:要想成为ScrollView的代理就要遵守协议:UIScrollViewDelegate (遵守协议) 3:成为代理后实现协议里的方法:viewForZoomingInScrollView;这个方法是返回要缩放的子控件,就是代理告诉ScrollView哪个控件要缩放或者说这个方法

第一百二十六节，JavaScript，XPath操作xml节点

第一百二十六节,JavaScript,XPath操作xml节点学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准DOM去查找XML中的节点方式,大大降低了查找难度,方便开发者使用.但是,DOM3级以前的标准并没有就XPath做出规范:直到DOM3在首次推荐到标准规范行列.大部分浏览器实现了这个标准,IE则以自己的方式实现了XPath. 一．IE中的XPath 在IE8及之前的浏览器,XPath是采用内置基于A

使用JavaScript判断图片是否加载完成的三种实现方式

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http:/

JavaScript日期时间操作

js日期操作: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表星期天)myDate.getTime(); //获取当前时间(从1970.1

Javascript 将图片的绝对路径转换为base64编码

Javascript将图片的绝对路径转换为base64编码我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; 我们如下编写代码: function getBase64Image(img) { var canvas = document.create

javascript iframe相关操作

1. 获得iframe的window对象 iframeElement.contentWindow 2. 获得iframe的document对象存在跨域访问限制. chrome:iframeElement.contentDocument firefox:iframeElement.contentDocument ie:element.contentWindow.document 备注:ie没有iframeElement.contentDocument属性. var getIframeDocume