问答首页 → Web前端技术
0 0

怎么解决鼠标拖动显示出超出的部分15

我是想用鼠标往右侧托，Div里的内容就会往左侧滑动，最终可以看到最右侧的内容
我先在是在Div里面加了样式
<div style="overflow: hidden;text-overflow:ellipsis;">
但是往右侧拖内容还是不显示全
问题补充：
asyty 写道
在text文字外面套一个div 移动的时候js控制显示的绝对位置？
不能全部显示应该是大小没有控制好吧


我的div里面是用<bean:write >显示内容出来
而div是内嵌在<td>里面
问题补充：
asyty 写道
这样？ 里面的div的position用absolute控制位置 
<div style="width: xx px;overflow: hidden;text-overflow:ellipsis;"> 
   <div style="width: xx px"><bean:write .....></div>
</div>


鼠标拖动往右侧拖动时，右侧内容还是不能显示，是否还有其他好的方案呀！
问题补充：
asyty 写道
我没试过 不知道你那边不全是啥意思。。。

要不把css里text-overflow:ellipsis;去掉？ 貌似这个属性表示超出部分省略号


就是鼠标往右侧拖动，内容不会自动往左边移动，右侧省略的的代码还是隐藏了
没有跟着鼠标的移动而自动显示出来

去掉Css 也是没有用的 ，他不过就是省略号的意思
问题补充：
asyty 写道
我不知道你的拖动是咋实现的 不过试试用margin 
<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: hidden;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
	
	<script type="text/javascript">
	    var i = 0;
		
		var intevalId = window.setInterval(function(){
					document.getElementById("test").style.marginLeft = -20 * i + " px";
					if(i == 30) {
						window.clearInterval(intevalId);
					}
					i++;
				}, 1000);
		
	
	</script>
</body>

</html>


我的拖动就是直接用鼠标放到Div里面的内容里面，往右边拉
问题补充：就想文本框中那样的效果，如果你输入的太多，鼠标往后面拉就会自动把后面的内容显示出来的
问题补充：
asyty 写道
。。。。。
这个overflow不是应该用scroll嚒 这么会是hidden呢 

<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: scroll;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
</body>

</html>

如果这样的话就是滚动效果啦
我要的效果是 鼠标直接拖动td里面的内容就可以往后看到内容，前面的内容就缩进
问题补充：
asyty 写道
那和我前面写的js修改css有区别嚒。。。只是改成鼠标事件而已 
<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: hidden;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
	
	<script type="text/javascript">
		var x0 =0 ;
		var drag = false

		document.body.onmousedown = function (event) {	
			x0 = event.clientX;
			drag = true;
		}
		document.body.onmousemove = function (event) {
			if(drag) {
				var x = event.clientX;
				document.getElementById("test").style.marginLeft =  x - x0 + " px";
			}
		}
		document.body.onmouseup = function (event) {
			x0 = 0;
			drag = false;
		}
	
	</script>
</body>

</html>



x0 = event.clientX;
这个对象应该不存在吧
问题补充：
asyty 写道
不过 var drag = false  这里少了个分号倒是真的，不过还是能跑的。。



当然是试过了才知道的啊！ 能跑，却报Js错误明显那个对象不存在
问题补充：
asyty 写道
引用
当然是试过了才知道的啊！ 能跑，却报Js错误明显那个对象不存在

你用的IE浏览器吧。。。。。chrome是可以的

刚给加了一句 ie也OK了。。。 

<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: hidden;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
	
	<script type="text/javascript">
		var x0 =0 ;
		var drag = false;

		document.body.onmousedown = function (event) {	
		    if(!event) event = window.event;
			x0 = event.clientX;
			drag = true;
		}
		document.body.onmousemove = function (event) {
			
			if(drag) {
				if(!event) event = window.event;
				var x = event.clientX;
				document.getElementById("test").style.marginLeft =  x - x0 + " px";
			}
		}
		document.body.onmouseup = function (event) {
			if(!event) event = window.event;
			x0 = 0;
			drag = false;
		}
	
	</script>
</body>

</html>



体验不是很好！如果能在修改一下 那就感谢了！
问题补充：
asyty 写道
引用
当然是试过了才知道的啊！ 能跑，却报Js错误明显那个对象不存在

你用的IE浏览器吧。。。。。chrome是可以的

刚给加了一句 ie也OK了。。。 

<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: hidden;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
	
	<script type="text/javascript">
		var x0 =0 ;
		var drag = false;

		document.body.onmousedown = function (event) {	
		    if(!event) event = window.event;
			x0 = event.clientX;
			drag = true;
		}
		document.body.onmousemove = function (event) {
			
			if(drag) {
				if(!event) event = window.event;
				var x = event.clientX;
				document.getElementById("test").style.marginLeft =  x - x0 + " px";
			}
		}
		document.body.onmouseup = function (event) {
			if(!event) event = window.event;
			x0 = 0;
			drag = false;
		}
	
	</script>
</body>

</html>



