本次課程的源碼
沒(méi)有全部的源碼？跪求源碼
人本多學(xué)點(diǎn)
2016-11-02
1 回答
舉報(bào)
0/150
提交
取消
2016-11-03
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <style type="text/css">
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? font-size: 12px;
? ? ? ? }
? ? ? ??
? ? ? ? div {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background: green;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? left: -200px;
? ? ? ? }
? ? ? ??
? ? ? ? span {
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? background: red;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 200px;
? ? ? ? ? ? top: 85px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="div">
? ? ? ? <span id="show">show</span>
? ? </div>
? ? <script>
? ? ? ? function $(id) {
? ? ? ? ? ? return typeof id === "string" ? document.getElementById(id) : id;
? ? ? ? }
? ? ? ? window.onload = function() {
? ? ? ? ? ? //定義變量
? ? ? ? ? ? var pto = $("div");
? ? ? ? ? ? var btn = $("show");
? ? ? ? ? ? var timer = null;
? ? ? ? ? ? var speed = 0;
? ? ? ? ? ? //鼠標(biāo)移動(dòng)綁定事件（一個(gè)無(wú)名函數(shù)）
? ? ? ? ? ? btn.onmouseenter = function() {
? ? ? ? ? ? ? ? //調(diào)用自定義函數(shù)，傳入?yún)?shù)0為pto.offsetLeft需要達(dá)到的距離
? ? ? ? ? ? ? ? showPto(0);
? ? ? ? ? ? }
? ? ? ? ? ? //同理
? ? ? ? ? ? btn.onmouseleave = function() {
? ? ? ? ? ? ? ? //同理
? ? ? ? ? ? ? ? showPto(-200);
? ? ? ? ? ? }
? ? ? ? ? ? //自定義函數(shù)，one為自定義參數(shù)
? ? ? ? ? ? function showPto(one) {
? ? ? ? ? ? ? ? //當(dāng)前只需要一個(gè)定時(shí)器，所以需要在每次開始前清除定時(shí)器
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? //定義一個(gè)名為timer的定時(shí)器
? ? ? ? ? ? ? ? timer = setInterval(function() {
? ? ? ? ? ? ? ? ? ? if (one > pto.offsetLeft) {
? ? ? ? ? ? ? ? ? ? ? ? //當(dāng)0>pto.offsetLet時(shí)，pto需要被顯示，所以speed為正值
? ? ? ? ? ? ? ? ? ? ? ? speed = 10;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? //同理，需要被隱藏時(shí)，speed為負(fù)值
? ? ? ? ? ? ? ? ? ? ? ? speed = -10;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (pto.offsetLeft == one) {
? ? ? ? ? ? ? ? ? ? ? ? //當(dāng)pto的值達(dá)到0或者-200時(shí)候就達(dá)到需求了，需要停止定時(shí)器，
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? //沒(méi)有到0或者-200時(shí)候，就需要通過(guò)speed來(lái)自增或自減
? ? ? ? ? ? ? ? ? ? ? ? pto.style.left = pto.offsetLeft + speed + 'px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }, 30);
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
更多課程代碼，可以去我的博客：http://www.cnblogs.com/WhiteM/