javascript基础练习-大图跟随鼠标移动展示

最新推荐文章于 2024-06-03 13:46:57 发布

wz前端初学者

最新推荐文章于 2024-06-03 13:46:57 发布

阅读量408

点赞数

分类专栏： javascript小练习文章标签： javascript 移动跟随鼠标

本文链接：https://blog.csdn.net/wz13759497175/article/details/79233149

版权

javascript小练习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

效果图如下:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			text-align: center;
		}
		div img{
			width: 200px;
			height: 200px;
			margin-right: 20px;
			cursor: pointer;
		}
		.bigBox{
			width: 400px;
			height: 400px;
			position: absolute;
			display: none;
		}
		.bigBox img{
			width: 100%;
			height: 100%;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			function get(){
				if(arguments.length==1){
					return document.getElementById(arguments[0]);
				}else{
					return arguments[0].getElementsByTagName(arguments[1]);
				}
			}
			var box=get(document,"div")[0],
				imgs=get(box,"img"),
				bigBox=get("bigBox"),
				i=0;
			
			for(i=0;i<imgs.length;i++){
				//鼠标移到相应的图片触发
				imgs[i].οnmοuseοver=function(){
					var big=document.createElement("img");
					var big=new Image();
					big.src=this.src;
					bigBox.appendChild(big);
					bigBox.style.display="block";
					this.style.opacity="0.6";
				};
				//鼠标移动,改变坐标,这里大图的坐标相比鼠标的坐标要偏移20像素,如果大图坐标直接与鼠标坐标相等,很容易重复触发onmouseover事件,从而不断的添加big节点
				imgs[i].οnmοusemοve=function(event){
					var event=event || window.event;
					marginRight=box.offsetWidth-event.clientX-20;
					//当大图到达浏览器窗口右边界时改为左侧显示
					bigBox.style.left=bigBox.offsetWidth>marginRight?event.clientX-20-bigBox.offsetWidth+"px":event.clientX+20+"px";
					bigBox.style.top=event.clientY+20+"px";
				};
				//鼠标移出,清除大图节点
				imgs[i].οnmοuseοut=function(){
					bigBox.style.display="none";
					bigBox.removeChild(bigBox.lastChild);
					this.style.opacity="";
				};
			}
		};
	</script>
</head>
<body>
	<div>
		<img src="../images/1.jpg">
		<img src="../images/2.jpg">
		<img src="../images/3.jpg">
		<img src="../images/4.jpg">
	</div>
	<div class="bigBox" id="bigBox"></div>
</body>
</html>

wz前端初学者

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript基础练习-大图跟随鼠标移动展示

效果图如下: *{ margin: 0; padding: 0; } div{ text-align: center; } div img{ width: 200px; height: 200px; margin-right: 20px; cursor: pointer; } .bigBox{
复制链接

扫一扫