<!DOCTYPE html>
<html>
<head><title>图片内部放大效果</title>
<meta charset="utf-8">
<style type="text/css">#imgborder{ width: 200px;height: 160px;border: 3px solid #000; overflow: hidden;position: relative;padding: 0px;margin:0px;}#firstimg{ position: absolute; animation: myan 3s;}/*@keyframes myan {from{width: 200px;}to{width: 500px;}}*/
</style>
</head>
<body>
<div id="imgborder">
<img src="dog.jpg" id="firstimg">
</div>
</body>
<script type="text/javascript">var fimg = document.getElementById('firstimg');var imgb = document.getElementById('imgborder');var initial = 0;fimg.onmouseover = function(){// img设置宽度，高都会等比例变大initial = fimg.width;fimg.width=fimg.width*1.2;// fimg.height=fimg.height*1.1;// alert(imgb.clientWidth);fimg.style.left=-(fimg.width-imgb.clientWidth)/2+"px";fimg.style.top=-(fimg.height-imgb.clientHeight)/2+"px";// alert(fimg.style.top);}fimg.onmouseout = function(){fimg.width = initial;fimg.style.left="0px";fimg.style.top="0px";}</script>
</html>
![[开源精品] C#.NET im 聊天通讯架构设计 -- FreeIM 支持集群、职责分明、高性能](https://img-blog.csdnimg.cn/img_convert/3c6780ce28a299671eb662e98aa404c8.png)
![《ASP.NET Core 6框架揭秘》实例演示[16]：内存缓存与分布式缓存的使用](https://img-blog.csdnimg.cn/img_convert/5be8c04bee3330805b29cbdbe0cff9a0.png)
