图片预览效果

来源：互联网发布：低成本网络推广编辑：程序博客网时间：2024/06/05 20:10

最近公司要求做一个控台的项目，其中一个页面需要做到类似图片预览的效果，比如，点击移到某张缩略图，上方可以看到相应的大图片，刚开始想着这个不太好实现，但最终还是做出了效果：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        div.up{            width:350px;            height:300px;            background:#ddd;            overflow:hidden;        }        div.up img{width:100%;height:100%;}        #down img{            width:60px;            height:100px;            opacity:0.3;            filter:alpha(opacity=30);        }        #down img.change_image{opacity:1;filter:alpha(opacity=100);}        div.down{            width:350px;            height:100px;        }    </style></head><body><div class="up" id="up"><img src="img/login_logo.png" width="100%" height="100%"></div><div class="down" id="down">    <table>        <tr>            <td><img src="img/1454662321172.jpg"></td>            <td><img src="img/95y58PICJYj_1024.jpg" /></td>            <td><img src="img/1454662394985.jpg" /></td>            <td><img src="img/97C58PIC2fk.jpg" /></td>            <td><img src="img/14-15102610342N93.jpg" /></td>        </tr>    </table></div><script type="text/javascript" src="js/jquery-1.11.3.js"></script><script type="text/javascript">    $(document).ready(function(){        $('#up img').attr('src',$('#down img').eq(0).attr('src'));//打开即把第一张图地址给#up img        $('#down img').eq(0).addClass("change_image");//打开即把第一个缩略图选中        $('#down img').hover(function(){            $('#down img').removeClass("change_image");//先清除所有选中            $(this).addClass("change_image");//当前图片选中            $('#up img').attr('src',$(this).attr('src'));//当前图片地址给#up img        });    });</script></body></html>

阅读全文

0 0