问点小问题啊

franzhong 2012-04-20 04:23:03
<textarea>
<ul>
<li value=1>hello</li>
<li value=2>hello</li>
<li value=3>hello</li>
</ul>
</textarea>
谁能帮我简单美化一下写点css，现在显示都成问题

2:百度间乐盒左下角的上下条，点击能滑动
这部分应该叫什么？谁有个好看的demo

搜"上下滚滑栏"，结果为零，汗~
...全文
89 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
missgd152 2012-04-20
  • 打赏
  • 举报
 回复
<textarea>多行文本框中不能放HTML标签
franzhong 2012-04-20
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 的回复:]

那个flash

楼主 搜下 js滚动条
HTML code

<!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……
[/Quote]
不错，这效果可以，不用div卡着textarea了
001007009 2012-04-20
  • 打赏
  • 举报
 回复
那个flash

楼主 搜下 js滚动条


<!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=gbk" />

<title>模拟滚动条</title>

</head>

<body>

<div style="width:600px; height:500px; position:relative;">

	<div style="width:550px; height:500px; background:#CCCCCC; overflow:hidden; position:absolute; left:0; top:0; word-wrap:break-word;" class="aa" id="test_container">

		<div style="position:absolute; top:0;" id="test_shower">

			<div>一一一一一一一一一一</div>

			<div>二二二二二二二二二二</div>

			<div>三三三三三三三三三三</div>

			<div>四四四四四四四四四四</div>

			<div>五五五五五五五五五五</div>

			<div>六六六六六六六六六六</div>

			<div>七七七七七七七七七七</div>

			<div>八八八八八八八八八八</div>

			<div>九九九九九九九九九九</div>

			<div>十十十十十十十十十十</div>

			<div>一一一一一一一一一一</div>

			<div style="width:350px; height:300px; position:relative;">

				<div style="width:300px; height:300px; background:#CCCCCC; overflow:hidden; position:absolute; left:0; top:0; word-wrap:break-word;" class="aa" id="ins_container">

					<div style="position:absolute; top:0;" id="ins_shower">

						<div>一一一一一</div>

						<div>二二二二二</div>

						<div>三三三三三</div>

						<div>四四四四四</div>

						<div>五五五五五</div>

						<div>六六六六六</div>

						<div>七七七七七</div>

						<div>八八八八八</div>

						<div>九九九九九</div>

						<div>十十十十十</div>

						<div>一一一一一</div>

						<div>二二二二二</div>

						<div>三三三三三</div>

						<div>四四四四四</div>

						<div>五五五五五</div>

						<div>六六六六六</div>

						<div>七七七七七</div>

						<div>八八八八八</div>

						<div>九九九九九</div>

						<div>十十十十十</div>

					</div>

				</div>

				<div style="position:absolute; left:300px; top:0; width:20px; height:300px; -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;" id="ins_scroller">

					<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; top:0;" id="ins_scroll_up"></div>

					<div style="position:absolute; width:20px; height:100px; background:#000000; left:0; top:20px;" id="ins_scroll_bar"></div>

					<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; bottom:0;" id="ins_scroll_down"></div>

				</div>

			</div>

			

			<div>二二二二二二二二二二</div>

			<div>三三三三三三三三三三</div>

			<div>四四四四四四四四四四</div>

			<div>五五五五五五五五五五</div>

			<div>六六六六六六六六六六</div>

			<div>七七七七七七七七七七</div>

			<div>八八八八八八八八八八</div>

			<div>九九九九九九九九九九</div>

			<div>十十十十十十十十十十</div>

		</div>

	</div>

	<div style="position:absolute; left:550px; top:0; width:20px; height:500px; -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;" id="test_scroller">

		<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; top:0;" id="test_scroll_up"></div>

		<div style="position:absolute; width:20px; height:100px; background:#000000; left:0; top:20px;" id="test_scroll_bar"></div>

		<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; bottom:0;" id="test_scroll_down"></div>

	</div>

</div>

<script type="text/javascript">

var now_wheel = null;

