B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>土豆网</title><style type="text/css">*{margin: 0;padding: 0;font:12px/1.25 tahoma,arial,宋体，sans-serif;}li{list-style: none;}a{text-decoration: none;}body{width: 100%;height: 100%;background: #000;_position: relative;overflow: hidden;}.page{position: fixed;_position: absolute;right:0;bottom: 0;}#zns_bottom{width:201px;height:50px;background: #d8b9c3;position: absolute;right:-165px;bottom: 0;z-index: 20001;}#nav{height: 22px;margin: 5px 0 0 34px; width: 175px;}#nav li{float: left;width:25px;margin-right: 5px;}#nav li a{display: block;height: 25px;width:25px;}#nav .li_1 .show,#nav .li_1 a{background:url(人事-线.png) no-repeat;}#nav .li_2 .show,#nav .li_2 a{background:url(添加-线.png) no-repeat;}#nav .li_3 .show,#nav .li_3 a{background:url(讨论-线.png) no-repeat;}#nav .li_4 .show,#nav .li_4 a{background:url(邮箱-线.png) no-repeat;}#nav .li_5 .show,#nav .li_5 a{background:url(项目-线.png) no-repeat;}#nav .li_1 .show,#nav .li_1 a:hover{background:url(人事-面.png) no-repeat;}#nav .li_2 .show,#nav .li_2 a:hover{background:url(添加-面.png) no-repeat;}#nav .li_3 .show,#nav .li_3 a:hover{background:url(讨论-面.png) no-repeat;}#nav .li_4 .show,#nav .li_4 a:hover{background:url(邮箱-面.png) no-repeat;}#nav .li_5 .show,#nav .li_5 a:hover{background:url(项目-面.png) no-repeat;}.zns{color:#363062;height: 16px;margin:4px 0 0 140px;overflow: hidden;width: 160px;}#but{bottom: 0;display: block;height: 50px;position: absolute;right: 0;width: 33px;z-index: 20002;}.but_show{background: #d8b9c3 ;}.but_show:hover{background: #d8b9c3;}#zns_box{bottom: -315px;display: none;height: 315px;padding: 0 0 48px; position: absolute;right:1px;width:200px;z-index: 20000;}.bg{background: #363062 no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top:0;width: 200px;}.nav2_bg{bottom: 48px;height:176px;left:0;position: absolute;width: 34px;background: #827397 no-repeat 0 -139px;}#list_nav{background: #4d4c7d; height: 139px;left:0;position: absolute;top:0;width:34px;}#list_nav a{color:#ffffff;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}#list_nav .show{color: #ff9900;}#list_nav a:hover{color: #ffff00;}.clos{background:url(关%20%20闭.png);cursor: pointer;height: 9px;position: absolute;right: 10px;top:10px;width: 9px;}.box_right{color:#ffffff;height: 285px;overflow: hidden;position: absolute;right: 6px;top:28px;width:150px;}</style><script type="text/javascript" src="move.js"></script><script>window.onload=function(){var obtn=document.getElementById("but");var obottom=document.getElementById("zns_bottom");var obox=document.getElementById("zns_box");var obtnclose=document.getElementById("btn_close");obtn.style.display="block";var initbottomright=parseInt(getStyle(obottom,"right"));var initboxbottom=parseInt(getStyle(obox,"bottom"));obox.style.display="none";obtn.onclick=openHandler;obtnclose.onclick=closeHandler;function  openHandler(){startMove(obottom,"right",0,function(){obox.style.display="block";startMove(obox,"bottom",0);});obtn.className="but_hide";obtn.onclick=closeHandler;}function closeHandler(){startMove(obox,"bottom",initboxbottom,function(){  //initboxbottom   -315obox.style.display="none";startMove(obottom,"right",initbottomright,function(){obtn.className="but_show";});});obtn.onclick=openHandler;}}</script>
</head>
<body>
<div class="page"><div id="zns_bottom"><ul id="nav"><li class="li_1"><a href="#"></a></li><li class="li_2"><a href="#"></a></li><li class="li_3"><a href="#"></a></li><li class="li_4"><a href="#"></a></li><li class="li_5"><a href="#"></a></li></ul><h2 class="zns">@卿卿</h2></div><a class="but_show" id="but" href="#"></a><div id="zns_box"><div class="bg"></div><div class="nav2_bg"></div><ul id="list_nav"><li><a class="show" href="#" target="_blank">天气</a></li><li class="tab2"><a class="show" href="#" target="_blank">星座</a></li><li class="tab3"><a class="show" href="#" target="_blank">排行</a></li><li class="tab4"><a class="show" href="#" target="_blank">热点</a></li><li class="tab5"><a class="show" href="#" target="_blank">直播</a></li></ul><a class="clos" id="btn_close"></a><div class="box_right"><div>北京</div><div><div><strong><em>今天</em>（周二）</strong><img title="晴" src="#" class="pic"></div><span>-1~10℃</span><span>晴</span><span>微风小于3级</span></div><div><div><strong><em>明天</em>（周三）</strong><img title="晴" src="#" class="pic"></div><span>-1~10℃</span><span>晴</span><span>微风小于3级</span></div><div><div><strong><em>后天</em>（周四）</strong><img title="晴" src="#" class="pic"></div><span>-1~10℃</span><span>晴</span><span>微风小于3级</span></div></div></div></div>
</body>
</html>

move.js

function getStyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}
}
function startMove(obj,attr,iTarget,fnEnd){clearInterval(obj.timer);obj.timer=setInterval(function(){var cur=0;if(attr=="opacity"){cur=parseFloat(getStyle(obj,attr))*100;}else{cur=parseInt(getStyle(obj,attr));}var speed=(iTarget-cur)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(cur==iTarget){clearInterval(obj.timer);if(fnEnd)fnEnd();}else{if(attr=="opacity"){obj.style.filter="alpha(opacity:"+(cur+speed)+")";obj.style.opacity=(cur+speed)/100;}else {obj.style[attr] = cur + speed + "px";}}},30);
}

