DDR爱好者之家 Design By 杰米
最近都没有更，就来几个效果充实一下。
都没有进行美化这步。
纯css的手风琴：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴css</title>
<style>
.showBox{
width: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 30000px;
}
ul li{
float: left;
position: relative;
height: 254px;
width: 110px;
overflow: hidden;
transition: all 0.3s;
}
/* 这是css手风琴的核心，就是hover的使用
**首先是ul:hover li这个触发了经过ul但没有经过li的变化
**然后是ul li:hover这里是被经过li的变化，匹配css3动画效果，
和css3的一些对页面美化的效果，就可以做出一个很好看的手风琴，
如果使用纯js实现可能很麻烦。
*/
ul:hover li{
width:22px;
}
ul li:hover{
width: 460px;
}
ul li img{
width: 550px;
height: 254px;
}
ul li span{
width: 22px;
position: absolute;
top: 0;
right: 0;
height: 204px;
padding-top: 50px;
color: #fff;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="showBox">
<ul>
<li><span class="bg1">这是第一个</span><img src="/UploadFiles/2021-04-02/1.jpg">
css3手风琴：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-checked:</title>
<style>
/* 使用了radio的单选特性，实现手风琴效果 */
ul{
display: none;
}
input{display: none;}
label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;}
.list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;}
#list1:checked + ul{display: block;}
#list2:checked + ul{display: block;}
#list3:checked + ul{display: block;}
#list4:checked + ul{display: block;}
</style>
</head>
<body>
<div> <label for="list1">我的同学</label> <input type="radio" name="list" id="list1" checked="chekced"/>
<ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list2">我的同学</label>
<input type="radio" name="list" id="list2"/>
<ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list3">我的同学</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list4">我的同学</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> </div>
</body>
</html>
javascript实现的手风琴：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<style>
.showBox{
width: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 30000px;
}
ul li.active{
width: 550px;
}
ul li{
float: left;
position: relative;
height: 254px;
width: 22px;
overflow: hidden;
}
ul li img{
width: 660px;
height: 254px;
}
ul li span{
width: 22px;
position: absolute;
top: 0;
left: 0;
height: 204px;
padding-top: 50px;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
</style>
<script type="text/javascript">
window.onload=function ()
{
createAccordion('.showBox');
};
function createAccordion(name)
{
/*获取元素*/
var oDiv=document.querySelector(name);
/*声明最小宽度*/
var iMinWidth=9999999;
/*获取元素*/
var aLi=oDiv.getElementsByTagName('li');
var aSpan=oDiv.getElementsByTagName('span');
/*定时器容器默认*/
oDiv.timer=null;
/*循环添加事件和自定义属性索引值*/
for(vari=0;i<aSpan.length;i++)
{
aSpan[i].index=i;
aSpan[i].onmouseover=function ()
{
gotoImg(oDiv, this.index, iMinWidth);
};
/*获取最小宽度*/
iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
}
};
function gotoImg(oDiv, iIndex, iMinWidth)
{
if(oDiv.timer)
{ /*清除定时器，避免叠加*/
clearInterval(oDiv.timer);
}
/*开启定时器*/
oDiv.timer=setInterval
(
function ()
{
changeWidthInner(oDiv, iIndex, iMinWidth);
}, 30
);
}
/*这里是关键，运动*/
function changeWidthInner(oDiv, iIndex, iMinWidth)
{
var aLi=oDiv.getElementsByTagName('li');
var aSpan=oDiv.getElementsByTagName('span');
/*获取盒子的大小，这个是总宽度*/
var iWidth=oDiv.offsetWidth;
/*缩进去的图片的宽度声明*/
var w=0;
/*判断的声明,为了清除定时器声明*/
var bEnd=true;
/*循环为了把每个图片都循环一遍，为了获取伸进和缩去的元素*/
for(var i=0;i<aLi.length;i++)
{
/*这为获取伸进的索引*/
if(i==iIndex)
{
continue;
}
/*这里是没有变动的元素，所以都保存最小宽度*/
if(iMinWidth==aLi[i].offsetWidth)
{
/*总宽度减去这些宽度,因为他们也在总宽度里*/
iWidth-=iMinWidth;
continue;
}
/*走以下的循环里代码的是缩去的元素*/
/*不清除定时器，还没运动完*/
bEnd=false;
/*获取速度,先快后慢*/
speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
/*缩去剩下的宽度*/
w=aLi[i].offsetWidth-speed;
/*为避免缩去元素小于最小宽度*/
if(w<=iMinWidth)
{
w=iMinWidth;
}
/*设置缩去元素的宽度*/
aLi[i].style.width=w+'px';
/*减去缩去的宽度，剩下的就是伸进的宽度*/
iWidth-=w;
}
/*伸进元素的宽度*/
aLi[iIndex].style.width=iWidth+'px';
if(bEnd)
{
clearInterval(oDiv.timer);
oDiv.timer=null;
}
}
</script>
</head>
<body>
<div class="showBox">
<ul>
<li class="active"><span class="bg1">这是第一个</span><img src="/UploadFiles/2021-04-02/1.jpg">
接下来的都是会使用到动画效果，既然这样就把封装好运动：
/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
function doMove(obj,attr,speed,iTarget,fn){
if(attr=="opacity"){
obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
}else{
obj.len=iTarget-parseFloat(getStyle(obj,attr));
}
/*这里判断方向，在初始点后的为负数，在初始点前为正数*/
speed=obj.len>0"opacity"){
obj.num=parseFloat(getStyle(obj,attr))*100+speed;
}else{
obj.num=parseInt(getStyle(obj,attr))+speed;
}
/*这里是判断到了目标点没有，到了就停止定时器*/
if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
obj.num=iTarget;
clearInterval(obj.timer);
}
if(attr=="opacity"){
obj.style[attr]=obj.num/100;
}else{
obj.style[attr]=obj.num+"px";
}
/*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
fn && fn();
}
},30);
}
/*获取css属性值的，会获取表现出现的值*/
function getStyle(obj,attr){
return obj.currentStyle"" src="/UploadFiles/2021-04-02/2016091411175153.gif">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<!-- 这是引用封装好运动函数 -->
<script type="text/javascript" src="/UploadFiles/2021-04-02/doMove.js">
这个是使用插件做的：responsiveslides.js
基于jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入插件js和jquery -->
<script src="/UploadFiles/2021-04-02/jquery-2.0.3.js">
图片滑动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片滑动</title>
<style>
.container{
position: relative;
width: 630px;
border: 2px solid #888;
padding: 5px;
}
.c-wrap{
width: 630px;
overflow: hidden;
}
.container img{
width: 200px;
height: 90px;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
}
.container ul li{
float: left;
margin-right: 10px;
}
.container .imgBigBox{
width: 33000px;
margin-left: 0px;
}
.imgBigBox:after{
content: " ";
display: block;
clear: both;
}
.btnGroup{
border: 1px solid #888;
width: 65px;
}
.btnGroup a{
text-align: center;
line-height: 20px;
text-decoration: none;
color: #888;
font-size: 20px;
display: inline-block;
width: 30px;
}
.btn1{
margin-right: 4px;
border-right: 1px solid #888;
}
</style>
<!-- 引用运动函数 -->
<script type="text/javascript" src="/UploadFiles/2021-04-02/doMove.js">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。
更新日志
2024年11月28日
2024年11月28日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]