html5+css3实现鼠标移动拖动改变大小位置和旋转_html5拖动调整大小资源-CSDN文库

共1个文件

html：1个

4星 · 超过85%的资源需积分: 50 91 浏览量 2015-09-08 17:23:01 上传评论 3 收藏 2KB ZIP 举报

在现代网页开发中，HTML5和CSS3的组合提供了丰富的功能和表现力，使得开发者能够创建出更加互动和动态的用户界面。本话题主要聚焦于如何利用这些技术实现一种类似于Word处理图片的功能，即通过鼠标操作来改变图片的大小、位置和进行旋转。 HTML5引入了Canvas元素，提供了一个画布，开发者可以在这个画布上绘制图形并进行交互。然而，对于图片的拖放和旋转，我们并不需要直接使用Canvas，而是可以通过结合HTML5的Drag and Drop API和CSS3的transform属性来实现。拖放功能是HTML5的一个强大特性，它允许用户选择页面上的元素并将其移动到其他位置。我们需要在HTML中设置图片元素为可拖动，并添加一个特殊的`draggable`属性，例如`draggable="true"`。然后，通过JavaScript监听`dragstart`、`drag`和`dragend`事件，来控制拖放过程中的行为，如更新图片的位置。 CSS3的transform属性则负责处理图片的大小调整和旋转。在CSS中，我们可以使用`transform: scale(x, y)`来改变元素的大小，其中x和y是缩放比例；使用`transform: rotate(angle)`来旋转元素，angle是旋转的角度，通常以度数表示。这两个属性都可以接受鼠标事件中的坐标信息，动态计算出新的大小和角度，实现拖动调整。 jQuery库可以简化JavaScript代码，提供更流畅的动画效果和更方便的DOM操作。通过jQuery，我们可以更容易地绑定事件、获取和设置元素属性，以及创建平滑的过渡动画。例如，使用`.on('mousedown', function() {...})`开始拖动操作，`.on('mousemove', function() {...})`处理拖动过程，`.on('mouseup', function() {...})`结束拖动。在实际应用中，我们需要考虑以下几个关键点： 1. **边界检测**：当用户拖动图片时，应防止图片超出容器的边界。 2. **旋转中心点**：确保图片旋转的中心点是预期的位置，这可能需要对transform的origin属性进行设置。 3. **实时反馈**：在鼠标移动时实时更新图片的状态，这可能需要结合CSS3的transition属性来实现平滑效果。 4. **事件阻止和冒泡**：根据需求，可能需要阻止默认的拖放行为，或者处理事件冒泡，以防止其他元素的响应。通过以上技术的组合，我们可以创建出一款直观且易于使用的图片编辑工具，让用户像在Word中一样自由地操作图片。这个过程中，HTML5的拖放API和CSS3的transform属性起到了关键作用，而jQuery则帮助我们更高效地实现了这些功能。在实际项目中，你还可以根据需求进一步优化，比如添加触摸设备的支持，或者提供更精细的控制选项。

资源推荐

资源详情

资源评论

收起资源包目录

鼠标特效.zip （1个子文件）

鼠标特效

