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. 004_Python的列表切片,增删改查,常用操作方法,元组,range,join

    列表 列表是Python中的基础数据类型之一,它是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = ['kevin',123,True,(1,2,3,'wusir'), ...

  2. 【漫画】JAVA并发编程 J.U.C Lock包之ReentrantLock互斥锁

    在如何解决原子性问题的最后,我们卖了个关子,互斥锁不仅仅只有synchronized关键字,还可以用什么来实现呢? J.U.C包中还提供了一个叫做Locks的包,我好歹英语过了四级,听名字我就能马上大 ...

  3. 简述异步编程&Promise&异步函数

    前言:文章由本人在学习之余总结巩固思路,不足之前还请指出. 一.异步编程 首先我们先简单来回顾一下同步API和异步API的概念 1.同步API:只有当前的API执行完成之前,才会执行下一个API 例: ...

  4. JS的数据类型判断函数、数组对象结构处理、日期转换函数，浏览器类型判断函数合集

    工具地址:https://github.com/BothEyes1993/bes-jstools bes-jstools 100多个基础常用JS函数和各种数据转换处理集合大全,此工具包是在 outil ...

  5. Spring全家桶之springMVC（二）

    spring mvc中url-pattern的写法 1.设置url-pattern为*.do 之前我们在web.xml文件中配置DispatcherServlet的时候,将url-pattern配置为 ...

  6. ES6新增API

    1.Object.assign(a,b,c) a.b均为对象,意思是把b对象的属性添加到a上面去.如果a中已经定义了某个属性,b也定义了的话就会覆盖a的,就是后面覆盖前面的,后面生命的有效.是 一种浅 ...

  7. Postman学习之Postman简介

    前言:对于测试人员来说,接口测试是必须掌握的一个技能:在工作中掌握了接口自动化测试无疑是如虎添翼,那么怎么开展接口测试呢?下面将介绍一款接口测试的神器——postman 1.postman背景介绍 p ...

  8. 总结hashMap和hashtable

     在这里帮大家总结一下hashMap和hashtable方面的知识点吧: 1.  关于HashMap的一些说法:  a)  HashMap实际上是一个“链表散列”的数据结构,即数组和链表的结合体.Ha ...

  9. SVN:TortoiseSVN SendRpt.exe not found 完美解决

    今天来上班的时候,发现公司用的svn版本和我自己的不一致,其实可以使用但是还是神经质的更新了一下.结果每次右键都会出一个异常.下图所示. 期初以为是哪里配置错误,或者版本冲突,经过网上查找办法,完美解 ...

  10. 模板：JSP公共内容

    page页面标签指令 <%@ page %> taglib标准标签指令 <%@ taglib %> 标签内基本属性 language="设置JSP页面使用的语言&qu ...