js模拟淘宝

最新推荐文章于 2024-04-01 19:21:16 发布

码小余の博客

最新推荐文章于 2024-04-01 19:21:16 发布

阅读量458

点赞数 1

分类专栏：前端文章标签： js高级字符串拼接 js

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/103346579

版权

前端专栏收录该内容

78 篇文章 2 订阅

订阅专栏

js模拟淘宝

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例-模拟淘宝</title>
		<style type="text/css">
			#showdiv{
				width: 1145px;
				height: 960px;
				border: solid 1px;
				border-radius: 20px;
			}
			#ta{
				margin: auto;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			<!--声明js代码域-->
			<script type="text/javascript">
				
					//创建函数进行照片的联动和样式设置
					// function operInImg(img){
					function operInImg(img,src){
						//设置图片的样式
						img.style.border="solid 2px";
						//设置大图的img路径
							//获取大图对象
							var big = document.getElementById("big");
							//设置路径
							// big.src=img.src;
							big.src="images/"+src;
					}
					function operOutImg(img){
						img.style.border="";
					}
				
				document.write("<table border='0px' width='270px' id='ta'>");
				for(var i=0;i<1;i++){
					document.write("<tr height='300px'>");
					for(var j=0;j<1;j++){
						document.write("<td colspan='5'>");
						document.write("<img src='images/1561608763147.jpg' width='1116px' id='big'>");
						document.write("</td>");
					}
					document.write("</tr>");
				}
				for(var i=0;i<1;i++){
					document.write("<tr height='60px'>");
					for(var j=1;j<6;j++){
						document.write("<td>");
						// document.write("<img src='images/"+j+".jpg' width='220px' height='150px' οnmοuseοver='operInImg(this)' οnmοuseοut='operOutImg(this)'>");
						//高级字符串拼接
						document.write("<img src='images/"+j+".jpg' width='220px' height='150px' οnmοuseοver='operInImg(this,"+j+"+\".jpg\")' οnmοuseοut='operOutImg(this)'>");
						document.write("</td>");
					}
					document.write("</tr>");
				}
				document.write("</table>");
			</script>
		</div>
	</body>
</html>

码小余の博客

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js模拟淘宝

js模拟淘宝<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>案例-模拟淘宝</title> <style type="text/css"> #showdiv{ width: 1145px; height: ...
复制链接

扫一扫