软件学堂

网游分类软件分类

JS代码实现数字选中后放大效果

2012-11-06 来源:网络

【实例名称】

JS代码实现数字选中后放大效果

【实例描述】

在Web页面中分页时,为了突出显示用户选择的页数,通常会放大选中页的页码。本例学习如何放大被选中的数字。

【实例代码】

 <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>无标题页-学无忧(www.xue51.com)</title>  <style type="text/css">   /* 定义ul根级目录项的样式*/   ul#menu{    list-style-type: none;    margin: 50px;    width:200px;    float: left;    display: inline;    clear: both;   }  /* 定义ul根级目录下li项的样式*/   ul#menu li{    float: left;    display: inline;    width:20px;    height: 20px;    margin: 2px;   }  /* 定义ul根级目录下li项中链接的样式*/   ul#menu li a {    text-decoration: none;    display: block;    width:20px;    height:20px;    border:1px red solid;    background-color: White;    line-height: 20px;    font-size: 12px;    text-align: center;   }  /* 定义ul根级目录下li项中鼠标滑过链接时的样式*/   ul#menu li a:hover{   position: absolute;   width:40px;   height: 40px;   line-height: 40px;   font-size: 32px;   z-index:100;   margin: -10px 0 0 -10px;   }   /* 定义ul根级目录下鼠标滑过li时的样式*/   ul#menu li:hover + li a{   position: absolute;   width:30px;   height: 30px;   line-height: 30px;   font-size: 24px;   z-index:99;   margin: -5px 0 0 -5px;   }  </style> </head> <body> <ul id="menu">  <li><a href="#" title="big"><span>1</span></a></li>  <li><a href="#" title="big"><span>2</span></a></li>  <li><a href="#" title="big"><span>3</span></a></li>  <li><a href="#" title="big"><span>4</span></a></li>  <li><a href="#" title="big"><span>5</span></a></li>  <li><a href="#" title="big"><span>6</span></a></li>  <li><a href="#" title="big"><span>7</span></a></li> </ul> </body> </html>

 

 

【运行效果】

 数字选中后放大运行效果

【难点剖析】

本例主要通过css样式表实现数字项的放大和缩小,其中“ul#menu li a:hover”样式定义鼠标滑过时数字的样式,通过更改当前数字的大小和4个边距,最终实现选中数字的放大效果。

【源码下载】

为了JS代码的准确性,请点击:数字选中后放大 进行本实例源码下载 

上一篇:JS删除数组中指定元素
下一篇:JS代码实现统计字符数的方法

相关文章