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. 003_python的str切片,str常用操作方法,for循环,集合,深浅copy

    基础数据类型 基础数据类型,有7种类型,存在即合理. 1.int 整数 主要是做运算的 .比如加减乘除,幂,取余  + - * / ** %... 2.bool布尔值 判断真假以及作为条件变量 3.s ...

  2. k-modes聚类算法

    为什么要用k-modes算法 k-means算法是一种简单且实用的聚类算法,但是传统的k-means算法只适用于连续属性的数据集(数值型数据),而对于离散属性的数据集,计算簇的均值以及点之间的欧式距离 ...

  3. Neo4j填坑记录-Neo4jClient建立节点、建立关系相关

    最近一个项目需要用到知识图谱,选用了neo4j图数据库,在这过程中遇到几个坑,记录一下 1.无法登录,疯狂提示“WebSocket connection failure. Due to securit ...

  4. [hdu5323]复杂度计算，dfs

    题意:求最小的线段树的右端点(根节点表示区间[0,n]),使得给定的区间[L,R]是线段树的某个节点. 数据范围:L,R<=1e9,L/(R-L+1)<=2015 思路:首先从答案出发来判 ...

  5. [hdu3631]背包或中途相遇法

    暴力的背包: #pragma comment(linker, "/STACK:10240000,10240000") #include <iostream> #incl ...

  6. Rabbit的字符串 字符串最小表示法

    Rabbit的字符串 #include<bits/stdc++.h> using namespace std; ; char s[maxn]; int get_min_pos() { , ...

  7. 04 返回静态文件的函数web框架

    04 返回静态文件的函数web框架 服务器server端python程序(函数版): import socket server = socket.socket() server.bind((" ...

  8. BitArray虽好，但请不要滥用，又一次线上内存暴增排查

    一:背景 1. 讲故事 前天写了一篇大内存排查在园子里挺火,这是做自媒体最开心的事拉,干脆再来一篇满足大家胃口,上个月我写了一篇博客提到过使用bitmap对原来的List<CustomerID& ...

  9. Nginx 实现 HTTPS（基于 Let's Encrypt 的免费证书）

    SSL / TLS加密会为您的用户带来更高的搜索排名和更好的安全性. Let’s Encrypt 是一个认证机构(CA).它可以提供免费证书,并且已经被大多数浏览器所信任.另外,通过工具 Certbo ...

  10. 蒲公英 · JELLY技术周刊 Vol.08 -- 技术周刊 · npm install -g typescript@3.9.3

    登高远眺 沧海拾遗,积跬步以至千里 基础技术 官宣: Typescript 3.9 正式发布 TypeScript 3.9 正式发布,这个版本主要聚焦于性能.改进某些特性和提升稳定性.编译器效率在这一 ...