(编辑:jimmy 日期: 2024/11/18 浏览:2)
本文实例讲述了AngularJS实现的鼠标拖动画矩形框。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; overflow: hidden; } #longzhoufeng { position: relative; left: 0; top: 0; margin: 0 auto; padding: 0; width: 800px; min-height: 800px; overflow: auto; height: 1000px; background-color: #e9e9e9; } .dashed-box { position: absolute; border: 1px dashed red; width: 0px; height: 0px; left: 0px; top: 0px; overflow: hidden; } #moving_box { border: 2px solid red; } .question-box { position: absolute; /* older safari/Chrome browsers */ -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter: alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } .question-border { border: 2px dashed red; overflow: hidden; z-index: 1; } .del-box { width: 20px; height: 20px; float: right; color: #fff; position: relative; margin-top: 1px; margin-right: 1px; z-index: 99; background-color: red; } .active-border { border: 2px solid red; -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter: alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } .box-background-image { position: absolute; width: 1000px; height: 1600px; } </style> <script src="/UploadFiles/2021-04-02/jquery.min.js">感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。