2022.6.24日志

最新推荐文章于 2023-04-14 21:57:05 发布

m0_71811747

最新推荐文章于 2023-04-14 21:57:05 发布

阅读量65

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_71811747/article/details/125449096

版权

一.今日知识点

1.jQuery click（）方法：当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

案例：鼠标点击加上边框，点击下一个边框取消

<script type="text/javascript">
        $(function(){
            $(".an").click(function(){            
                $(this).addClass("cl").siblings().removeClass("cl");
            });
        });
    </script>

2.图片放大镜插件jQueryMagnifier

实现一个图片放大镜的效果，可应用于商品图片页等对图片细节要求高的地方，使用 jQuery 插件 magnifier 可以简单的实现一个图片放大镜的功能。

3.重载

重载，简单说，就是函数或者方法有相同的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。

1、方法参数个数不同可以重载
　　2、方法参数类型不同可以重载
　　3、方法参数顺序不同可以重载
　　4、重载与变量名无关，不能重载
　　5、重载与返回值类型无关，不能重载

方法重载的实际意义：
方法重载的实际意义在于调用者只需要记住一个方法名就可以调用各种不同的版本，来实现各种不同的功能。

什么时候需要使用重载？
1、构造方法必须使用重载
2、其次如果成员方法功能类似

4.重载与重写的区别

1.重写(Override)
从字面上看，重写就是重新写一遍的意思。其实就是在子类中把父类本身有的方法重新写一遍。子类继承了父类原有的方法，但有时子类并不想原封不动的继承父类中的某个方法，所以在方法名，参数列表，返回类型(除过子类中方法的返回值是父类中方法返回值的子类时)都相同的情况下，对方法体进行修改或重写，这就是重写。但要注意子类函数的访问修饰权限不能少于父类的。

重写总结：
1.发生在父类与子类之间
2.方法名，参数列表，返回类型（除过子类中方法的返回类型是父类中返回类型的子类）必须相同
3.访问修饰符的限制一定要大于被重写方法的访问修饰符（public>protected>default>private)
4.重写方法一定不能抛出新的检查异常或者比被重写方法申明更加宽泛的检查型异常

2.重载(Overload)
在一个类中，同名的方法如果有不同的参数列表（参数类型不同、参数个数不同甚至是参数顺序不同）则视为重载。同时，重载对返回类型没有要求，可以相同也可以不同，但不能通过返回类型是否相同来判断重载。

重载总结：
1.重载Overload是一个类中多态性的一种表现
2.重载要求同名方法的参数列表不同(参数类型，参数个数甚至是参数顺序)
3.重载的时候，返回值类型可以相同也可以不相同。无法以返回型别作为重载函数的区分标准

二、今日作业

左边部分

<div class="left">
						<div class="magnifier" id="magnifier1">
							<div class="magnifier-container">
								<div class="images-cover"></div>
								<div class="move-view"></div>
								</div>
								<div class="magnifier-assembly">
									<div class="magnifier-btn">
										<span class="magnifier-btn-left">&lt;</span>
										<span class="magnifier-btn-right">&gt;</span>
									</div>
									<div class="magnifier-line">
										<ul class="clearfix animation03">
											<li>
												<div class="small-img">
													<img src="img/cake1_s1.jpg" />
												</div>
											<li>
												<div class="small-img">
													<img src="img/cake1_s2.jpg" />
												</div>
											<li>
												<div class="small-img">
													<img src="img/cake1_s3.jpg" />
												</div>
											<li>
												<div class="small-img">
													<img src="img/cake1_s4.jpg" />
												</div>
										</ul>
									</div>
								</div>
							
							<div class="magnifier-view"></div>
						</div>
						</div>

css样式

.cl {
	border: 1px solid red;
	/* background-color: red; */
	}
.left{
	float: left;
	align-items: center;
	margin-left: 200px;
	margin-top: 50px;
}
/* 垂直居中 */
.small-img{
	display: flex;
	align-items:center;
	justify-content: center;
	margin-left: 20px;
}
.small-img img{
	width: 60px;
}
.clearfix:before,
.clearfix:after{
  display: table;
  line-height: 0;
  content: "";
}
.magnifier{
	position: relative;
}
.magnifier-container{
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
	border: 1px solid #ddd;
}
.move-view{
	width: 100px;
	height: 100px;
	position: absolute;
	background-image: url(../img/move-box.png);
}
.images-cover{
	height: 100%;
	width: 100%;
	position: relative;
}
.images-cover img{
	width: 100%;
	position: absolute;
}
.magnifier-assembly{
	height: 92px;
	overflow: hidden;
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
}
.magnifier-btn{
	position: absolute;
	font-family: "宋体";
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -40px;
}
.magnifier-btn span{
	line-height: 60px;
	height: 60px;
	width: 10px;
	background-color: #6e6e6e;
	color: #fff;
	display: block;
	z-index: 9998;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	border-radius: 3px;
	margin-top: 20px;
}
.magnifier-btn .magnifier-btn-left{
	float: left;
}
.magnifier-btn .magnifier-btn-right{
	float: right;
}
.magnifier-line{
	position: relative;
	overflow: hidden;
	height: 92px;
	margin-top: 27px;
	margin-left: -45px;
}
.magnifier-line ul{
	display: block;
	font-size: 0;
	width: 10000%;
	position: absolute;
	left: 0;
	z-index: 9997;
}
.magnifier-line li{
	float: left;
	width: 100px;
	cursor: pointer;
}
.magnifier-line ul > .active .small-img{
	border-color: #bbb;
}
.small-img{
	height: 60px;
	padding: 1px;
	margin: 5px;
	overflow: hidden;
	border: 1px solid #ddd;
	text-align: center;
	margin: auto;
}
.small-img img{
	max-width: 100%;
	max-height: 100%;
}
.magnifier-view{
	width: 100%;
	height: 100%;
	position: absolute;
	right: -105%;
	top: 0;
	z-index: 9999;
	background-color: #fff;
	display: none;
	overflow: hidden;
}
.magnifier-view img{
	display: block;
}
.animation03{
	transition: all 0.3s ease-in 0.1s;
	-ms-transition: all 0.3s ease-in 0.1s;
	-moz-transition: all 0.3s ease-in 0.1s;
	-webkit-transition: all 0.3s ease-in 0.1s;
	-o-transition: all 0.3s ease-in 0.1s;
}

<script type="text/javascript">
		$(function(){
					var magnifierConfig={
						magnifier:"#magnifier1",
						width:450,
						hight:500,
						moveWidth:null,
						zoom:5
					};
					var _magnifier=magnifier(magnifierConfig);
				});
	</script>

右半部分

<div class="weight">2磅</div>
									<div class="weight" style="margin-left: 30px;">3磅</div>
									<div class="weight" style="margin-left: 30px;">4磅</div>

<script type="text/javascript">
	$(function() {
			$(".weight").click(function() {
				$(this).addClass("cl").siblings().removeClass("cl");
			})
		})
	</script>

三.问题

页面缩放填充

<script>
	function imgReload(){
		var imgHeight=0;
		var wtmp=$("body").width();
		$("#b04 ul li").each(function(){
			$(this).css({
				width: wtmp+"px"
			});
		})
	}
	$(window).resize(function(){
		imgReload();
	})
	//最后用js控制
	$(function() {
	    var unslider04 = $('#b04').unslider({
	        dots: true,
			fluid:true
	    });
	    data04 = unslider04.data('unslider');
	    $('.unslider-arrow04').click(function() {
	        var fn = this.className.split(' ')[1];
	        data04[fn]();
	    });
	});
</script>