<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>拖拽放大</title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ position: relative; width: 200px; height: 200px; background-color: pink; } #div2{ position: absolute; width: 50px; height: 50px; right: 0; bottom: 0; background-color: cornflowerblue; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> <script type="text/javascript"> var div1=document.querySelector('#div1') var div2=document.querySelector('#div2') div2.onmousedown=function(e){ var x=e.pageX; var y=e.pageY; var width=div1.offsetWidth var height=div1.offsetHeight document.onmousemove=function(e){ div1.style.width=width+e.pageX-x+'px' div1.style.height=height+e.pageY-y+'px' } } div2.onmouseup=function(){ document.onmousemove=null } </script> </body> </html>
拖拽放大框效果
猜你喜欢
转载自www.cnblogs.com/yueranran/p/12176948.html
今日推荐
周排行