jS事件之网站常用效果汇总
下拉菜单
<!--简单的设置了样式，方便起见，将style和script写到同一个文档，着重练习事件基础-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul {
list-style: none;
}
body{
margin:20px auto;
}
.ul>li {
float: left;
width:150px;
height:35px;
line-height:35px;
background:mediumaquamarine;
position:relative;
}
#nav div{
background:bisque;
position:absolute;
left:0px;
top:35px;
width:150px;
display:none;
}
</style>
</head>
<body>
<div id="nav">
<ul class="ul">
<li onmouseover="show('div1')" onmouseout="hide('div1')">下拉菜单
<div id="div1">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
<li onmouseover="show('div2')" onmouseout="hide('div2')">下拉菜单
<div id="div2">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
<li onmouseover="show('div3')" onmouseout="hide('div3')">下拉菜单
<div id="div3">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
<li onmouseover="show('div4')" onmouseout="hide('div4')">下拉菜单
<div id="div4">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
</ul>
</div>
<script>
function show(id){
document.getElementById(id).style.display="block";
}
function hide(id){
document.getElementById(id).style.display="none";
}
</script>
</body>
</html>表格随机转换
<!--style样式可随己自行设置-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格随机转换</title>
<style>
* {
padding: 0px;
margin: 0px;
}
td {
width: 100px;
height: 30px;
border: 1px solid darkblue;
}
</style>
</head>
<body>
<table>
<tr style="background:pink">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var str = ["coral", "chartreuse", "cornflowerblue", "aqua", "antiquewhite", "purple", "white", "black"];
window.onload = function() {
var tr = document.getElementsByTagName("td");
var colo = parseInt(Math.random() * str.length);
for(var i = 1; i < tr.length; i++) {
if(i % 2 != 0) {
tr[i].style.background = str[colo];
} else {
var colo = parseInt(Math.random() * str.length);
tr[i].style.background = str[colo];
}
}
for(var i = 0; i < tr.length; i++) {
tr[i].onmouseover = function() {
bgc = this.style.background;
this.style.background ="green";
}
}
for(var i = 0; i < tr.length; i++) {
tr[i].onmouseout = function() {
this.style.background = bgc;
}
}
}
</script>
</body>
</html>咨询缓慢弹框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 500px;
height: 300px;
position: fixed;
right: 0;
background: pink;
}
#box h2 {
height: 50px;
line-height: 50px;
position: relative;
background: darkturquoise;
}
#box h2 p {
width:50px;
height:50px;
position: absolute;
right: 0;
top: 0;
}
textarea{
margin:2px 40px 0;
}
input{
width:100px;
height:50px;
color:#000;
font-weight:bold;
margin:0 0 0 250px;
background:yellow;
}
</style>
</head>
<body>
<div id="box" style="bottom:-300px">
<h2>请咨询<p onclick="mp()">×</p></h2>
<textarea cols="30px" rows="7px">
</textarea>
<input type="button" value="提交">
</div>
<script>
var v;
var t;
var add = -300;
window.onload = function() {
v = document.getElementById("box");
t = setInterval("ups()", 10);
}
function ups() {
add += 3;
v.style.bottom = add + "px";
if(parseInt(v.style.bottom) >= 0) {
clearInterval(t);
}
}
function mp(){
v.style.display="none";
}
</script>
</body>
</html>鼠标经过改变图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>car鼠标经过改变图片路径</title>
<style>
#box img {
width: 300px;
height: 300px;
}
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="box">
<img id="imgb" src="img/1.png">
</div>
<img src="img/1.png" onmouseover="f(1)"/>
<img src="img/2.png" onmouseover="f(2)" />
<img src="img/3.png" onmouseover="f(3)" />
<script>
function f(n) {
var mg = document.getElementById("imgb");
mg.src = "img/" + n + ".png";
}
</script>
</body>
</html>树形菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形菜单</title>
<style>
* {
padding: 0px;
margin: 0px;
}
body {
width: 450px;
margin: 0 auto;
}
.mybox {
padding: 0 0 0 25px;
border: 2px solid yellow;
}
h2 {
width: 400px;
height: 50px;
line-height: 50px;
background: pink;
}
span {
float: left;
margin: 0 10px 0;
}
.box {
width: 400px;
height: 300px;
background: greenyellow;
display: none;
}
</style>
</head>
<body>
<div class="mybox">
<h2 onclick="fun(0)"><span class="mspan">+</span>我是主体栏目</h2>
<div class="box">
</div>
<h2 onclick="fun(1)"><span class="mspan">+</span>我是主体栏目</h2>
<div class="box">
</div>
<h2 onclick="fun(2)"><span class="mspan">+</span>我是主体栏目</h2>
<div class="box">
</div>
</div>
<script>
function fun(n) {
var box = document.getElementsByClassName("box");
var mspan = document.getElementsByClassName("mspan");
if(box[n].style.display == "none") {
box[n].style.display = "block";
mspan[n].innerHTML="-"
} else {
box[n].style.display = "none";
mspan[n].innerHTML="+"
}
}
</script>
</body>
</html>隔5秒跳转页面
<!--秒数可更改-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>隔五秒跳转页面</title>
</head>
<body>
<p id="mp">5秒后跳转新页面
</p>
<script>
var i = 5;
var t;
window.onload = function() {
t = setInterval("fun()", 1000);
}
function fun() {
document.getElementById("mp").innerHTML = (i--) + "秒后跳转新页面";
if(i == 0) {
clearInterval(t);
location.href="hello.html";
}
}
</script>
</body>
</html>文字域输入字数控制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字域输入字数控制</title>
</head>
<body>
<textarea name="" id="conte" cols="30" rows="10" onkeyup="fun()"></textarea>
<span id="count">还能输入10个字</span>
<script>
function fun(){
var t = document.getElementById("conte").value.length;
document.getElementById("count").innerHTML="还能输入"+(11-t)+"个字";
document.getElementById("conte").value=document.getElementById("conte").value.substr(0,10);
}
</script>
</body>
</html>文字无缝滚动，鼠标放上去停止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
#box {
height: 50px;
overflow-y: hidden;
}
</style>
<!--跑马灯-->
<!--<marquee direction="up">
adfasdfasdf
adfasdfasdf
</marquee>-->
<div id="box" onmouseover="stp()" onmouseout="beg()">
<ol id="ol1">
<li>1文字无缝滚动</li>
<li>2文字无缝滚动</li>
<li>3文字无缝滚动</li>
<li>4文字无缝滚动</li>
<li>5文字无缝滚动</li>
<li>6文字无缝滚动</li>
<li>7文字无缝滚动</li>
</ol>
<ol id="ol2"></ol>
</div>
<script>
t = setInterval("myScroll()", 100);
var box = document.getElementById("box");
var ol1 = document.getElementById("ol1");
var ol2 = document.getElementById("ol2");
ol2.innerHTML = ol1.innerHTML;
function myScroll() {
if(box.scrollTop <= ol1.offsetHeight) {
box.scrollTop++;
} else {
box.scrollTop = 0;
}
}
function stp() {
clearInterval(t);
}
function beg() {
t = setInterval("myScroll()", 100);
}
</script>
</body>
</html>
<!--颜色内容自行更改-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
float: left;
height: 35px;
width: 100px;
text-align:center;
line-height: 35px;
background: mediumaquamarine;
}
li:hover{
background:bisque;
}
#box div {
clear: both;
height: 200px;
width: 400px;
background: bisque;
display: none;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li onmouseover="showDiv(0)">nav_1</li>
<li onmouseover="showDiv(1)">nav_2</li>
<li onmouseover="showDiv(2)">nav_3</li>
<li onmouseover="showDiv(3)">nav_3</li>
</ul>
</div>
<div id="box">
<div style="display:block">box_1</div>
<div>box_2</div>
<div>box_3</div>
<div>box_4</div>
</div>
<script>
function showDiv(n) {
var dv = document.getElementById("box").getElementsByTagName("div");
for(var j = 0; j < dv.length; j++) {
dv[j].style.display = "none";
}
dv[n].style.display = "block";
if(n % 2 == 0) {
dv[n].style.background = "##FFE4C4";
}
}
</script>
</body>
</html>对联广告
可回顶部， 点×进行关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px
}
#box {
width: 200px;
height: 250px;
background: pink;
/* position:fixed;
top:10px;
left:20px;
*/
position: absolute;
top: 30px;
left: 20px;
}
span {
position: absolute;
right: 0px;
bottom: 0px;
}
#box1{
position: fixed;
right: 2px;
bottom: 3px;
color:#fff;
background:mediumaquamarine;
}
</style>
</head>
<body>
<p>顶部顶部顶部</p>
<div id="box">
<span onclick="cs()">×</span>
</div>
<div id="box1" onclick="totop()">
回顶部
</div>
<script>
function funn(){
history.back(1);
}
// window.onunload = function() {
// alert(document.getEl/**/ementById("box").innerHTML);
// window.open("文字无缝滚动.html", "", "widht=200,height=200")
// }
window.onscroll = function() {
var th = document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById("box").style.top = th + 30 + "px";
}
function cs() {
document.getElementById("box").style.display = "none";
}
function totop(){
document.body.scrollTop =0;
document.documentElement.scrollTop=0;
}
/*window.onresize=function(){
alert("alkert");
}*/
</script>
</body>
</html>漂浮广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
#box{
background:bisque;
position:absolute;
left:0;
top:0
}
</style>
<div id="box" style="width:150px;height:150px" onmouseover="stop()" onmouseout="m()">
<span onclick="clo()">×</span>
<!--<img src="img/5.jpg" width="150px", height="150"/>-->
</div>
<script>
window.onload=function(){
t = setInterval("move()",20);
}
function m(){
clearInterval(t);
t = setInterval("move()",20);
}
var x =0;
var y = 0;
var step = 3;
var stepy=4;
function move(){
document.getElementById("box").style.left=x+"px";
document.getElementById("box").style.top=y+"px";
var wx = document.documentElement.clientWidth;
var wy = document.documentElement.clientHeight;
var bow =parseInt(document.getElementById("box").style.width);
var boh =parseInt(document.getElementById("box").style.height);
x+=step;
y+=stepy;
if(x>=(wx-bow)||x<0){
step*=-1;
}
if(y>=(wy-boh)||y<0){
stepy*=-1;
}
console.log(y);
}
function stop(){
clearInterval(t);
}
function clo(){
var b=document.getElementById("box");
b.style.display="none";
}
</script>
</body>
</html>
打字效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打字效果</title>
</head>
<body>
<div id="mydiv"></div>
<script>
var str = "我是一只小小";
var i = 1;
window.onload = function() {
setInterval("wrDiv()",200);
}
function wrDiv(){
document.getElementById("mydiv").innerHTML=str.substr(0,i);
i++;
if(i>str.length){
i=0;
}
}
</script>
</body>
</html>倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
input[type=button]:hover{
outline:none;
background:mediumaquamarine;
}
</style>
</head>
<body>
<p>输入一个分钟数，进行倒计时</p>
<input type="number" id="num" />秒<br/>
<input type="button" value="开始" onclick="bg()" />
<input type="button" value="暂停" onclick="stop()" /><br/><br/><br/>
<input type="number" id="second" />分钟<br/>
<input type="text" id="no" /><br/>秒
<input type="button" value="开始" onclick="nobg()" />
<input type="button" value="暂停" onclick="nostop()" />
<br/><br/><br/>
<p id="myp">time</p>
<input type="button" value="开始" onclick="mystart()" />
<input type="button" value="暂停" onclick="mystop()" />
<script>
//------------------------------------------------------------
var n;
var m;
var t;
function bg() {
m = document.getElementById("num");
n = m.value;
t = setInterval("jsq()", 1000);
}
function stop() {
clearInterval(t);
}
function jsq() {
--n;
m.value = n;
if(n <= 0) {
stop();
m.value = "";
}
}
//------------------------------------------------------------
var notime;
var second;
var no;
function nobg() {
second = document.getElementById("second").value*60;
no = document.getElementById("no");
notime = setInterval("nojsq()", 1000);
}
function nostop() {
clearInterval(notime);
}
function nojsq() {
--second;
no.value = second;
if(second <= 0) {
nostop();
no.value = "";
}
}
//------------------------------------------------------------
var mm;
var s;
var tt;
function mystart(){
tt = setInterval("ms()",1000);
}
function ms(){
mm = document.getElementById("myp");
var s = new Date();
var y = s.getHours()+":"+s.getMinutes()+":"+s.getSeconds();
mm.innerHTML=y;
}
function mystop(){
clearInterval(tt);
}
</script>
</body>
</html>定时广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 1000px;
height: 1000px;
margin: 0 auto;
}
#g {
margin: 0 auto;
margin: 400px auto 0;
background: mediumaquamarine;
width: 300px;
height: 100px;
position: relative;
}
#mp {
position: absolute;
right: 0px;
bottom: 0px;
background:bisque;
font-size: 20px;
}
</style>
<div id="g">
<p id="mp" onclick="mp()">×</p>
</div>
<script>
var t ;
function mp() {
var n = document.getElementById("g");
n.style.display = "none";
clearInterval(t);
t = setInterval("view()",1000)
}
function view(){
var n = document.getElementById("g");
n.style.display = "block";
}
</script>
</body>
</html>进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
</head>
<body>
<style>
#div1 {
height: 30px;
width: 300px;
background: #000;
}
#mydiv {
height: 30px;
width: 10px;
background:pink;
}
input[type=button]:hover{
background:mediumaquamarine;
}
</style>
<div id="div1">
<div id="mydiv" style="width:10px">
</div>
</div>
<input type="button" onclick="fun()" value="开始" />
<p id="mp"></p>
<script>
var i = 10;
var t;
function fun() {
t = setInterval("jdt()", 100);
if(i ==300) {
clearInterval(t);
}
}
function jdt() {
var d = document.getElementById("mydiv");
d.style.width = i + 10 + "px";
i += 10;
document.getElementById("mp").innerHTML = i + "%";
if(i ==300) {
clearInterval(t);
}
}
</script>
</body>
</html>图片轮播
<!--图片自行设置-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
#box {
width: 600px;
height: 220px;
position: relative;
}
ul {
position: absolute;
top: 500px;
left: 30px;
}
img {
width: 400px;
height: 600px;
}
li {
width: 20px;
height: 20px;
display: inline-block;
list-style: none;
text-align: center;
color: #fff;
background: #f00;
border-radius: 50%;
font-weight: bold;
}
.over {
background: deepskyblue;
}
</style>
<div id="box">
<img src="img/1.jpg" id="img" />
<ul>
<li class="over" onmouseover="show(0)" onmouseout="go()">1</li>
<!--默认第一张赋值颜色-->
<li onmouseover="show(1)" onmouseout="go()">2</li>
<li onmouseover="show(2)" onmouseout="go()">3</li>
<li onmouseover="show(3)" onmouseout="go()">4</li>
<li onmouseover="show(4)" onmouseout="go()">5</li>
</ul>
</div>
<script>
var t = setInterval("imgL()", 1000);
var arr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
var n = 1;
var list;
function imgL() {
document.getElementById("img").src = arr[n];
list = document.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
list[i].className = "";
}
list[n].className = "over";
n++;
if(n >= arr.length) {
n = 0;
}
}
function show(v) {
clearInterval(t);
document.getElementById("img").src = arr[v];
for(var i = 0; i < list.length; i++) {
list[i].className = "";
}
list[v].className = "over";
n = v;
if(v==4){
n = 0;
}else{
n = v+1;
}
}
function go() {
t = setInterval("imgL()", 1000);
}
</script>
</body>
</html>
.
百度百科右侧js效果
假设页面上有有几个内容块：
<div id="content1"> <h3>家庭情况</h3> <div>...</div> </div> <div id="content2"> <h3>人物评价</h3> <div>...</div> </div> <div id="content3"> <h3>作品</h3> <div>...</div> </div>控制逻辑 ：varcontent1 = document.getElementById('content1');varcontent2 = document.getElementById('content2');
var content3 = document.getElementById('content3'); window.addEventListener('scroll', function() { // 拿到滚动位置 var scrollY = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; // 计算悬浮层高亮 if (content3.getBoundingClientRect().top > scrollY) { // 改变右侧悬浮层高亮content3标题 } else if (content2.getBoundingClientRect().top > scrollY) { // 改变右侧悬浮层高亮content2标题 } else if (content1.getBoundingClientRect().top > scrollY) { // 改变右侧悬浮层高亮content1标题 } }, false);
本人在学习javascript过程当中碰到过的网站常用效果，今天用js原生以及html+css把它实现了出来，希望能对大家有一些帮助。后续会上传一些用jquery写的网站常用效果，希望大家能够关注,谢谢。
你可记得洛杉矶凌晨四点的24号吗？
jS事件之网站常用效果汇总的更多相关文章
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js事件绑定细节说明
javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 非常实用的PHP常用函数汇总
这篇文章主要介绍了非常实用的PHP常用函数,汇总了加密解密.字符串操作.文件操作.SQL注入等函数的实例与用法说明,在PHP项目开发中非常具有实用价值,需要的朋友可以参考下 本文实例总结了一些在php ...
- AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)
AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...
- C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件
一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...
- javascript常用知识汇总
javascript这个语言庞大而复杂,我用了三年多了,还是皮毛都不会.从刚开始的jquery,到后来的es6,每天都在学习,每天都在忘记. 1.禁止手机虚拟键盘弹出 在开发适配手机的页面时,出现了这 ...
- 一文梳理JS事件
JavaScript与HTML的交互是通过事件进行的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间. 事件流 事件捕获 事件冒泡 事件处理程序 事件委托 1. 事件流 如果单机页面上的某个按钮, ...
随机推荐
- jboss [how to access the admin console]
However you have not yet added any users to be able to access the admin console. 进入%EAP_HOME%/bin 执行 ...
- golang坑1
:=比较方便,不过今天掉进了一个小坑 var ( foo *XXX ) func bar() { fmt.Println(foo.abc) } func main() { foo, err := XX ...
- [转]彻底征服Word 2007标题多级列表
[转]彻底征服Word 2007标题多级列表 用Word编写文档的人都知道,一篇长文档一般是需要分章节来划分段落的.在Word中也有对应的工具来完成这项任务,这就是多级列表.然而绝大多数使用Micro ...
- 平滑处理Smooth之图像预处理算法-OpenCV应用学习笔记三
大清早的我们就来做一个简单有趣的图像处理算法实现,作为对图像处理算法学习的开端吧.之所以有趣就在于笔者把算法处理的各个方式的处理效果拿出来做了对比,给你看到原图和各种处理后的图像你是否能够知道那幅图对 ...
- python 之初体验
python 关开python的介绍我这里就不解释了,这里贴出一个官方的介绍,供大家阅读 http://baike.baidu.com/link?url=U6LdVR-5RCI2TNsXzeALCcG ...
- 黑马程序员+ADO.Net基础(上)
---------------<a href="http://edu.csdn.net"target="blank">ASP.Net+Android ...
- Swift-ImageView响应点击事件
随着Swift语言的不断更新迭代,纯Swift语言编写的代码更加紧凑简单,结合StoryBorad的使用,使开发苹果APP的门槛降低了不少.个人也是比较推荐使用Interface Builder去生成 ...
- HTML5按钮的点击态问题
开始在网页上实现点击态是mousedown mouseup来实现但是手机HTML5实现点击态怎么就不可以了呢 经过查资料才知道手机浏览器来实现点击态是通过 touchstart touchend实现
- Mac OS X上编写 ASP.NET vNext 系列中断和再开声明
这个系列其实已经中断有一段时间了,主要是由两个原因: 第一是微软那边把以前的KRE改成了XRE,所以导致前两篇有点过时了. 第二是自己年前1月份被裁员,Mac的机器被回收,再加上忙于和公司扯皮和找工作 ...
- Blend 2015 教程 （三） 模板
前一篇讲述了一些基本样式的修改方法,并搭建了Style层的基本框架,本篇将进一步修改ListBox的样式. 1. 首先选中ListBox控件,在美工板导航栏中点击ListBox,选择 编辑其他模板-编 ...