求助，为什么不能像淘宝那样辺移动辺局部放大？

wudichaoren2011 2015-09-23 01:33:52





<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>放大镜</title>

<meta name="Keywords" content="">

<meta name="author" content="@my_programmer">

<style type="text/css">

/*重置{*/

html{color:#000;background:#fff;}

body,div{padding:0;margin:0;}

img{border:none;}

/*}重置*/

.outer{width:200px;height:150px;position:relative;margin:20px auto;}

.inner{width:80px;height:60px;background:#f55;position:absolute;opacity:0.5;filter:alpha(opacity=50);left:0;top:0;cursor:pointer;}

.aa{width:320px;height:240px;position:relative;border:1px red solid;margin:20px auto;overflow:hidden;}

.imgs{position:absolute;}

.outer img{width:200px;height:150px;}

</style>

</head>

<body>

    <div>

        <div class="outer" id="outer">

            <img src="images/521.jpg" alt="pobaby小图"/>

            <div class="inner" id="inner"></div>

        </div>

        <div class="aa" id="aa">

            <div class="imgs" id="imgs" ><img src="images/522.jpg" alt="pobaby大图"/></div>

        </div>

    </div>

<script type="text/javascript">

    var outer=document.getElementById("outer");

    var inner=document.getElementById("inner");

    var aa=document.getElementById("aa");

    var imgs=document.getElementById("imgs");

    var x,y,n=false;

    inner.onmousedown=test1;//如果把inner改为document,鼠标在窗口任意位置点击，图片都会跟随

    document.onmousemove=test2;//document如果改为outer,鼠标在outer内才起作用

    document.onmouseup=test3;

    function test1(event){//鼠标按下时方法

        var event=event || window.event;//调试兼容,各个浏览器认识event有差别.

        n=true;//当n=true（n的值可随便设定）时，假定为鼠标按下的事件

        x=event.clientX-inner.offsetLeft;//鼠标在透明层的相对横坐标=鼠标坐标-方块左边距

        y=event.clientY-inner.offsetTop;//鼠标在透明层的相对纵坐标=鼠标坐标-方块上边距

    }

    function test2(event){//鼠标移动时方法

        var event=event || window.event;

        if(n==true){

            ////////鼠标移动范围

            inner.style.left=event.clientX-x+"px";

            inner.style.top=event.clientY-y+"px";

            ////////图片移动范围

            imgs.style.left=-4*parseInt(inner.style.left)+"px";

            imgs.style.top=-4*parseInt(inner.style.top)+"px";

            ////////////////////////////限定鼠标移动的范围

            if(parseInt(inner.style.left)<0){

                inner.style.left=0+"px";

            }

            if(parseInt(inner.style.top)<0){

                inner.style.top=0+"px";

            }

            if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth){

                inner.style.left=outer.clientWidth-inner.clientWidth+"px";

            }

            if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight){

                inner.style.top=outer.clientHeight-inner.clientHeight+"px";

            }

            //////////////////////////////限定图片移动的范围

            if(parseInt(imgs.style.left)>0){

                imgs.style.left=0+"px";

            }

            if(parseInt(imgs.style.top)>0){

                imgs.style.top=0+"px";

            }

            if(parseInt(imgs.style.left)<-4*(outer.clientWidth-inner.clientWidth)){

                imgs.style.left=-4*parseInt(outer.clientWidth-inner.clientWidth)+"px";

            }

            if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight)){

                imgs.style.top=-4*parseInt(outer.clientHeight-inner.clientHeight)+"px";

            }

        }

    }

    function test3(){//鼠标松开时方法

        n=false;

    }

</script>

</body>

</html>

为什么不能像淘宝那样辺移动图片辺局部放大？

...全文

184 6 打赏收藏举报

写回复

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

杨小事er 2016-02-14

打赏
举报