scrol.html 10KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <style> body { -moz-user-select: none; -webkit-user-select: none; user-select: none; } #mydiv { width: 200px; height: 100px; border: 1px solid #ccc; position: absolute; left: 300px; top:300px; } #MyContent { background: #8df3d4; width: 100%; height: 100%; position: absolute; font-size: 20px; font-weight: bold; color: #fff; text-shadow: 2px 2px 5px #ff0000; text-align: center; cursor:move; } .nodebo { border-radius: 15px; width: 15px; height: 15px; background: #fff; position: absolute; border: 1px solid #00ffff; } .node_top_left { left: calc(0px - (15px)/2); top: calc(-15px/2); cursor: nw-resize; } .node_top_center { left: calc(50% - (15px)/2); top: calc(-15px/2); cursor: n-resize; } .node_top_right { right: calc(-15px/2); top: calc(-15px/2); cursor: ne-resize; } .node_center_left { left: calc(-15px/2); top: calc(50% - 15px/2); cursor: w-resize; } .node_center_right { right: calc(-15px/2); top: calc(50% - 15px/2); cursor: e-resize; } .node_bottom_left { left: calc(0px - (15px)/2); bottom: calc(0px - 15px/2); cursor: sw-resize; } .node_bottom_center { left: calc(50% - (15px)/2); bottom: calc(0px - 15px/2); cursor: s-resize; } .node_bottom_right { right: calc(-15px/2); bottom: calc(0px - 15px/2); cursor: se-resize; } .node_scale { border-radius: 15px; width: 15px; height: 15px; position: absolute; border: 1px solid #00ffff; top: -50px; background: #00ffff; left: calc(50% - (15px)/2); cursor: url(http://m.aukong.com/scorl/rotate.ico) 10 10,default; } .node_shu { width: 0px; height: 24.5px; top: -35px; color: #00ffff; border:2px solid #00ffff; font-weight: bold; text-align: center; left: calc(50%); position: absolute; } </style> <script> window.onload =function(){ var isMouseDown = false; //鼠标是否按下 var mouseDownPosiY; var mouseDownPosiX; var InitPositionY; var InitPositionX; var InitHeight; var InitWidth; var mousedownid; //按下的元素 $(".nodebo,#MyContent").mousedown(function (e) { //鼠标按下 mouseDownPosiY = e.pageY; mouseDownPosiX = e.pageX; isMouseDown = true; mousedownid = $(this).attr("id"); InitPositionY = $("#mydiv").css("top").replace("px", ""); InitPositionX = $("#mydiv").css("left").replace("px", ""); InitHeight = $("#mydiv").height(); InitWidth = $("#mydiv").width(); $("#txtdownstate").val(isMouseDown); }); $(document).mousemove(function (e) { //鼠标移动 if (isMouseDown) { var hh = parseInt(e.pageY) - parseInt(mouseDownPosiY); var ww = parseInt(e.pageX) - parseInt(mouseDownPosiX); var tempY = hh + parseInt(InitPositionY); var tempX = ww + parseInt(InitPositionX); switch (mousedownid) //修改元素属性 { case "topleft": $("#mydiv").css({"top":tempY + "px","height": parseInt(InitHeight) - hh + "px","left": tempX + "px","width":parseInt(InitWidth) - ww + "px"}); break; case "topcenter": $("#mydiv").css({"top":tempY + "px","height": parseInt(InitHeight) - hh + "px"}); break; case "topright": $("#mydiv").css({"top": tempY + "px","height": parseInt(InitHeight) - hh + "px","width": parseInt(InitWidth) + ww + "px"}); break; case "centerleft": $("#mydiv").css({"left": tempX + "px","width": parseInt(InitWidth) - ww + "px"}); break; case "centerright": $("#mydiv").css({"width": parseInt(InitWidth) + ww + "px"}); break; case "bottomleft": $("#mydiv").css({"height": parseInt(InitHeight) + hh + "px","left": tempX + "px","width": parseInt(InitWidth) - ww + "px"}); break; case "bottomcenter": $("#mydiv").css("height", parseInt(InitHeight) + hh + "px"); break; case "bottomright": $("#mydiv").css({"height": parseInt(InitHeight) + hh + "px","width": parseInt(InitWidth) + ww + "px"}); break; case "MyContent": $("#mydiv").css("left", tempX + "px").css("top", tempY + "px"); break; } //显示移动数值（测试用） $("#txtyd").val($("#mydiv").css("height")); $("#txtwd").val($("#mydiv").css("width")); $("#txtleft").val($("#mydiv").css("left")); $("#txtcs").val($("#mydiv").css("top")); $("#txtsb").val("from " + parseInt(mouseDownPosiX) + " to " + e.pageX + " = " + ww); } }).mouseup(function () { mousedownid = ""; isMouseDown = false; $("#txtdownstate").val(isMouseDown); //显示状态 }).mouseleave(function () { mousedownid = ""; isMouseDown = false; $("#txtdownstate").val(isMouseDown); //显示状态 }); getscole($(".node_scale")); } function getscole(objmodel) { var offsetX; var offsetY; var isMouseDown = false; objmodel.mousedown(function (e) { //鼠标按下 offsetX = parseInt($('#mydiv').css('left').replace("px","")) + parseInt($('#mydiv').css("width").replace("px", "")) / 2; offsetY = parseInt($('#mydiv').css('top').replace("px", "")) + parseInt($('#mydiv').css("height").replace("px", "")) / 2; isMouseDown = true; $("#txtleft").val($('#mydiv').css('left')); $("#txtcs").val($('#mydiv').css('top'));

评论收藏

内容反馈