js控制图像等比例缩放
生活随笔
收集整理的這篇文章主要介紹了
js控制图像等比例缩放
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head><title>圖片內(nèi)部放大效果</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設(shè)置寬度，高都會(huì)等比例變大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>
轉(zhuǎn)載于:https://www.cnblogs.com/w-y-y/p/7087661.html
總結(jié)
以上是生活随笔為你收集整理的js控制图像等比例缩放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 驱动程序开发的模具
- 下一篇： tomcat启动报错：Bean name