Maison >interface Web >tutoriel HTML >css 元素移动的时候怎么让超出部分隐藏起来_html/css_WEB-ITnose
css 元素移动的时候怎么让超出部分隐藏起来_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:14:351318parcourir
图片中菜单的元素是可移动的.我想实现菜单的元素移动红线那里就把超出部分隐藏起来这个要怎么实现啊?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>http://hi.baidu.com/see7di/home</title> <script type="text/javascript" src="/weishiji/assets/fd710db1/jquery.js"></script> <script type='text/javascript'> (function($){ //拖拽插件,参数:id或object $.Move = function(_this){ if(typeof(_this)=='object'){ _this=_this; }else{ _this=$("#"+_this); } if(!_this){return false;} _this.css({'position':'absolute'}).hover(function(){$(this).css("cursor","move");},function(){$(this).css("cursor","default");}) _this.mousedown(function(e){//e鼠标事件欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home var offset = $(this).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; _this.css({'opacity':'0.3'}); $(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 _this.bind('selectstart',function(){return false;}); var _x = ev.pageX - x;//获得X轴方向移动的值欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home var _y = ev.pageY - y;//获得Y轴方向移动的值 _this.css({'left':_x+"px",'top':_y+"px"}); }); }); $(document).mouseup(function(){ $(this).unbind("mousemove"); _this.css({'opacity':''}); }) }; })(jQuery) //插件?用欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home $(function(){ $.Move('m1'); }); </script></head><body><style type='text/css'> #m1{border:1px solid;} #hidden{ border:1px solid red; width: 500px; height:500px; }</style><div id="m1"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a><ul><li><a href="">子菜单7</a></li></ul></li> <li><a href="">子菜单3</a></li> </ul> </li> <li><a href="">菜单二</a> <ul> <li><a href="">子菜单4</a></li> <li><a href="">子菜单5</a></li> <li><a href="">子菜单6</a></li> </ul> </li> </ul></div><div id="hidden"></div></body></html> 回复讨论(解决方案)
overflow:hidden
overflow:hidden
正解
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：求css高手看下什么问题，太怪了_html/css_WEB-ITnoseArticle suivant：css中绝对定位的img不能被遮罩层遮住，求解决办法！！_html/css_WEB-ITnose