＜jQery-实现点击图片铺满页面＞

最新推荐文章于 2021-06-04 13:49:51 发布

好先生·

最新推荐文章于 2021-06-04 13:49:51 发布

阅读量255

点赞数

分类专栏： jQuery基础 JavaScipt基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45540964/article/details/110913361

版权

JavaScipt基础同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

jQuery基础

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#app {
			border: 1px solid #000;
		}
		#app img {
			width: 15%;
			height: 180px;
			margin: 5px;
			border-radius: 20px;
		}
		body {
			background-repeat: no-repeat;
			background-position: center top;
			background-size: cover;
		}
	</style>
</head>
<body>
	<h1>点击图片铺满页面</h1>
	<div id="app">
		<img src="/Users/macbookair/Desktop/picture/0.jpg" alt="">
		<img src="/Users/macbookair/Desktop/picture/1.jpg" alt="">
		<img src="/Users/macbookair/Desktop/picture/2.jpg" alt="">
		<img src="/Users/macbookair/Desktop/picture/3.jpg" alt="">
		<img src="/Users/macbookair/Desktop/picture/4.jpg" alt="">
		<img src="/Users/macbookair/Desktop/picture/5.jpg" alt="">
	</div>
<!--原始js实现 
	<script type="text/javascript">
		var im1=document.getElementById('app').getElementsByTagName('img');
		// var j;
		for (var i=0; i<im1.length; i++) {
			// j=i;
			im1[i].onclick=function() {
				console.log(this.src);
				document.body.style.backgroundImage='url'+'('+this.src+')';
			};
		}
	</script>
	-->
	<p>jQery实现</p>
	<script src="../jquery-1.12.3/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
		var url;
		$('img').click(function(){
			url=this.getAttribute('src');
			//src获取的知识src="/abc/"中属性值/abc/
			//而getAttribute获取的是文件的绝对路径地址
			console.log(url);
			console.log(this.src);
			$('body').css('background-image','url'+'('+url+')')
			console.log($('body').css('background-repeat'));
		});
		
	</script>
</body>
</html>

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜jQery-实现点击图片铺满页面＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #app { border: 1px solid #000;
复制链接

扫一扫