function getByClass(oParent, sClass)
{
	var aEle=oParent.getElementsByTagName('*');
	var aTmp=[];
	var i=0;
	
	for(i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aTmp.push(aEle[i]);
		}
	}
	
	return aTmp;
}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oMark=getByClass(oDiv, 'mark')[0];
	var oFloat=getByClass(oDiv, 'float_layer')[0];
	var oBig=getByClass(oDiv, 'big_pic')[0];
	var oSmall=getByClass(oDiv, 'small_pic')[0];
	var oImg=oBig.getElementsByTagName('img')[0];
	
	oMark.onmouseover=function ()
	{
		oFloat.style.display='block';
		oBig.style.display='block';
	};
	
	oMark.onmouseout=function ()
	{
		oFloat.style.display='none';
		oBig.style.display='none';
	};
	
	oMark.onmousemove=function (ev)
	{
		var oEvent=ev||event;
		
		var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
		var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
		
		if(l<0)
		{
			l=0;
		}
		else if(l>oMark.offsetWidth-oFloat.offsetWidth)
		{
			l=oMark.offsetWidth-oFloat.offsetWidth;
		}
		
		if(t<0)
		{
			t=0;
		}
		else if(t>oMark.offsetHeight-oFloat.offsetHeight)
		{
			t=oMark.offsetHeight-oFloat.offsetHeight;
		}
		
		oFloat.style.left=l+'px';
		oFloat.style.top=t+'px';
		
		var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
		var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
		
		oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
		oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
	};
};

全js 的

wudichaoren2011 2016-02-14

打赏
举报

不用JQ怎么写

吴钦飞 2015-09-23

打赏
举报

1.50x50.png

1.400x400.png

1.800x800.png

吴钦飞 2015-09-23

打赏
举报



/**

 * Created by forwardNow on 9/21/15.

 */



var preview = {

    options: {

        self: "#preview",

        zoomMain: ".zoom_main",

        zoomMainImg: ".img",

        zoomMainCursor: ".cursor",

        zoomDetail: ".zoom_detail",

        zoomDetailImg: ".img"

    },

    init: function () {

        this.render();

        this.bind();

        this.thumbnail.init();

    },

    render: function () {

        this.self = $( this.options.self );

        this.zoomMain = $( this.options.zoomMain, this.self );

        this.zoomMainImg = $( this.options.zoomMainImg, this.zoomMain );

        this.zoomMainCursor = $( this.options.zoomMainCursor, this.zoomMain );

        this.zoomDetail = $( this.options.zoomDetail, this.self );

        this.zoomDetailImg = $( this.options.zoomDetailImg, this.zoomDetail );

    },

    bind: function () {

        var self = this;

        var zoomMain = self.zoomMain;

        var zoomMainCursor = self.zoomMainCursor;

        var zoomMainImg = self.zoomMainImg;

        var zoomDetailImg = self.zoomDetailImg;

        var zoomMainDocPos = self.zoomMain.offset();

        zoomMain.mousemove( function ( e ) {

            var cursorWidth = zoomMainCursor.width(),

                cursorHeight = zoomMainCursor.height(),

                mouseOffsetPos = {

                    x: e.pageX - zoomMainDocPos.left,

                    y: e.pageY - zoomMainDocPos.top

                },

                cursorLeft,

                cursorTop;



            moveCursor();



            viewDetail();



            function viewDetail() {

                //console.info( zoomDetail, zoomDetailImg );

                zoomDetailImg.css( {

                    left: -cursorLeft / zoomMainImg.width() * zoomDetailImg.width(),

                    top: -cursorTop / zoomMainImg.height() * zoomDetailImg.height()

                } );

            }



            // 移动光标区域

            function moveCursor() {



                // 最大值

                if ( mouseOffsetPos.x + cursorWidth / 2 > zoomMain.width() ) {

                    cursorLeft = zoomMain.width() - cursorWidth;

                } else {

                    cursorLeft = mouseOffsetPos.x - cursorWidth / 2;

                }

                if ( mouseOffsetPos.y + cursorHeight / 2 > zoomMain.height() ) {

                    cursorTop = zoomMain.height() - cursorHeight;

                } else {

                    cursorTop = mouseOffsetPos.y - cursorHeight / 2;

                }

                // 最小值

                cursorLeft = cursorLeft > 0 ? cursorLeft : 0;

                cursorTop = cursorTop > 0 ? cursorTop : 0;

                //console.info( cursorLeft, cursorTop );

                zoomMainCursor.css( {

                    left: cursorLeft,

                    top: cursorTop

                } );

            }

        } ).mouseover( function () {

            self.zoomDetail.show();



        } ).mouseout( function () {

            self.zoomDetail.hide();

        } );

    }

};





preview.thumbnail = {

    options: {

        self: ".thumbnail",

        list: ".list",

        items: ".item",

        img: ".img",

        selecteditemClass: "item_selected"

    },

    init: function () {

        this.render();

        this.bind();

    },

    render: function () {

        this.self = $( this.options.self );

        this.list = $( this.options.list, this.self );

        this.items = $( this.options.items, this.self );

    },

    bind: function () {

        var self = this;

        // 点击缩略图，更换图片

        this.items.click( function () {



            var img = $( this ).find( self.options.img ),

                midImgSrc = img.attr( "data-mid-img" ),

                bigImgSrc = img.attr( "data-big-img" );

            preview.zoomMainImg.attr( "src", midImgSrc );

            preview.zoomDetailImg.attr( "src", bigImgSrc );

            self.items.removeClass( self.options.selecteditemClass );

            $( this ).addClass( self.options.selecteditemClass );

        } );

    }

};

$( function () {

    preview.init();





} );

[img=https://img-bbs.csdn.net/upload/201509/23/1443013848_200664.png]1.50x50.png[/img]
[img=https://img-bbs.csdn.net/upload/201509/23/1443013822_209758.png]1.400x400.png[/img]
[img=https://img-bbs.csdn.net/upload/201509/23/1443013846_678443.png]1.800x800.png[/img]

吴钦飞 2015-09-23

打赏
举报

最近，刚写了个放大镜的，你可以看一下，不过是用jQuery写的。


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>图片放大</title>
    <link rel="stylesheet" href="./css/main.css"/>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/main.js"></script>
</head>
<body>

    <div id="preview" class="preview">
        <div class="zoom_main">
            <img class="img" src="./images/1.400x400.png" alt=""/>
            <span class="cursor"></span>
            <i class="icon"></i>
        </div>
        <div class="thumbnail">
            <ul class="list">
                <li class="item item_selected">
                    <a class="item__wrap" href="javascript:void(0)">
                        <img class="img" src="./images/1.50x50.png"
                             data-mid-img="./images/1.400x400.png"
                             data-big-img="./images/1.800x800.png"alt=""/></a></li>
                <li class="item">
                    <a class="item__wrap" href="javascript:void(0)">
                        <img class="img" src="./images/2.50x50.png"
                             data-mid-img="./images/2.400x400.png"
                             data-big-img="./images/2.800x800.png"alt=""/></a></li>
                <li class="item">
                    <a class="item__wrap" href="javascript:void(0)">
                        <img class="img" src="./images/3.50x50.png"
                             data-mid-img="./images/3.400x400.png"
                             data-big-img="./images/3.800x800.png"alt=""/></a></li>
                <li class="item">
                    <a class="item__wrap" href="javascript:void(0)">
                        <img class="img" src="./images/4.50x50.png"
                             data-mid-img="./images/4.400x400.png"
                             data-big-img="./images/4.800x800.png"alt=""/></a></li>
                <li class="item">
                    <a class="item__wrap" href="javascript:void(0)">
                        <img class="img" src="./images/5.50x50.png"
                             data-mid-img="./images/5.400x400.png"
                             data-big-img="./images/5.800x800.png"alt=""/></a></li>
                <li class="item">
                    <a class="item__wrap" href="javascript:void(0)">
                        <img class="img" src="./images/6.50x50.png"
                             data-mid-img="./images/6.400x400.png"
                             data-big-img="./images/6.800x800.png"alt=""/></a></li>

            </ul>
        </div>
        <div class="zoom_detail">
            <img class="img" src="./images/1.800x800.png" alt=""/>
        </div>
    </div>

</body>
</html>


@charset "UTF-8";
/*===== 清除默认的margin的属性值 =====*/
body, dd, dl, form, p, pre, h1, h2, h3, h4, h5, h6 {
  margin: 0; }

/*===== 统一设置列表的margin和padding，以及列表表形式 =====*/
menu, ul, ol {
  list-style: none;
  margin: 0;
  padding: 0; }

/*===== 去除个别浏览器iframe底部的几个像素 =====*/
iframe {
  vertical-align: middle; }

/*===== 设置文本链接样式 =====*/
a {
  text-decoration: none; }

/*===== 设置标题样式 =====*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%; }

/*===== 去除个别浏览器图片底部的几个像素，以及设置图片形式链接无边框 =====*/
img {
  vertical-align: middle; }

a img {
  border: 0 none; }

/*===== 文本区域，与周边的元素对齐方式，resize为上下可拉动，避免左右拉动破坏页面布局 =====*/
textarea {
  overflow: auto;
  resize: vertical;
  vertical-align: text-bottom;
  *vertical-align: auto; }

/*===== 设置表格元素的样式，合并表格的间隙，去掉单元格之间的间距，合并单元格为细线表格 =====*/
/*   */
table {
  border-spacing: 0;
  border-collapse: collapse; }

td, th, caption {
  padding: 0; }

/**
 *  .demo{ @include center-block;  }
 */
/**
.opacity{
    @include opacity; //参数使用默认值
}
.opacity-80{
    @include opacity(80); //传递参数
}
*/
body {
  line-height: 1;
  font-size: 14px;
  background-color: #ffffff; }

/**
 *  图片预览：放大效果
 */
.preview {
  position: relative;
  width: 328px;
  margin: 100px 0 0 100px; }
  .preview .zoom_main {
    position: relative;
    width: 326px;
    height: 376px;
    overflow: hidden;
    border: solid 1px #cccccc; }
    .preview .zoom_main .img {
      vertical-align: middle; }
    .preview .zoom_main .cursor {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 163px;
      height: 188px;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURT1uzv///62t27cAAAACdFJOU/8A5bcwSgAAABBJREFUeNpiYGBkYGQECDAAAA0ABMZIs2EAAAAASUVORK5CYII=);
      cursor: move;
      z-index: 2; }
    .preview .zoom_main .icon {
      position: absolute;
      width: 22px;
      height: 22px;
      right: 0;
      bottom: 0;
      background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGQTY4NjVCNThGRDExRTU4ODY0QkNBQkUxODkwODg1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGQTY4NjVDNThGRDExRTU4ODY0QkNBQkUxODkwODg1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkZBNjg2NTk1OEZEMTFFNTg4NjRCQ0FCRTE4OTA4ODUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkZBNjg2NUE1OEZEMTFFNTg4NjRCQ0FCRTE4OTA4ODUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7mxatwAAABV0lEQVR42syUsYqDQBCGo56pQgQVJGARAqliE/ARBEs7wdbKIo9jZZVHMOWBjU+QKpVgJUgaQUkVUe8nC16IGu+SJlPNLrPfzsw/u1TTNJP3jJ68bZ+B+OpuoTuHw+F0OpEly7K2bYuiOISgHtqJk77vd+NWq5VpmgzDjCDa86qq6rpONvM83+/3l8tliPLbC4QGQQBHv1m7z3HcbrfjeT6O4+Px+KydSZKQq7bb7UMQbjYMA04YhtfrtR+BcqIogrNer3sLliQJiVRVVRTFiKiI6xefpheLRVmW44gsy3oRdV2naQqB5/N5P4KiKJQAB+Ug2y7ifD6DjhoHETBZlmezWW/bAcWwwVEUZTqdDiIgnqZpcL5vdi+267qkQJLpi9PZGkYGg/cM0X0jMMuyBEEgM9qlUH//ctARz/NIRfeUfzx2yOE4zmazgbTL5fKVLD771/oRYAAxqqyBwYWNEAAAAABJRU5ErkJggg==);
      opacity: 0.8; }
    .preview .zoom_main:hover .icon {
      display: none; }
    .preview .zoom_main:hover .cursor {
      display: block; }
  .preview .thumbnail .list {
    margin-top: 15px;
    width: 352px;
    height: 74px;
    overflow: hidden; }
    .preview .thumbnail .list .item {
      display: inline;
      float: left;
      margin-right: 24px;
      width: 62px;
      height: 72px;
      border: 1px solid #cccccc; }
    .preview .thumbnail .list .item:hover,
    .preview .thumbnail .list .item_selected {
      border-color: #db2c35; }
    .preview .thumbnail .list .item__wrap {
      width: 62px;
      height: 72px;
      display: table-cell;
      vertical-align: middle;
      text-align: center; }
    .preview .thumbnail .list .img {
      max-width: 62px;
      max-height: 72px;
      vertical-align: middle; }
  .preview .zoom_detail {
    display: none;
    position: absolute;
    left: 338px;
    top: -1px;
    width: 326px;
    height: 376px;
    border: 1px solid #eeeeee;
    overflow: hidden;
    text-align: center;
    z-index: 99; }
    .preview .zoom_detail .img {
      position: absolute; }

/*# sourceMappingURL=main.css.map */

wudichaoren2011 2015-09-23

打赏
举报

为什么