它有可能出现空白无内容的现象，如果在加上相应的判断就好哦！ 内容到显示全了就不要让它在拖到啦  
Web综合 
2011年11月28日 16:53

10个答案 按时间排序 按投票排序

0 0

采纳的答案

引用
它有可能出现空白无内容的现象，如果在加上相应的判断就好哦！ 内容到显示全了就不要让它在拖到啦 

晕。。。关键不是帮你写代码啦 是给你看个例子 自己琢磨着写才能进步哈

2011年12月02日 11:53
0 0

引用
当然是试过了才知道的啊！ 能跑，却报Js错误明显那个对象不存在

你用的IE浏览器吧。。。。。chrome是可以的

刚给加了一句 ie也OK了。。。 

<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: hidden;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
	
	<script type="text/javascript">
		var x0 =0 ;
		var drag = false;

		document.body.onmousedown = function (event) {	
		    if(!event) event = window.event;
			x0 = event.clientX;
			drag = true;
		}
		document.body.onmousemove = function (event) {
			
			if(drag) {
				if(!event) event = window.event;
				var x = event.clientX;
				document.getElementById("test").style.marginLeft =  x - x0 + " px";
			}
		}
		document.body.onmouseup = function (event) {
			if(!event) event = window.event;
			x0 = 0;
			drag = false;
		}
	
	</script>
</body>

</html>

2011年12月02日 11:25
0 0

不过 var drag = false  这里少了个分号倒是真的，不过还是能跑的。。

2011年12月01日 22:30
0 0

引用
x0 = event.clientX;
这个对象应该不存在吧

你有跑过代码嚒 新建个文本 复制进去 文件名改成html 直接打开

x0怎么会没定义呢。。 
<script type="text/javascript">  
        var x0 =0 ;  
        var drag = false

2011年12月01日 22:29
0 0

那和我前面写的js修改css有区别嚒。。。只是改成鼠标事件而已 

<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: hidden;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
	
	<script type="text/javascript">
		var x0 =0 ;
		var drag = false

		document.body.onmousedown = function (event) {	
			x0 = event.clientX;
			drag = true;
		}
		document.body.onmousemove = function (event) {
			if(drag) {
				var x = event.clientX;
				document.getElementById("test").style.marginLeft =  x - x0 + " px";
			}
		}
		document.body.onmouseup = function (event) {
			x0 = 0;
			drag = false;
		}
	
	</script>
</body>

</html>

2011年11月30日 10:40
0 0

。。。。。
这个overflow不是应该用scroll嚒 这么会是hidden呢 

<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: scroll;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
</body>

</html>

2011年11月29日 20:16
0 0

我不知道你的拖动是咋实现的 不过试试用margin 

<html>
<head>
	<title>test</title>
</head>

<body>
    <div  style="width:200px;overflow: hidden;text-overflow:ellipsis;"> 
	<p id="test">
       abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
    </p>
	</div>
	
	<script type="text/javascript">
	    var i = 0;
		
		var intevalId = window.setInterval(function(){
					document.getElementById("test").style.marginLeft = -20 * i + " px";
					if(i == 30) {
						window.clearInterval(intevalId);
					}
					i++;
				}, 1000);
		
	
	</script>
</body>

</html>

2011年11月29日 16:15
0 0

我没试过 不知道你那边不全是啥意思。。。

要不把css里text-overflow:ellipsis;去掉？ 貌似这个属性表示超出部分省略号

2011年11月29日 15:10
0 0

这样？ 里面的div的position用absolute控制位置 

<div style="width: xx px;overflow: hidden;text-overflow:ellipsis;"> 
   <div style="width: xx px"><bean:write .....></div>
</div>

2011年11月29日 09:30
0 0

在text文字外面套一个div 移动的时候js控制显示的绝对位置？
不能全部显示应该是大小没有控制好吧

2011年11月28日 17:09

