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

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>



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





...全文
220 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
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怎么写
forwardNow 2015-09-23
  • 打赏
  • 举报
回复
1.50x50.png 1.400x400.png 1.800x800.png
forwardNow 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]

forwardNow 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
  • 打赏
  • 举报
回复
为什么

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