JavaScript（七十六）Jquery的案例练习

每天进步一大步

于 2021-06-26 10:29:58 发布

阅读量334

点赞数

分类专栏： Javascript jquery

本文链接：https://blog.csdn.net/weixin_44730244/article/details/118242866

版权

Javascript 同时被 2 个专栏收录

75 篇文章 4 订阅

订阅专栏

jquery

8 篇文章 0 订阅

订阅专栏

放大镜：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box img{
				width: 300px;
				height: 300px;
			}
			.box{
				display: inline-block;
				width: 300px;
				height: 300px;
			}
			.small{
				display: none;
				width: 100px;
				height: 100px;
				background-color: rgba(255,255,240,0.5);
				position: absolute;
				top: 0;
				left: 0;
			}
			.big{
				position: relative;
				display: inline-block;
				width: 200px;
				height: 200px;
				overflow: hidden;
				border: 1px solid black;
			}
			.big img{
				width: 600px;
				height: 600px;
				position: absolute;
				z-index: -1;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$('.box').mouseenter(function(){
					$('.small').css('display','block')
				})
				$('.box').mouseleave(function(){
					$('.small').css('display','none')
				})
				$('.small').mousedown(function(e){
					let boxL=e.clientX-this.offsetLeft
					let boxT=e.clientY-this.offsetTop
					var _this=this
					$(document).mousemove(function(e){
						let L=e.clientX-boxL
						let T=e.clientY-boxT
						let limitL=parseInt($('.box').css('width'))+$('.box').offset().left-parseInt($('.small').css('width'))
						let limitT=parseInt($('.box').css('height'))+$('.box').offset().top-parseInt($('.small').css('height'))
						if(L<=0){
							L=0+'px'
						}else if(L>=limitL){
							L=limitL+'px'
						}
						if(T<=0){
							T=0+'px'
						}else if(T>=limitT){
							T=limitT+'px'
						}
						$(_this).css({
							left:L+'px',
							top:T+'px'
						})
						let imgL=-L*2+'px'
						let imgT=-T*2+'px'
						$('.big img').css({
							left:imgL,
							top:imgT
						})
						
					})
				})
			})
		</script>
	</head>
	<body>
		<div class="box">
			<img src="../img/龙猫.jpeg" >
			<div class="small"></div>
		</div>
		<div class="big">
			<img src="../img/龙猫.jpeg" >
		</div>
	</body>
</html>

轮播图
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: relative;
				width: 300px;
				height: 200px;
				margin: 100px 100px;
				border: 1px solid black;
				overflow: hidden;
			}
			img{
				width: 300px;
				height: 200px;
			}
			ul{
				float: left;
				width: 1500px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
			}
			ul::after{
				content: :'';
				display: block;
				height: 100%;
			}
			li{
				float: left;
				list-style: none;
			}
			#point {
				width: 100px;
				height: 20px;
				position: absolute;
				left: 50%;
				top: 180px;
				transform: translateX(-50%);
				
			}
			#point li{
				float: left;
				width: 10px;
				height: 10px;
				margin: 5px;
				border-radius: 5px;
				background-color: orange;
				z-index: 2;
			}
			#point li:nth-child(1){
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				let point=0
				let oul=document.getElementsByTagName('ul')[0]
				function getStyle(attr,node){
					return node.currentStyle?node.currentStyle[attr]:getComputedStyle(node)[attr]
				}
				/* 图片滑动 */
				function move({attr,itarget,node,complete}){
					node.time=setInterval(function(){
						if(parseInt(getStyle(attr,node))==itarget){
							if(complete){
								complete()
							}
						}else{
							let speed=-5
							node.style[attr]=(parseInt(getStyle(attr,node))+speed)+'px';
							
							let pointShow=-parseInt(parseInt(getStyle(attr,node))%300)
							/* 指示点改变 */
							if(pointShow==0){
								point++;
								if(point==4){
									point=0
								}
							}
							$('#point li').css('backgroundColor','orange')
							$('#point li').eq(point).css('backgroundColor','red')
						}
					},36)
				}
				function banner(){
						move({
							attr:'left',
							itarget:-1200,
							node:oul,
							complete:function(){
								oul.style.left=0+'px'
							}
						})
				}
				banner()
				/* 指示点 */
				$('#point li').hover(function(){
					clearInterval(oul.time)
					$('#point li').css('backgroundColor','orange')
					$('#point li').eq($(this).index()).css('backgroundColor','red')
					$('#image').css('left',-$(this).index()*300+'px')
					point=$(this).index()
				},function(){
					banner()
				})
				
			})
		</script>
	</head>
	<body>
		<div class="box">
			<ul id="image">
				<li><img src="../img/龙猫.jpeg" ></li>
				<li><img src="../img/可爱二.jpg" ></li>
				<li><img src="../img/龙猫.jpeg" ></li>
				<li><img src="../img/可爱二.jpg" ></li>
				<li><img src="../img/龙猫.jpeg" ></li>
			</ul>
			<!-- 指示点 -->
			<ul id="point">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>

每天进步一大步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（七十六）Jquery的案例练习

放大镜：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{
复制链接

扫一扫