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. clang8.0及以上编译rocks问题

    升级了MacOS 10.15 Beta版,结果编译 CockroachDB 遇到了问题. [ %] Building CXX object CMakeFiles/rocksdb.dir/db/buil ...

  2. 武装你的WEBAPI-OData便捷查询

    本文属于OData系列 目录(可能会有后续修改) 武装你的WEBAPI-OData入门 武装你的WEBAPI-OData便捷查询 武装你的WEBAPI-OData分页查询 武装你的WEBAPI-ODa ...

  3. [codeforces 200 A Cinema]暴力，优化

    题意大致是这样的:有一个有n行.每行m个格子的矩形,每次往指定格子里填石子,如果指定格子里已经填过了,则找到与其曼哈顿距离最小的格子,然后填进去,有多个的时候依次按x.y从小到大排序然后取最小的.输出 ...

  4. vue 下拉刷新实现

    [手动实现下拉刷新]可以用vue-pull-refash 插件代替 //下拉刷新 let scroll = this.$ref.scroll // 获取当前要拖拽的元素 let top = scrol ...

  5. TP5整合的阿里云短信接口

    现阶段,短信的应用主要就是用来验证下手机号是不是正常的手机号.只要涉及到用户手机号的问题的时候,都会做短信验证码来验证下改手机号是否是正常手机号.接下来就是操作步骤. 首先要在阿里云账号上开通短信功能 ...

  6. Gradle 多环境URL请求设置

    在开发过程中,多环境配置是经常遇到的,比如在Android开发过程中,在不同环境上请求服务器的URL是不同的,使用Gradle进行管理,是非常方便的. 首先查看工程目录结构: 使用AndroidStu ...

  7. 浅谈HTTP和HTTPS

    HTTP和HTTPS协议 网络协议:计算机之间为了实现网络通信而达成的一种“约定”或“规则”,有了这种“约定”,不同厂商的生产设备,以及不同不同操作系统组成的计算机之间,就可以实现通信. HTTP(H ...

  8. 点双连通分量F. Simple Cycles Edges

    F. Simple Cycles Edges time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  9. 【Java_SSM】（二）使用eclipse创建一个Maven web工程

    这篇博文我们介绍一下如何利用eclipse创件一个maven web工程. (1)File--New--Other--Maven--Maven project 此处我们快速创建一个maven工程 点击 ...

  10. ShoneSharp语言(S#)软件更新13.7版

    ShoneSharp语言(S#)编辑解析运行器 软件更新13.7版 作者:Shone 近期在写博客过程中对S#进行增强,把语法规则更新到2.0版,并同步更新软件到ShoneSharp.13.7.exe ...