var scroller = function(a){

	var self = this;

	var timer;

	this.container = document.getElementById(a+"_container"); // 容器

	this.shower = document.getElementById(a+"_shower"); // 显示的内容

	this.scroller = document.getElementById(a+"_scroller"); // 滚动条容器

	this.scroll_up = document.getElementById(a+"_scroll_up"); // 上翻按钮

	this.scroll_down = document.getElementById(a+"_scroll_down"); // 下翻按钮

	this.scroll_bar = document.getElementById(a+"_scroll_bar"); // 滑动块

	this.clearselect = window.getSelection ? function(){ window.getSelection().removeAllRanges(); } : function(){ document.selection.empty(); };

	this.is_bottom = function(){ // 检测是不是位于底部了

		if (self.shower.offsetTop <= self.container.offsetHeight-self.shower.offsetHeight){

			return true;

		}

		return false;

	}

	this.resetright = function(){

		var a = self.shower.offsetTop / (self.shower.offsetHeight - self.container.offsetHeight);

		var b = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight - self.scroll_up.offsetHeight;

		var c = self.scroll_up.offsetHeight + (0 - b * a);

		self.scroll_bar.style.top = c + "px";

	}

	this.resetleft = function(){

		var a = (self.scroll_bar.offsetTop - self.scroll_up.offsetHeight) / (self.scroller.offsetHeight - self.scroll_up.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight);

		var b = self.shower.offsetHeight - self.container.offsetHeight;

		var c = 0 - (b * a);

		self.shower.style.top = c + "px";

	}

	this.move=function(a){

		if (self.shower.offsetTop+a <= 0 && self.shower.offsetTop+a >= self.container.offsetHeight-self.shower.offsetHeight){

			self.shower.style.top = (self.shower.offsetTop+a)+"px";

		}else if (self.shower.offsetTop+a > 0){

			self.shower.style.top = 0+"px";

		}else if (self.shower.offsetTop+a < self.container.offsetHeight-self.shower.offsetHeight){

			self.shower.style.top = self.container.offsetHeight-self.shower.offsetHeight+"px";

		}

		self.resetright();

	}

	this.upper = function(){

		self.clear();

		timer = window.setInterval(function(){self.move(2);}, 5);

	}

	this.downer = function(){

		self.clear();

		timer = window.setInterval(function(){self.move(-2);}, 5);

	}

	this.clear = function(){

		window.clearInterval(timer);

	}

	this.test_bar = function(){

		if (self.container.offsetHeight < self.shower.offsetHeight){

			self.scroller.style.display = "block";

		}else {

			self.scroller.style.display = "none";

		}

	}

	this.gotobottom = function(){

		var a = (self.shower.offsetHeight > self.container.offsetHeight) ? self.container.offsetHeight - self.shower.offsetHeight : 0;

		self.shower.style.top = a + "px";

		self.test_bar();

		self.resetright();

	}

	this.wheel = function(){

		if (now_wheel == null) now_wheel =a;

		if (now_wheel == a){

			var e=arguments[0]||window.event;

			var act = e.wheelDelta ? e.wheelDelta/120 : (0 -e.detail/3);

			self.clear();

			self.move(80*act);

			try{ e.preventDefault();}

			catch(e){}

		}

		window.setTimeout(function(){self.end_wheel();}, 1);

		return false;

	}

	this.end_wheel = function(){

		now_wheel = null;

	}

	this.barmove = function(){

		// 记录当时鼠标的位置与

		self.clearselect;

		var mover = this;

		this.can_move_top = self.scroll_bar.offsetTop - self.scroll_up.offsetHeight; // 这个滚动条上方的可移动距离

		this.can_move_bottom = self.scroller.offsetHeight - self.scroll_bar.offsetTop - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight; // 这个滚动条下方的可移动距离

		this.e=arguments[0]||window.event;

		this.starts = this.e.clientY;

		this.starttop = self.scroll_bar.offsetTop;

		this.drag = function(){

			this.e=arguments[0]||window.event;

			this.ends = this.e.clientY;

			this.dis = this.ends - mover.starts;

			if (this.dis < (0-mover.can_move_top)) this.dis = 0-mover.can_move_top;

			if (this.dis > mover.can_move_bottom) this.dis = mover.can_move_bottom;

			self.scroll_bar.style.top = (mover.starttop + this.dis) + "px";

			self.resetleft();

			self.clearselect;

		}

		this.cleardrag = function(){

			if (window.removeEventListener){

				document.removeEventListener("mousemove", mover.drag, true);

			}else {

				document.detachEvent("onmousemove", mover.drag);

			}

			self.clearselect;

		}

		this.add_listener = function(){

			if (window.addEventListener){

				document.addEventListener("mousemove", mover.drag, true);

				document.addEventListener("mouseup", mover.cleardrag, true);

			}else {

				document.attachEvent("onmousemove", mover.drag);

				document.attachEvent("onmouseup", mover.cleardrag);

			}

		}

		this.add_listener();

	}

	this.outbar = function(){

		var e=arguments[0]||window.event;

		var obj = e.srcElement ? e.srcElement : e.target;

		if (obj.id == self.scroller.id){

			var y = e.offsetY || e.layerY;

			var new_top = y - 0.5 * self.scroll_bar.offsetHeight;

			if (y - self.scroll_up.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroll_up.offsetHeight;

			if (self.scroller.offsetHeight - y - self.scroll_down.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight;

			self.scroll_bar.style.top = new_top + "px";

			self.resetleft();

		}

	}

	this.scroll_bar.ondrag=function(){return false;}

	this.scroll_bar.oncontextmenu=function(){return false;} 

	this.scroll_bar.onselectstart=function(){return false;}

	if (window.addEventListener){

		this.scroll_up.addEventListener("mousedown", this.upper, false);

		this.scroll_down.addEventListener("mousedown", this.downer, false);

		this.scroll_bar.addEventListener("mousedown", this.barmove, false);

		this.scroller.addEventListener("mousedown", this.outbar, false);

		this.container.parentNode.addEventListener("DOMMouseScroll", this.wheel, false);

		this.container.parentNode.addEventListener("mousewheel", this.wheel, false);

		document.addEventListener("mouseup", this.clear, false);

	}else {

		this.scroll_up.attachEvent("onmousedown", this.upper);

		this.scroll_down.attachEvent("onmousedown", this.downer);

		this.scroll_bar.attachEvent("onmousedown", this.barmove);

		this.scroller.attachEvent("onmousedown", this.outbar);

		this.container.parentNode.attachEvent("onmousewheel", this.wheel);

		document.attachEvent("onmouseup", this.clear);

		try{ window.event.cancelBubble=true;}

		catch(e){}

	}

}

var te = new scroller("test");

var ins = new scroller("ins");

</script>

</body>

</html>
三石-gary 2012-04-20
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 的回复:]

引用 1 楼 的回复:

想怎么显示啊。。

百度音乐盒mp3.baidu.com
左下部分点两个就明白效果了
[/Quote]
麻烦你把问题描述清楚。。或者截个图。。。
franzhong 2012-04-20
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

想怎么显示啊。。
[/Quote]
百度音乐盒mp3.baidu.com
左下部分点两个就明白效果了
三石-gary 2012-04-20
  • 打赏
  • 举报
 回复
想怎么显示啊。。
Excel函数100问
初学Excel函数你是否总有一种无力感?... 本次课程结合职场工作中遇到的问题，整理100问用函数来帮助大家学习Excel函数的这些痛点。熟练掌握Excel函数的他，总是几分钟就能完成，别人倒腾1天的工作量。
mac版小达人点读包怎么安装_一分钟搞定小达人点读笔点读包安装问题！
有朋友问，买点读书就是为了拿到就能点读，为什么点不了？不是直接点读嘛！怎么不能点？俗话说做饭要先有米，不然巧妇难为无米之炊，而使用小达人点读笔要先安装点读包。即便是直接点读类图书也是要安装点读包的！~...
小爱音箱提示“系统出现点问题，请检查配置。。。“采坑之旅
起因：用着好好的突然就不好使了，语音问小爱音箱提示“系统遇到点问题，请检查配置或者稍后重试” 到目前为止，试了好几个方法，记录一下。 1、首先长按话筒键10s，恢复出厂设置（卒。。） 2、改换路由器（卒。...
当面试官说“你还有什么问题想问的”,你该如何回答？
我们在面试的经常会听到面试官说一些套话，比如“今天的面试就到这里了，回去等通知吧”，“你还有什么问题想问的”，“如果这题不会，我们也可以换一道”等等还有很多，今天我们要说的是基本面试都会遇到的一句话...
计算机考研复试面试常问问题 数据结构篇（上）
在复习过程中，我用心查阅并整理了在考研复试面试中可能问到的大部分问题，并分点整理了答案，可以直接理解背诵并加上自己的语言润色!极力推荐打印下来看，效率更高！ 声明：一些边边角角的没有收集，毕竟是考研...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章