html 滑块拖动的问题

html 滑块拖动的问题,第1张

鼠标拖动是用js写的,主要用onmousedown onmousemove onmouseup 事件。在相应的事件中进行js *** 作。

细节:你说的问题其实主要看是否对鼠标有限制。如果限制了,鼠标出浏览器就不能 *** 作。

布局

<div id="con">

<ul id="tags">

<li class="selectTag"><a >标签一</a></li>

<li><a>标签二</a></li>

<li><a>自适应宽度的标签</a></li>

<li><a>自适应宽度的标签自适应宽度的</a></li>

<li><a>自适应宽度的标签</a></li>

</ul>

<div id="tagContent">

<div class="tagContent selectTag">第一个标签的内容</div>

<div class="tagContent">第二个标签的内容</div>

<div class="tagContent">第三个标签的内容</div>

<div class="tagContent">第4个标签的内容</div>

<div class="tagContent">第5个标签的内容</div>

</div>

</div>

JQ.

<script type="text/javascript">

$(function () {

$("#tags >li").bind("click", function () {

$(this).addClass("selectTag")

var index = $(this).index()

$("#tags >li").each(function (i) {if (i != index) { $(this).removeClass("selectTag")}})

$("#tagContent >div").each(function (i) {

if (i == index) { $(this).show().addClass("selectTag")}

else {$(this).hide().removeClass("selectTag")}

})

})

})

</script>

自己添加个JQ库就行了。样式自己调整。估计你样式问题

<html>

<head>

<title>层自动滚动到最低端</title>

<style type="text/css">

.test{

width:300px

height:80px

border:#eee solid 1px

overflow-x:hidden

overflow-y:scroll

}

</style>

</head>

<body>

<BODY onload="var t = document.getElementById('test')t.scrollTop = t.scrollHeight">

<div id="test" class="test">

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

是否滚动到最底端?

</div>

</body>

</html>这个是DIV类型的。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/11500445.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存