相关推荐

    图片移动不超出边界

    虽然没有给出具体的代码示例，但我们可以根据这个话题推测出一些通用的解决策略。 1. **边界检测**：在移动图片之前，我们需要知道图片的当前位置以及可移动区域的边界。通过比较图片的新位置和边界，可以判断是否...

    js+css_聚焦文本框显示可拖动日历

    总之，“js+css_聚焦文本框显示可拖动日历”是一种结合了JavaScript和CSS技术的交互设计，旨在提供一个方便用户输入日期的解决方案。通过监听文本框焦点、创建可拖动的日历以及利用CSS美化界面，这种设计可以显著...

    word字体显示不全及显示一半怎么回事？.docx

    解决办法是选中表格边框，当鼠标变为左右双箭头时，拖动调整行高和列宽，以确保所有文字都能完整显示。 3. **页面大小更改后字号适应性**： 将原本设计为A3页面的文档调整为A4页面时，若未相应调整字号，原有字号...

    用双缓存技术实现动态绘图解决闪问题

    本话题主要探讨了如何利用双缓存技术来解决动态绘图时出现的闪烁问题，并且介绍了如何创建一个具有CHILD风格的透明无边框子窗口，使得在拖动过程中子窗口不会超出主窗口边界，同时保持实时的鼠标显示状态。...

    解决Echarts2竖直datazoom滑动后显示数据不全的问题

    将这个值调小，例如设置为4，可以使得dataZoom滑块变得更窄，从而在滑动时留出更多的空间来显示数据点，避免数据被遮挡。这样，即使在经过滑动操作后，图表的边界数据也能得到完整的展示。 不过，解决数据不全问题...

    修改VMware下Ubuntu界面分辨率过高问题

    VMware 下 Ubuntu 界面分辨率过高问题解决方法 在虚拟机中安装 Ubuntu 后，登录界面的分辨率一直...通过修改 xorg.conf 文件和鼠标配置文件，可以解决 VMware 下 Ubuntu 界面分辨率过高问题和鼠标滚轮不能使用的问题。

    AJAX首页布局拖动源代码

    AJAX首页布局拖动源代码是一种先进的网页设计技术，它允许用户在不刷新整个页面的情况下，通过异步通信与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，使得首页布局可以根据用户的需求进行动态...

    director技巧

    4. 在滑动块精灵上添加行为`slider on mark`，该行为负责处理鼠标拖动、滑动条滚动以及图文同步滚动。编写相应的Lingo代码，例如在`exitframe`事件中检测鼠标状态并更新滑块位置，同时保持滑块在滑动条内的限制。 ...

    可自动播放、拖动的js图片展示效果 类似土豆网.zip

    6. **图片拖动**：实现图片拖动功能需要捕捉用户的鼠标或触摸移动，更新图片的位置，并确保拖动过程中图片不会超出容器范围。 7. **响应式设计**：考虑到不同设备的屏幕尺寸和触摸支持，良好的前端代码会采用响应式...

    WPS让文字在两个文本框内自由滑动.docx

    - 当文本框被激活并显示调整手柄时，用鼠标拖动这些手柄来调整文本框的大小。 #### 三、设置文本框链接 1. **创建文本框链接**： - 在第一个文本框中输入内容（也可复制粘贴）。 - 当输入的内容超出文本框范围...

    简单拼图游戏 StretchBlt

    《简单拼图游戏 StretchBlt》是一款基于Windows操作系统平台的小型图形化应用程序，它通过将一张图片分割成多个部分，并将这些部分显示在Static控件上，为用户提供了一个互动式的拼图体验。在这个游戏中，用户可以...

    MFC 画图程序-橡皮线 圆 直线 矩形 画板有界 画板无界

    在 MFC 画图程序中，`橡皮线`（擦除线条）是通过在鼠标拖动时覆盖现有图形来实现的。这通常涉及到重载 `OnDraw` 函数，在这里我们可以使用 GDI (Graphics Device Interface) 来绘制线条，并在需要时擦除部分图形。...

    vue中解决拖拽改变存在iframe的div大小时卡顿问题

    这主要是由于iframe在拖动过程中对鼠标事件的处理，尤其是在拖动速度较快时，可能导致鼠标移动超出拖拽范围，进入iframe，触发iframe内容的加载，从而引起卡顿。 为了解决这个问题，我们可以采用一种策略：在拖动时...

    非常好用非常实用的截图软件

    只需通过鼠标拖动或精确调整，就能选取想要截取的屏幕部分。 2. **全屏截屏**：全屏截图则能够捕获显示器上所有的内容，适用于需要展示整体界面或者记录整个网页的情况。通常只需要一个快捷键组合，如Ctrl + Print ...

    自制滚动条

    首先，我们需要理解滚动条的基本组成：通常包括两个部分——一个可拖动的滑块和一个表示整个内容范围的轨道。滚动条的工作原理是通过改变滑块的位置来显示内容的不同部分。在AS3中，我们可以创建两个精灵（Sprite）...

    KODExplorer 芒果云-资源管理器

    - 编辑器选中优化 选择鼠标到窗口外事件处理 ####fix bug:（bug解决和程序优化） - backspace后退截获浏览器事件,作为后退前一次访问的文件夹; - 搜索首字母不匹配问题 - 弹出层中的弹出层关闭，父窗口失去焦点...

    拼图小游戏

    当所有拼图块位置正确时，游戏胜利，此时可以弹出对话框或显示相应的动画效果。 尽管这个拼图游戏已经基本实现，但描述中提到的小bug可能会影响用户体验。例如，拼图块可能会超出边界，或者拖动过程中出现闪烁。...

    抚顺某石化公司系统功能描述与操作.docx

    - 通过鼠标拖动位号值到趋势图图标上，可以查看位号的趋势图。 ### 4. 常见故障排除 - 该部分文档将介绍一些常见的问题及解决方法，以便用户能够快速定位问题并采取相应的解决措施。 ### 结论 本文档详细介绍了...

    qt Graphics View的认识及应用

    - **剪裁（Clipping）**：Graphics Item可以被剪裁到指定的区域，确保超出该区域的部分不显示。 - **层次结构（Item Hierarchy）**：Graphics Items可以嵌套形成层次结构，子项会随父项一起移动和旋转，方便构建...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics