如何实现界面下图片的点击放大效果-Java教程-爱易网页

如何实现界面下图片的点击放大效果

日期：2014-05-17　浏览次数：20701 次

怎么实现界面上图片的点击放大效果
界面上有一个图片点击后图片放大（人人网上点击相片的效果），在弹出的窗口上图片变大。这个怎么才能实现？

------解决方案--------------------
1. 小窗口放图片的预览图
2. 点击后显示放大图的div，在这个div里加载大图
------解决方案--------------------



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JS放大或者缩写</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.zoomPan{width:570px;left:100px;position:relative; }

.sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;}

#zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;}

#zoom img{position:relative;}

h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;}

h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;}

</style>

</head>

<body>

<h1>zoom</h1>

<div class="zoomPan" id="zoomPan">

    <img src="/jscss/demoimg/201008/s.jpg" alt=""  />

    <div id="zoom" class="sh"><img src="/jscss/demoimg/201008/b.jpg" alt="" /></div>

</div>

<h4>code.js.cn</h4>

</body>

<script type="text/javascript">

//<![CDATA[

function zoomBox() {this.index.apply(this, arguments)}

zoomBox.prototype = {

    index: function(win,zoom) {

        var win=document.getElementById(win);

        var box=document.getElementById(zoom);

        var img=box.getElementsByTagName('IMG')[0];

        var zoom=img.width/win.getElementsByTagName('IMG')[0].width;

        var z=Math.round(box.offsetWidth/2);

        win.onmousemove=function (e){

            e = e 
------解决方案--------------------
 window.event;

            var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();

            if (x>ori.right+20
------解决方案--------------------
y>ori.bottom+20
------解决方案--------------------
x<ori.left-20
------解决方案--------------------
y<ori.top-20)box.style.display='none';

            x-=ori.left;

            y-=ori.top;

            box.style.left=x-z+'px';

            box.style.top=y-z+'px';

            img.style.left=-x*zoom+z+'px';

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

如何实现界面下图片的点击放大效果

相关资料更多>

推荐阅读更多>