JavaScript实现图片放大镜效果、我犯了CSS、面向百度编程

最新推荐文章于 2024-07-12 21:49:18 发布

赵大土

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/weixin_43647393/article/details/97174986

版权

今日不幸运?

错误放大镜?
CSS你爱谁?
面向百度编程?
Today，bad day?

错误放大镜?

今天老师让模拟一个淘宝图片放大镜的效果
放大镜效果
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>放大镜效果</title>
		
		<script>
			function bigshow(obj,ad){
				//1.获取大图地址
				var bigId =document.getElementById('big');
				 
				//2.获取小图输入
				bigId.src='img/'+ad+'.jpg';
				
				//3.设置边框
				obj.style.outline="1px solid gray";
			}
			
			//移除边框
			function outborder(obj){
				obj.style.outline="none";
			}
		</script>
		
	</head>
	<body>
		<table>
			<tr>
				<td colspan="5">
					<img src="img/ysl_big_02.jpg"  id="big" />
				</td>
			</tr>
			<tr>
				<td>
					<img src="img/ysl_small_01.jpg" onmouseout="outborder(this)" onmouseover="bigshow(this,'ysl_big_01')"/>
				</td>
				<td>
					<img src="img/ysl_small_02.jpg" onmouseout="outborder(this)" onmouseover="bigshow(this,'ysl_big_02')"/>
				</td>
				<td>
					<img src="img/ysl_small_03.jpg" onmouseout="outborder(this)" onmouseover="bigshow(this,'ysl_big_03')"/>
				</td>
				<td>
					<img src="img/ysl_small_04.jpg" onmouseout="outborder(this)" onmouseover="bigshow(this,'ysl_big_04')"/>
				</td>
				<td>
					<img src="img/ysl_small_05.jpg" onmouseout="outborder(this)" onmouseover="bigshow(this,'ysl_big_05')"/>
				</td>
			</tr>
		</table>
	</body>
</html>

这个实现起来本身不能，却偏偏让我花费了半个多小时，原因就在于当时我把大图的id设定到了大图img所属的td标签了，而非img标签，这个错误用昨天的方法根本无法发现，所以就看代码查找，只谓是当局者迷啊，竟然一直没发现犯了这样的低级错误?

CSS你爱谁?

本以为今天的错误就已经过去了，结果在下午的时候练习CSS的选择器时又犯了?，虽然这次debug花的时间少一些（我居然把CSS的注释弄成了//，真是无fuck说? ），但真的是?

面向百度编程?

今晚一时兴起，准备模仿百度搜索页面，自己动手写一个，结果用了接近两个小时，才弄成了下图这个样子，而且代码简直无法直视? 百度一下
你看看

Today，bad day?

因为缺了一周的课，所以最近只要有时间我都在补缺掉的html和css，感觉css和html的属性太多（可能是因为初学而且时间紧迫），自己的思路一片混乱，没有体系结构，所以很多都记不住，但我喜欢做课后的项目练习，而且想一口气做完，但明天下午就要测试了，试题还没有回顾，今晚的时间基本已经没有了，而且今晚网络还有问题，写blog图片一张传不上，看来每日blog今天得中断，明日再发了