CSS Spite技术性：也便是CSS小精灵技术性，具体上CSS的小精灵便是照片里的1个个的标志元素，这些标志可使按钮、标识和logo这些。许多网站中都运用了该技术性，可合理降低传送恳求次数，所必须的标志汇总在1张照片中，1次免费下载便可全部网页页面运用
下列示例关键是CSS小精灵技术性的运用，立即Po编码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<title>酷狗电台目录设计方案</title>
<style>
#frm{
margin:0;
padding:0;
list-style-type: none;
width: 500px;
border:1px solid #000;
overflow: hidden;
}
#frm *{
margin:0;
padding: 0;
font-size: 12px;
}
#frm li{
padding:4px 0;
width: 47%;
float: left;
margin:5px 15px 5px 0;
cursor: pointer;
}
#frm li span{
color:#999;
position: relative;
}
#frm li .d{
width: 38px;
height: 38px;
float: left;
margin:0px 12px 6px 0;
background-image: url(img/spite2.jpg);
position: relative;
}
#frm li .cont{
position: relative;
height: 37px;
overflow: hidden;
}
.cont div{
margin:5px 0 5px 0;
}
.d div{
position: absolute;
width: 100%;
height: 100%;
}
.d .img,.d .play{
background-image: url(img/spite2.jpg);
}
.l1 .d .img{
background-position: 38px 0;
}
.l2 .d .img{
background-position: 76px 0;
}
.l3 .d .img{
background-position: 114px 0;
}
.l4 .d .img{
background-position: 152px 0;
}
.l5 .d .img{
background-position: 190px 0;
}
.l6 .d .img{
background-position: 228px 0;
}
.l7 .d .img{
background-position: 266px 0;
}
.l8 .d .img{
background-position: 304px 0;
}
.l9 .d .img{
background-position: 342px 0;
}
.ll .d .img{
background-position: 380px 0;
}
.d .mask,.d .play{
visibility: hidden;
}
.choose .d{
background-position: 38px 0;
outline: 1px solid rgb(233,243,250);
}
.choose .d .mask{
background-color: #000;
filter:alpha(Opacity=50);
opacity: 0.5;
height: 32px;
width: 32px;
top:3px;
left: 3px;
visibility: visible;
}
.choose .d .play{
background-position: 418px 0;
visibility: visible;
}
.choose .cont div{
font-weight: bold;
color:rgb(0,155,250);
}
</style>
<script>
function mouseoverhandle(obj){
obj.className += ' choose';
}
function mouseouthandle(obj){
obj.className = obj.className.substring(0,2);
}
</script>
</head>
<body>
<ul id="frm">
<li class="l1" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>酷狗热歌</div>
<span href="#">徐朗 - 小夜曲</span>
</div>
</li>
<li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>DJ热碟</div>
<span href="#">曾春年 - 最幸福快乐的人</span>
</div>
</li>
<li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>互联网红歌</div>
<span href="#">徐志强 - 想你的情况下</span>
</div>
</li>
<li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>新歌</div>
<span href="#">孙俪 - 漂亮数据信号</span>
</div>
</li>
<li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>經典</div>
<span href="#">游鸿明 - 寻你</span>
</div>
</li>
<li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>复古粤语</div>
<span href="#">陈慧娴 - 人生何处不相逢</span>
</div>
</li>
<li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>钢琴</div>
<span href="#">July - My Soul</span>
</div>
</li>
<li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>KTV必点</div>
<span href="#">蔡健雅 - 无底洞</span>
</div>
</li>
<li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>想念</div>
<span href="#">张杰 - 这便是爱</span>
</div>
</li>
<li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>DJ外文舞曲</div>
<span href="#">Jean Cloud Ades</span>
</div>
</li>
</ul>
<script>
var ul = document.getElementById('frm');
var li = document.getElementsByTagName('li');
var spans;
for(var i=0;i<li.length;i++){
spans = li[i].getElementsByTagName('span');
li[i].span_obj = spans[0];
}
var index = ⑴;
function showup(){
if(li[index].span_obj.style.top == ''){
li[index].span_obj.style.top = '13px';
}
if(parseInt(li[index].span_obj.style.top)<=0){
li[index].span_obj.style.top = '';
setTimeout('shownext()',1000);
}else{
li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)⑴ +'px';
setTimeout('showup()',100);
}
}
function shownext(){
index++;
index = index%li.length;
showup();
}
setTimeout(shownext,1000);
</script>
</body>
</html>
转化成实际效果：
编码剖析：
1.ul标识內部含有10个li标识，由于每一个li标识的标志为不一样的子照片，因此给每一个li标识里加上不一样的class特性。
2.每一个li标识的class特性为d的div标识里边包括了3个div标识，它们的class特性为img、mask和play，这3个标识先后为主题标志、遮罩标志和播发标志，而她们的父连接点div(class特性为d)以情况照片做为边框。
3.每一个li标识都加上了onmouseover和onmouseout恶性事件回应函。
4.最终面1段js编码是仿真模拟歌曲盒音乐切换时的音乐名升高的实际效果。
最先程序流程获得id为frm的标识，并获得该标识的全部li子标识，另外获得全部li的span标识，并关联第1个span标识到li标识目标的span_obj上。
两个请求超时涵数：shownext()和showup()，在其中showup()涵数负责造成歌名升见效果，而涵数shownext()负责切换到下1个歌曲台的音乐的播发。
目标的方式內部不能以设定本身为请求超时涵数
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 网站建设_创建网站_免费建站平台_智能建站_企业建网站 版权所有 （网站地图） 粤ICP备10235580号