HTML5怎么实现有一排图片，选中其中一张后图片就会相应放大显示

zdb458707957 2015-06-24 10:49:31

如图，需要什么知识可以实现这种效果？？

...全文

4659 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

业余草 2015-07-21

打赏
举报

结帖率低的回答率就低！

香蕉猪 2015-07-20

打赏
举报

楼主的结贴率真叫人捉急。。。。自己网上下。。。。

goodlacky 2015-07-04

打赏
举报

直接加css <style type="text/css"> .test:hover{ 你想要的大小 } </style> <img src="" id="test" width="" height="" />

Michael10001 2015-07-03

打赏
举报

图片轮播插件网上一大把吧

业余草 2015-06-26

打赏
举报

图片轮播效果： http://js.itivy.com/jiaoben1936/index.html

引用 5 楼 tianma630 的回复:

写了一个楼主可以参考下要自己多动手哦自己动手丰衣足食

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片轮播</title>
</head>
<body>
<canvas width="400" height="500" id="canvas" style="border:1px solid #A2CD5A;"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var cxt = canvas.getContext('2d');

    var fruits = [
        {name:'apple',url:'image/apple.jpg',width:205,height:220},
        {name:'banana',url:'image/banana.jpg',width:293,height:220},
        {name:'orange',url:'image/orange.jpg',width:220,height:220},
        {name:'peach',url:'image/peach.jpg',width:391,height:220}
    ];

    var apple = new Image();
    var banana = new Image();
    var orange = new Image();
    var peach = new Image();

    function draw(){

        apple.src = fruits[0].url;
        apple.onload = function(){
            cxt.drawImage(apple, 0, 0, fruits[0].width, fruits[0].height, 0, 400, 100, 100);
        };

        banana.src = fruits[1].url;
        banana.onload = function(){
            cxt.drawImage(banana, 0, 0, fruits[1].width, fruits[1].height, 100, 400, 100, 100);
        };

        orange.src = fruits[2].url;
        orange.onload = function(){
            cxt.drawImage(orange, 0, 0, fruits[2].width, fruits[2].height, 200, 400, 100, 100);
        };

        peach.src = fruits[3].url;
        peach.onload = function(){
            cxt.drawImage(peach, 0, 0, fruits[3].width, fruits[3].height, 300, 400, 100, 100);
        };
    }


    draw();

    canvas.onclick = function(ev){
        var ev = ev || window.event;
        var _x = ev.clientX - canvas.offsetLeft;
        var _y = ev.clientY - canvas.offsetTop;
        if(_y >= 400 && _y<=500){
            var num = Math.floor(_x/100);
            num = (num==4)?3:num;
            switch (num){
                case 0:
                    cxt.drawImage(apple, 0, 0, fruits[0].width, fruits[0].height, 10, 10, 380, 380);
                    break;
                case 1:
                    cxt.drawImage(banana, 0, 0, fruits[1].width, fruits[1].height, 10, 10, 380, 380);
                    break;
                case 2:
                    cxt.drawImage(orange, 0, 0, fruits[2].width, fruits[2].height, 10, 10, 380, 380);
                    break;
                case 3:
                    cxt.drawImage(peach, 0, 0, fruits[3].width, fruits[3].height, 10, 10, 380, 380);
                    break;
                default :
                    break;
            }
        }
    };

</script>
</body>
</html>

这个不错

tianma630 2015-06-25

打赏
举报

写了一个楼主可以参考下
要自己多动手哦自己动手丰衣足食

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>图片轮播</title>

</head>

<body>

<canvas width="400" height="500" id="canvas" style="border:1px solid #A2CD5A;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    var fruits = [

        {name:'apple',url:'image/apple.jpg',width:205,height:220},

        {name:'banana',url:'image/banana.jpg',width:293,height:220},

        {name:'orange',url:'image/orange.jpg',width:220,height:220},

        {name:'peach',url:'image/peach.jpg',width:391,height:220}

    ];



    var apple = new Image();

    var banana = new Image();

    var orange = new Image();

    var peach = new Image();



    function draw(){



        apple.src = fruits[0].url;

        apple.onload = function(){

            cxt.drawImage(apple, 0, 0, fruits[0].width, fruits[0].height, 0, 400, 100, 100);

        };



        banana.src = fruits[1].url;

        banana.onload = function(){

            cxt.drawImage(banana, 0, 0, fruits[1].width, fruits[1].height, 100, 400, 100, 100);

        };



        orange.src = fruits[2].url;

        orange.onload = function(){

            cxt.drawImage(orange, 0, 0, fruits[2].width, fruits[2].height, 200, 400, 100, 100);

        };



        peach.src = fruits[3].url;

        peach.onload = function(){

            cxt.drawImage(peach, 0, 0, fruits[3].width, fruits[3].height, 300, 400, 100, 100);

        };

    }





    draw();



    canvas.onclick = function(ev){

        var ev = ev || window.event;

        var _x = ev.clientX - canvas.offsetLeft;

        var _y = ev.clientY - canvas.offsetTop;

        if(_y >= 400 && _y<=500){

            var num = Math.floor(_x/100);

            num = (num==4)?3:num;

            switch (num){

                case 0:

                    cxt.drawImage(apple, 0, 0, fruits[0].width, fruits[0].height, 10, 10, 380, 380);

                    break;

                case 1:

                    cxt.drawImage(banana, 0, 0, fruits[1].width, fruits[1].height, 10, 10, 380, 380);

                    break;

                case 2:

                    cxt.drawImage(orange, 0, 0, fruits[2].width, fruits[2].height, 10, 10, 380, 380);

                    break;

                case 3:

                    cxt.drawImage(peach, 0, 0, fruits[3].width, fruits[3].height, 10, 10, 380, 380);

                    break;

                default :

                    break;

            }

        }

    };



</script>

</body>

</html>

zdb458707957 2015-06-24

打赏
举报

请问有全部的代码吗？！

vinner7 2015-06-24

打赏
举报

用jquery http://js.itivy.com/jiaoben1936/index.html

zdb458707957 2015-06-24

打赏
举报

请问是什么知识点呢？！！

tianma630 2015-06-24

打赏
举报

/*
 * sx,xy 图片的起始点
 * sw,wh 图片的宽和高
 * dx,dy 画布的起始点
 * dw,dh 画布的宽和高
 * */
cxt.drawImage(sx, sy, sw, sh, dx, dy, dw, dh);

准备一份大图和一份小图，用上面的方法绘制大图和小图

canvas.onmouseover = function(ev){
            var x = ev.clientX - canvas.offsetLeft;
            var y = ev.clientY - canvas.offsetTop;
            
            // 吧坐标(x, y)和其中小图的位置进行比较，看坐标是在哪一个小图中，则把画出对应的大图
        };