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. Centos7下tomcat关闭异常问题

    目录 出错原因 解决方法 出错原因 ​ 在阿里云服务器上买的轻量级应用服务器,装上了tomcat,访问tomcat自带的首页,8080端口,第一次启动成功了,关闭也正常,但在服务器重启后,或者第二次启 ...

  2. 在web中使用shiro（会话管理，登出，shiro标签库的使用）

    在shiro的主配置文件中配置,登出的请求经过的过滤器就可以了,在shiro的过滤器中有一个名称为logout的过滤 器专门为我们处理登出请求: 一.shiro会话管理器 shiro中也提供了类似于w ...

  3. java读源码之 Queue（ArrayDeque，附图，希望能一起交流）

    除了并发应用(并发包下的代码我之后会专门写),Queue在JavaSE5中仅有的两个实现是LinkedList和PriorityQueue,它们的差异在于排序行为而不是性能.1.6时新增了一个实现Ar ...

  4. u-boot: Not enough room for program headers, try linking with -N

    在编译u-boot的时候出现了以下错误: arm-linux-gnueabi-ld.bfd: u-boot: Not enough room for program headers, try link ...

  5. 三分钟快速搭建分布式高可用的Redis集群

    这里的Redis集群指的是Redis Cluster,它是Redis在3.0版本正式推出的专用集群方案,有效地解决了Redis分布式方面的需求.当单机内存.并发.流量等遇到瓶颈的时候,可以采用这种Re ...

  6. YOLOV4所用到的一些tricks

    原文链接:http://arxiv.org/abs/2004.10934 整体框架        Bag of Freebies(BoF) & Bag  of Specials (BoS) B ...

  7. search（12）- elastic4s-聚合=桶+度量

    这篇我们介绍一下ES的聚合功能(aggregation).聚合是把索引数据可视化处理成可读有用数据的主要工具.聚合由bucket桶和metrics度量两部分组成. 所谓bucket就是SQL的GROU ...

  8. 在dynamics 365 中，看字段的描述需要到系统字段设置里面才能看到，这里提供一种sql直接看字段和实体名描述的方法

    1.在crm对应的主数据库执行下面存储过程: -- ============================================= -- Author: <Author,,Name& ...

  9. Selenium + Python + Chrome 自动化测试 环境搭建

    一.下载Python 相关的教程很多,此处不详细记录了,下面是官网下载地址: https://www.python.org/downloads/ 我使用的python版本为 Python 3.6.1 ...

  10. python3.x 基础三：文件IO

    打开文件的两种方式 1.直接打开文件并赋值给变量,打开后得到操作句柄,但不会自动关闭 file = open('文件名‘,'打开模式',’编码‘) fd = open('../config/file1 ...