播放幻灯片过程中怎样将图片放大

发布网友发布时间：2022-04-19 15:05

我来回答

共2个回答

懂视网时间：2022-04-24 00:14

1.图片放大镜的思路：

　　当打开页面时只有图片

　　首先，说一下基本效果和调理，图片放大镜，也就是当你鼠标移入当前的商品图片时，会出现一个小灰色的观察移动框，有点会出现一个对应部位的放大的图片。

　　然后当鼠标移动时，右边的放大镜会出现对应部位的放大图片

　　最后当鼠标移开后，小的观察框和放大的图片都会消失。

2,。有了基本思路就看代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#small{
				width: 300px;
				height: 300px;
				border: 1px solid firebrick;
				float: left;
				position: relative;
			}
			#small img{
				width: 100%;
				height: 100%;
				
			}
			#mask{
				width: 100px;
				height: 100px;
				background: rgba(0,0,0,0.3);
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			#big{
				width: 300px;
				height: 300px;
				border: 1px solid hotpink;
				overflow: hidden;
				float: left;
				margin-left: 50px;
				position: relative;
				display: none;
			}
			#big img{
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
//				获取到所有的元素,因为有对应元素的移动,所以在设置样式的,一定要给对应的元素绝对定位,类似于拖拽
				var oSmall = document.getElementById('small'),
				oMask = document.getElementById('mask'),
				oBig = document.getElementById('big'),
				oBigImg = document.getElementById('bigImg');
				//给当前小的div一个鼠标移入事件
				oSmall.onmouseover = function(){
//					当鼠标移入时,对应的区域显示 小的观察框，和 对应的右面的放大图片
					oMask.style.display = 'block';
					oBig.style.display = 'block';
				};
				oSmall.onmouseout = function(){
//					当鼠标移除时对应的区域隐藏
					oMask.style.display = 'none';
					oBig.style.display = 'none'
				}
				oSmall.onmousemove = function(ev){
//					首先获取到event事件
					var oEvent = ev || event;
//					offsetWidth = 本身的样式宽 + 左右padding + 左右border
//					clientX clientY 获取鼠标指针位置,相对于当前窗口的 X 和 Y 坐标
					
//					鼠标距离当前窗口左边的距离 了l ,就为当前鼠标距离窗口左边的距离 减去 小的观察框的宽度
//							oMask.offsetWidth / 2 设置鼠标处于正中心的位置
					var l = oEvent.clientX - oMask.offsetWidth / 2;
					var t = oEvent.clientY - oMask.offsetHeight / 2;
					
//					对观察框距离的限制, 1.当它距离左边的距离比0 小的时候,设置它为0 就是它移动到最左边的时候
					if (l < 0) {
						l = 0;
					}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
//						当它移动到最右边的时候,设置它的left值为 当前的left值
						l = oSmall.offsetWidth - oMask.offsetWidth;
					};
					
					//同理对上下边界进行设置
					if (t < 0) {
						t = 0;
					}else if(t > oSmall.offsetHeight - oMask.offsetHeight){
						t = oSmall.offsetHeight - oMask.offsetHeight;
					};

//					设置小的观察框的移动时的当前位置
					oMask.style.left = l + 'px';
					oMask.style.top = t + 'px';
					
//					设置对应的右边放大图片对应的位置
					//var scale = l / (oSmall.offsetWidth - oMask.offsetWidth);
//					大的可视区域的宽减去小的观察框对应的宽,就是可移动的总距离, 当前处的位置,处于总的距离的比例 与大图片,在大图片的可视框里所处的位置相同所以如下
					oBigImg.style.left = l * (oBig.offsetWidth - oBigImg.offsetWidth)/(oSmall.offsetWidth-oMask.offsetWidth)+"px";
					oBigImg.style.top = t * (oBig.offsetHeight - oBigImg.offsetHeight)/(oSmall.offsetHeight-oMask.offsetHeight)+"px";
					
				}
			}
		</script>
	</head>
	<body>
		<div id="small">
			<img src="img/s.jpg" />
			<spanS id="mask"></span>
		</div>
		<div id="big">
			<img src="img/b.jpg" id="bigImg"/>
		</div>
	</body>
</html>

热心网友时间：2022-04-23 21:22

打开幻灯片程序，在幻灯片中插入图片。选择第一张图片。选择“动画”功能菜单，单击工具栏中动画右侧的下拉列表按钮。在弹出的下拉列表中选择“强调”动画中的“放大/缩小”动画效果。用户还可以单击工具栏中的“效果选项”设置详细的动画效果。这样我们就为第一张图片添加了一个放大的动画效果。但这个放大的动画效果并不是单击图片时图片就放大效果，还需要继续设置。打开动画窗格，在动画窗格列表中列举出了第一张图片的放大动画列表，右击此列表，在弹出的右键菜单中选择“计时”命令。在弹出的对话框中单击“触发器”按钮。选择”单击下列对象时启动效果“选项。因为我们希望单击第一张图片时，第一张图片就放大，所以在”单击下列对象时启动效果“选项后面的下拉列表中选择第一张图片的名称”图片3“。单击确定按钮。这样就为”图片3“的放大动画添加了一个触发器。在幻灯片播放时，用户单击第一张图片，第一张图片就会被放大。注意：
触发器类似一个开关，通过单击触发器设置的对象，就可以启动某个动画效果；
关于触发器的具体操作方法，可以参考此文章前面第一张图片上方的链接查看。

首页

文章

播放幻灯片过程中怎样将图片放大