amp 网站开发,网站做支付系统,织梦做分类信息网站,用php做网站的方法目录
css代码 html代码
js代码
完整代码
效果图#xff1a; 需求#xff1a;
鼠标在图片内按下时 图片可以跟随盒子动 鼠标弹起图片停下来 如果图片在box的盒子里面时鼠标弹起了 就把图片展示在box里面 并且让图片回到起始位置
css代码 .div {width: 100px;height: 10…目录
css代码 html代码
js代码
完整代码
效果图 需求
鼠标在图片内按下时 图片可以跟随盒子动 鼠标弹起图片停下来 如果图片在box的盒子里面时鼠标弹起了 就把图片展示在box里面 并且让图片回到起始位置
css代码 .div {width: 100px;height: 100px;background-color: skyblue;position: absolute;top: 0;left: 0;}img {width: 100%;height: 100%;}.box {width: 300px;height: 300px;background-color: pink;margin-top: 300px;margin-left: 500px;} html代码
div classdivimg src1.jpg alt/divdiv classbox/div
js代码 scriptconst div document.querySelector(.div)const box document.querySelector(.box)//鼠标在div按下div.onmousedown function (e) {// 鼠标在按下后在文档上移动时盒子跟着document.onmousemove function (e) {div.style.top e.clientY pxdiv.style.left e.clientX px}}div.onmouseup function (e) {//把div图片的地址拿到赋值给imgSrc变量const imgSrc e.target.src// 判断div只要在box盒子里就把div图片给boxif (e.clientX 500 e.clientX 800 e.clientY 300 e.clientY 600) {// 动态创建imgconst img document.createElement(img)// 把imgSrc赋值给创建的img的src属性box.appendChild(img)// 把创建的img添加到box元素img.src imgSrc// div回到原来的位置div.style.top 0div.style.left 0}// 鼠标弹起时移除鼠标移动事件让图片停下来document.onmousemove null}/script
完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style.div {width: 100px;height: 100px;background-color: skyblue;position: absolute;top: 0;left: 0;}img {width: 100%;height: 100%;}.box {width: 300px;height: 300px;background-color: pink;margin-top: 300px;margin-left: 500px;}
/stylebodydiv classdivimg src1.jpg alt/divdiv classbox/divscriptconst div document.querySelector(.div)const box document.querySelector(.box)// 鼠标在图片内按下时 图片可以跟随盒子动// 鼠标弹起图片停下来// 如果图片在box的盒子里面时鼠标弹起了 就把图片展示在box里面 并且让图片回到起始位置//鼠标在div按下div.onmousedown function (e) {// 鼠标在按下后在文档上移动时盒子跟着document.onmousemove function (e) {div.style.top e.clientY pxdiv.style.left e.clientX px}}div.onmouseup function (e) {//把div图片的地址拿到赋值给imgSrc变量const imgSrc e.target.src// 判断div只要在box盒子里就把div图片给boxif (e.clientX 500 e.clientX 800 e.clientY 300 e.clientY 600) {// 动态创建imgconst img document.createElement(img)// 把imgSrc赋值给创建的img的src属性box.appendChild(img)// 把创建的img添加到box元素img.src imgSrc// div回到原来的位置div.style.top 0div.style.left 0}// 鼠标弹起时移除鼠标移动事件让图片停下来document.onmousemove null}/script
/body/html
效果图
