js控制图像等比例缩放
生活随笔
收集整理的这篇文章主要介绍了
js控制图像等比例缩放
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!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>
转载于:https://www.cnblogs.com/w-y-y/p/7087661.html
总结
以上是生活随笔为你收集整理的js控制图像等比例缩放的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 驱动程序开发的模具
- 下一篇： tomcat启动报错：Bean name