我的JavaScript回顾之路_06—0211—dom上自定义属性/放大镜

最新推荐文章于 2022-08-31 17:08:14 发布

阿狸与含羞草111

最新推荐文章于 2022-08-31 17:08:14 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/zsqRr123456/article/details/79311801

版权

1、dom上自定义属性

jq index = '0'; attr("index")

dom元素转换成jq对象 $(this)---->$($(this))

jq对象转换成dom元素 $($(this))[index] $($(this).get(index)

js getAttribute("index")

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js"></script>
	<style>
		.fl{

		}
		.clearfix{
			overflow: hidden;
		}
		.fl{
			float: left;
			height: 30px;
			line-height: 30px;
		}
		.center{
			text-align: center;
		}
		.fr{
			float: right;
		}
	</style>
</head>
<body>
	<div class="clearfix center" style="padding:2%">
		<div class="fl" style="width:33%; background: red">
			单价：<span class="price" index="0">10</span>
		</div>
		<div class="fl" style="width:33%; background: yellow">
			<button class="add" index="0">+</button>
			<input type="text" class="num center" style="width:10%" value="1" index="0">
			<button class="sub" index="0">-</button>
		</div>
		<div class="fl" style="width:34%; background: green">
			总价：<span class="totalPrice" index="0">10</span>
		</div>
	</div>
	<div class="clearfix center" style="padding:2%">
		<div class="fl" style="width:33%; background: red">
			单价：<span class="price" index="1">20</span>
		</div>
		<div class="fl" style="width:33%; background: yellow">
			<button class="add" index="1">+</button>
			<input type="text" class="num center" style="width:10%" value="1" index="1">
			<button class="sub" index="1">-</button>
		</div>
		<div class="fl" style="width:34%; background: green">
			总价：<span class="totalPrice" index="1">20</span>
		</div>
	</div>
	<div class="clearfix center" style="padding:2%">
		<div class="fl" style="width:33%; background: red">
			单价：<span class="price" index="2">30</span>
		</div>
		<div class="fl" style="width:33%; background: yellow">
			<button class="add" index="2">+</button>
			<input type="text" class="num center" style="width:10%" value="1" index="2">
			<button class="sub" index="2">-</button>
		</div>
		<div class="fl" style="width:34%; background: green">
			总价：<span class="totalPrice" index="2">30</span>
		</div>
	</div>
	<script>
		$(function(){
			$('.num').on('input', function(){
				this.value = this.value.replace(/[^\d]/g,'');
				var index = $(this).attr('index');
				var price = $($(".price")[index]).text();
				total = price * this.value * 1;
				$($(".totalPrice")[index]).text(total);
			})
			$('.add').on('click', function(){
				var index = $(this).attr('index');
				var price = $($(".price")[index]).text();
				var num = $($(".num")[index]).val();
				num++;
				$($(".num")[index]).val(num);
				total = price * num * 1;
				$($(".totalPrice")[index]).text(total);
			})
			$('.sub').on('click', function(){
				var index = $(this).attr('index');
				var price = $($(".price")[index]).text();
				var num = $($(".num")[index]).val();
				num--;
				if(num <= 0){
					return;
				}
				$($(".num")[index]).val(num);
				total = price * num * 1;
				$($(".totalPrice")[index]).text(total);
			})
		})
	</script>
</body>
</html>

2、放大镜

1.需引入imagezoom插件

2.鼠标移入移除事件==hover事件

$(function(){

$().on('mouseenter mouseleave', function(event){console.log(event, event.type)})

})

同上事件的hover事件

$().hover(function(){})

3.$().attr('src')获取dom元素的src属性值

$().attr('src', src)设置dom元素的src属性值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js"></script>
	<script type="text/javascript" src="jquery.imagezoom.min.js"></script>
	<style>
		*{padding:0; margin: 0 auto;}
		li{list-style: none}
		.box{padding-top:4%;}
		.clearfix{overflow: hidden;}
		.midImgList a{width: 310px; height: 310px; border: 1px solid #CDCDCD;}
		.imgList{width: 312px;}
		.imgList a{display: table-cell; text-align: center; vertical-align: middle;}
		.imgList img{vertical-align: middle;}
		.smallImgList li{float: left; margin-left:17px; margin-top:10px; border: 1px solid #CDCDCD;}
		.smallImgList a{width: 40px; height: 40px;}
		.active{border-color: red !important;}
		div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:40px;height:40px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
		div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
	</style>
</head>
<body>
	<div class="box">
		<div class='midImgList imgList'>
			<a href="images/01.jpg"><img src="images/01_mid.jpg" rel="images/01.jpg" alt="" class="midImg"></a>
		</div>
		<ul class="clearfix smallImgList imgList">
			<li class="active">
				<a href="#">
					<img src="images/01_small.jpg" midImg="images/01_mid.jpg" bigImg="images/01.jpg" alt="" class="smallImg">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/02_small.jpg" midImg="images/02_mid.jpg" bigImg="images/02.jpg" alt="" class="smallImg">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/03_small.jpg" midImg="images/03_mid.jpg" bigImg="images/03.jpg" alt="" class="smallImg">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/04_small.jpg" midImg="images/04_mid.jpg" bigImg="images/04.jpg" alt="" class="smallImg">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/05_small.jpg" midImg="images/05_mid.jpg" bigImg="images/05.jpg" alt="" class="smallImg">
				</a>
			</li>
		</ul>
	</div>
	<script>
		$(function(){
			$(".midImg").imagezoom();
			$(".smallImgList li").on("mouseenter mouseleave", function(event){
				$(".midImg").attr('rel', $(this).find("img").attr('bigImg'));
				if(event.type == 'mouseenter'){
					$(this).addClass("active").siblings().removeClass("active");
					$(".midImg").attr('src', $(this).find("img").attr('midImg'));
				}
			})
		})
	</script>
</body>
</html>

阿狸与含羞草111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的JavaScript回顾之路_06—0211—dom上自定义属性/放大镜

1、dom上自定义属性jq index = '0'; attr("index")dom元素转换成jq对象 $(this)----&gt;$($(this))jq对象转换成dom元素 $($(this))[index] $($(this).get(index)js getAttribute("index")&lt;!DOCTYPE html&gt;&lt;html lang="en"...
复制链接

扫一扫