JS -------- 动态图片的实现

qq_42412646

于 2019-11-09 21:45:49 发布

阅读量642

点赞数 1

本文链接：https://blog.csdn.net/qq_42412646/article/details/102992293

版权

<html>
	<head>
		<meta charset="UTF-8">
		<title>js-是动态实现图片显示</title>
		<script type="text/javascript">
//			设置图片的动态效果
			function photoOper(ph,photo){
//				获取图片对象
//				var ph=document.getElementById(id);  //可以通过id获得，但是没必要，我们可以直接使用this直接把对象传过来
				ph.style.border="solid 1px";      //我们是重新赋值，所以我们要用=赋值符，而不是：各个是属性说明
//				在大屏块显示
				big.src=photo;          //传过来的数据就已经是一个字符串类型了，虽然我们src的值需要是字符串，但是如果再加一个""就会导致路径不明，这样其实际图片名相当于带了""
			}                             //src是big的属性的是不是样式属性，可以直接调用修改，不用加style
			function photoOper2(ph){
				ph.style.border="";        //移出后边框值没
			}
		</script>
		<style type="text/css">
			#showdiv{
				width: 300px;
				height: 440px;
				border: solid 1px;	
				border-radius: 15px;
			}
			#ta{
				margin: auto;
				margin-top: 10px;
				margin-left: 10x;
			}
			img{
				margin-left: 3px;
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			<table id="ta">
				<tr>
					<td colspan="4" width="240px" height="344px"><img src="../img/5.jpg" width="230px" id="big"/></td>
				</tr>
				<tr>
					<td height="68px"><img src="../img/1.jpg" height="65px" id="p1" onmousemove="photoOper(this,'../img/1.jpg')" onmouseout="photoOper2(this)"/></td>
					<td><img src="../img/3.jpg" height="65px"  onmousemove="photoOper(this,'../img/3.jpg')" onmouseout="photoOper2(this)" /></td>
					<td><img src="../img/4.jpg" height="65px"  onmousemove="photoOper(this,'../img/4.jpg')" onmouseout="photoOper2(this)"/></td>
					<td><img src="../img/7.jpg" height="65px"  onmousemove="photoOper(this,'../img/7.jpg')" onmouseout="photoOper2(this)"/></td>
				</tr>
			</table>
		</div>
	</body>
</html>

qq_42412646

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS -------- 动态图片的实现

<html> <head> <meta charset="UTF-8"> <title>js-是动态实现图片显示</title> <script type="text/javascript">// 设置图片的动态效果 function photoOper(ph,photo){// 获取图片对...
复制链接

扫一扫