1.onclick点击小图可以切换图片

2.onmouseover显示黄色div与放大图片的div

3.onmouseout，2的内容消失

4.onmousemove黄色div跟随鼠标移到，但是不能超出图片范围，放大图片的部位与黄色div的位置有关联

代码实现：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>京东商品</title>

		<style>

			#all{

				position: relative;

				margin-left: 200px;

			}

			.little{

				float: left;

				margin: 10px;

				color: transparent;

			}

			#main{

				position: relative;

				width: 350px;

				height: 350px;

				background-image: url(img/pics/img1-1.jpg);

			}

			#movediv{

				position: absolute;

				width: 160px;

				height: 160px;

				background-color: yellow;

				opacity: 0.5;

			}

			#big{

				width: 500px;

				height: 500px;

				position: absolute;

				left: 400px;

				top: 10px;

				display: none;

				background-image: url(img/pics/img1-1-1.jpg);

				background-repeat: no-repeat;

			}

		</style>

	</head>

	<body>

		<div id="all">

		<div id="main">

			<div id="movediv"></div>

		</div>

		<div>

			<div class="little"><img src="img/pics/img1.jpg" /></div>

			<div class="little"><img src="img/pics/img2.jpg" /></div>

			<div class="little"><img src="img/pics/img3.jpg" /></div>

			<div class="little"><img src="img/pics/img4.jpg" /></div>

			<div class="little"><img src="img/pics/img5.jpg" /></div>

		</div>

		<div id="big">

		</div>

		</div>

		<script>

//			console.log(parseInt("123adc"));

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

			var littles=document.getElementsByClassName("little");

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

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

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

			for(let i=0;i<littles.length;i++){

				littles[i].setAttribute("onclick","changeMain(this)");

			}

			function changeMain(obj){

				var index=null;

				for(var i=0;i<littles.length;i++){

					if(littles[i]==obj){

						index=i+1;;

					}

				}

				console.log(index);

				main.style.backgroundImage="url(img/pics/img"+index+"-1.jpg)";

				big.style.backgroundImage="url(img/pics/img"+index+"-1-1.jpg)";

			}

			main.onmousemove=function(event){

				movediv.style.display="block";

				big.style.display="block";

				movediv.style.top=event.clientY-movediv.offsetHeight*0.5-all.offsetTop+"px";

				if(event.clientY>=main.offsetHeight-movediv.offsetHeight*0.5+all.offsetTop){

					movediv.style.top=main.offsetHeight-movediv.offsetHeight+"px";

				}

				if(event.clientY<=movediv.offsetHeight*0.5+all.offsetTop){

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

				}

				movediv.style.left=event.clientX-movediv.offsetWidth*0.5-all.offsetLeft+"px";

				if(event.clientX<=movediv.offsetWidth*0.5+200){

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

				}

				if(event.clientX>=main.offsetWidth-movediv.offsetWidth*0.5+all.offsetLeft){

					movediv.style.left=main.offsetWidth-movediv.offsetWidth+"px";

				}

				big.style.backgroundPositionX=-parseInt(movediv.style.left)*8/5+"px";

				big.style.backgroundPositionY=-parseInt(movediv.style.top)*8/5+"px";

			}

			main.onmouseout=function(){

				movediv.style.display="none";

				big.style.display="none";

			}

		</script>

	</body>

</html>

【javascript】京东商品浏览放大镜效果的更多相关文章

  1. JavaScript实现的网页放大镜效果

    今天在观看视频学习的时候,学到了一个小技巧.就拿过来与大家进行分享一下啦. 实现的原理 分析需求:需要两张图,一大一小.然后根据鼠标的动作显示出不同的区域块的图像. 核心:鼠标事件的获取和处理.图片显 ...

  2. 用JavaScript中jQuery编写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js 实现商品放大镜效果

    知识点,需熟悉下面属性及含义: offsetLeft           //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop           //获取元素相对顶部的距离 ...

  4. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

  5. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  6. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  7. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

  8. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

随机推荐

  1. 基于mykernel 2.0编写一个操作系统内核

    一.配置mykernel 2.0,熟悉Linux内核的编译 1.实验环境:VMware 15 Pro,Ubuntu 18.04.4 2.配置环境 1)在电脑上先下载好以下两个文件,之后通过共享文件夹, ...

  2. JDK/Java 14 发布

    3 月 17 日,JDK/Java 14 正式 GA. 此版本包含的 JEP(Java/JDK Enhancement Proposals,JDK 增强提案)比 Java 12 和 13 加起来的还要 ...

  3. 重要的serialVersionUID

    所有序列化的DO都需要加上 serialVersionUID 否则未来可能就有一个坑在等着你 当你需要修改序列化的实体累的时候 之前缓存内容反序列化就会失败,如果这个缓存很多个地方都在存取 使用 那么 ...

  4. 小姐姐教你定制一个Logstash Java Filter

    Logstash是用来收集数据,解析处理数据,最终输出数据到存储组件的处理引擎.数据处理流程为: Logstash Java Filter 就是基于Logstash的Filter扩展API开发一个用J ...

  5. 题解 洛谷P2959 【[USACO09OCT]悠闲漫步The Leisurely Stroll】

    原题:洛谷P2959 不得不说这道题的图有点吓人,但实际上很多都没有用 通过题上说的“三岔路口”(对于每一个节点有三条连接,其中一条连接父节点,另外两条连接子节点)和数据,可以那些乱七八糟的路和牧场看 ...

  6. app测试、web测试-怎么测？

    app测试 前言 看过许多大神对APP测试的理解,博主总结了一下我们平时测试APP应该注意的一些测试点并结合大神的理解,总结出这篇文章. 一.测试周期 测试周期一般为两周,根据项目情况以及版本质量可适 ...

  7. c#word文档输出

    在工作中有时需要把内容用word文档展示出来 在写代码前要引用word的dll Microsoft.Office.Interop.Word“ sing System; using System.Col ...

  8. mysql 5.7.22安装

    1.解压目录. 2.安装 3.重新设置密码 set password=password('123456'); FLUSH PRIVILEGES;

  9. RN概述

    一.RN概述 中文网:http://reactnative.cn/ ReactNative:使用JS语法编写移动APP应用,RN会把JS转换为底层Java或OC, 最终运行于手机-------完全不依 ...

  10. java新学者（二）

    一.构造方法的特点 创建新的对象 A a =new A (); 二.抽象类和抽象方法的特点是什么? .抽象类使用abstract修饰: .抽象类不能实例化,即不能使用new关键字来实例化对象: .含有 ...