实现效果

实现代码:

<!DOCTYPE html>

<html>

<head>

	<title>购物图片放大</title>

	<meta charset="utf-8">

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.box{

			width: 200px;

			height: 200px;

			margin: 100px;

			border: 1px solid #ccc;

			position: relative;

		}

		.big{

			width: 400px;

			height: 400px;

			position: absolute;

			top: 0;

			left: 360px;

			border: 1px solid #ccc;

			overflow: hidden;

			display: none;

		}

		.mask{

			width: 80px;

			height: 80px;

			background-color: rgba(3,12,60,0.4);

			position: absolute;

			top: 0;

			left: 0;

			cursor: move;

			display: none;

		}

		.small{

			position: relative;

		}

		.small img{

			width: 200px;

			height: 200px;

		}

		.big img{

			height: 1000px;

			width: 1000px;

		}

		img{

			vertical-align: top;

		}

	</style>

</head>

<body>

<!-- 大图片宽度/big框宽度 = small框宽度/mask框宽度，并且小照片宽度 = small框宽度，如BigImg = 1000， SmallImg = small = 200，big=400，那么mask = 80 -->

<div class="box">

	<div class="small">

		<img src="./resident.jpg" alt="small Image">

		<div class="mask"></div>

	</div>

	<div class="big">

		<img src="./resident.jpg" alt="Big Image">

	</div>

</div>

<script type="text/javascript">

	window.onload = function(){

		// 鼠标放到小盒子上时，大盒子图片同等比例移动

		//技术点：onmouseenter==onmouseover 第一个不冒泡

        //技术点：onmouseleave==onmouseout  第一个不冒泡

        //步骤：

        //1.鼠标放上去显示盒子，移开隐藏盒子

        //2.mask跟随移动

        //3.右侧的大图片，等比例移动

        var box = document.getElementsByClassName("box")[0];

        var small = box.firstElementChild || box.firstChild;

        var big = box.children[1];

        var mask = small.children[1];

        var bigImg = big.children[0];

        // 1.鼠标放上去显示盒子，移开隐藏盒子（为小盒子绑定事件）

        // 调用封装好的方法，显示元素

        small.onmouseenter = function(){

        	show(mask);

        	show(big);

        }

        // 调用封装好的方法，隐藏元素

        small.onmouseleave = function(){

        	hide(mask);

        	hide(big);

        }

        // 2. mask跟随鼠标移动

        // 绑定事件是onmousemove，事件源是small，只要在小盒子上移动1px，mask也要跟随移动

        small.onmousemove = function(event){

        	// 想移动mask，需要知道鼠标在small中的位置，x作为mask的left值，y作为mask的top值

        	event = event || window.event;

        	// 获取鼠标在整个页面的位置

        	var pagex = event.pageX || scroll().left + event.clientX;

        	var pagey = event.pageY || scroll().top + event.clientY;

        	// 让鼠标在mask的最中间，减去mask宽高的一半，x、y为mask的坐标

        	// console.log(pagex + " " + pagey);

        	var x = pagex - box.offsetLeft - mask.offsetWidth/2;

        	var y = pagey - box.offsetTop - mask.offsetHeight/2;

        	// 限制mask的范围，left取值大于0，小于小盒子的宽减mask的宽

        	if(x<0){

        		x = 0;

        	}

        	if(x>small.offsetWidth - mask.offsetWidth){

        		x = small.offsetWidth - mask.offsetWidth;

        	}

        	if(y<0){

        		y = 0;

        	}

        	if(y>small.offsetHeight - mask.offsetHeight){

        		y = small.offsetHeight - mask.offsetHeight;

        	}

        	// 移动mask

        	// console.log("x:" + x + " y:" + y);

        	mask.style.left = x + "px";

        	mask.style.top = y + "px";

        	//3.右侧的大图片，等比例移动

            // 大图片/大盒子 = 小图片/mask盒子

            // 大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-mask）

            //比例var times = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);

            //大图片走的距离/mask盒子走的距离 = 大图片/小图片

            var times = bigImg.offsetWidth/small.offsetWidth;

            var _x = x * times;

            var _y = y * times;

            bigImg.style.marginLeft = -_x + "px";

            bigImg.style.marginTop = -_y + "px";

        }

	}

	// 显示隐藏元素

    function show(element){

    	element.style.display = "block";

    }

    function hide(element){

    	element.style.display = "none";

    }

</script>

</body>

</html>

　　

【前端】特效-Javascript实现购物页面图片放大效果的更多相关文章

  1. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. 为BlueLake主题增加图片放大效果

    fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...

  3. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  4. magento中如何实现产品图片放大效果

    Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...

  5. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  6. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  7. jQuery实现网站图片放大效果

    实现效果:当鼠标指向商品图片时,图片会自动放大. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  8. [原创]实现android知乎、一览等的开场动画图片放大效果

    代码下载地址: https://github.com/Carbs0126/AutoZoomInImageView 知乎等app的开场动画为:一张图片被显示到屏幕的正中央,并充满整个屏幕,过一小段时间后 ...

  9. iOSUITableView头部带有图片并且下拉图片放大效果

    最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图: 1.gif 实现原理很简单,就是在UITableview上边添加一个图片子视图,在ta ...

随机推荐

  1. java框架---->zxing框架的使用

    今天我们就来学习一下zxing的用法,这里只涉及到java se的部分. zxing的学习 如果在java se环境中使用zxing,需要在maven的pom.xml中添加依赖: <depend ...

  2. LeetCode——Happy Number

    Description: Write an algorithm to determine if a number is "happy". A happy number is a n ...

  3. api静态化预案

    1.之前听到api静态化预案,一直以为是前端发送api请求,如果api请求失败,则再次发送一条请求,去请求备份的静态资源. 2.前两天了解到的api静态化预案是这样的:在请求api时,给api请求加上 ...

  4. deferred对象（摘自别人的文章）

    对jQuery中的deferred对象的整体认识: Deferred是个工厂类,返回的是内部构建的deferred对象 tuples 创建三个$.Callbacks对象,分别表示成功,失败,处理中三种 ...

  5. Chrome浏览器下CSS字体大小设置小于12px无效问题

    当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body {     -webkit-text-size-adjus ...

  6. thinkphp发起网络请求

    常规做法使用CURL方法: private function http_request($url,$data = null,$headers=array()){ $curl = curl_init() ...

  7. 310实验室OTL问题----将写好的C++文件转换成Python文件，并将数据可视化

    如图:文件夹 第一处:optimizer文件夹下的:optimizer.h文件中添加你所写代码的头文件  #include <OTL/Optimizer/Reference-NSGA-II/Re ...

  8. asp.net mvc(一) ----------简单封装成通用的List<T>集合

    asp.net mvc(一) 这些天开始学习asp.net mvc,用传统的asp.net已经快四的年了,刚开始接触asp.net mvc确认感觉有点不适应,主要体现在asp.net mvc的实现上. ...

  9. 洛谷P2444 病毒【AC自动机】

    题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...

  10. Mongo Rocks 在SSD盘上表现优秀,专门为SSD盘的优化

    2017 · MongoDB深圳用户组大会全记录 | MongoDB中文社区http://www.mongoing.com/2017/04/24/mongodb-shenzhen-user-group ...