改了一下颜色，大概就这样吧，因为没找到图片，这几节课主要是学习运动框架。

B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动_土豆网相关推荐

B站JavaScript从入门到精通智能社Blue石川老师视频部分代码_轮播图
从三月底开始,慢慢地上手了JavaScript,去年在学校放假前也看了一套视频,总感觉好像是会了又好像不会,现在看了Blue老师的视频,感觉思路清晰多了,也终于算是入门了吧. 接下来我会把学习过程中跟 ...
B站JavaScript从入门到精通智能社Blue石川老师视频部分代码_幻灯片
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JavaScript从入门到精通[文章列表联接]
·JavaScript从入门到精通:更复杂的交互 (1月30日10:7) ·JavaScript从入门到精通:Web页面信息交互 (1月30日10:3) ·JavaScript从入门到精通:窗口及输入 ...
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
es6删除数组某一项_「JavaScript 从入门到精通」10.数组
往期回顾「JavaScript 从入门到精通」1.语法和数据类型「JavaScript 从入门到精通」2.流程控制和错误处理「JavaScript 从入门到精通」3.循环和迭代「JavaScr ...
视频教程-JavaScript从入门到精通2016版教学视频-JavaScript
JavaScript从入门到精通2016版教学视频 19年软件开发经验,设计开发40多个大型软件,10年从事高等教育,主要为java系列课程,带你轻松进入java生涯. 赖国荣 ¥39.00 立即订阅 ...
HTML5+CSS3+JavaScript从入门到精通（标准版）
作者:未来科技出版社:中国水利水电出版社品牌:智博尚书出版时间:2017-05-01 HTML5+CSS3+JavaScript从入门到精通(标准版)
html5+css+javascript深入学习实录pdf,HTML5+CSS3+JavaScript从入门到精通微课精编版.pdf...
作者 :前端科技出版发行 : 北京:清华大学出版社 , 2018.08 ISBN号 :978-7-302-50220-3 页数 : 529 原书定价 : 79.80 主题词 : 超文本标记语言- ...
eclipese web前端开发教学_web前端技术开发视频教程：Javascript 从入门到精通（百度云盘资源）...
<JavaScript视频教程>这是一个帮助您系统学习JavaScript编程语言的课程,该课由浅入深的介绍JavaScript的语言特性,结合实际例子解析常见误区,启发你的思考,帮助学习 ...

B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动_土豆网

B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动_土豆网相关推荐

最新文章

热门文章