<html>
<head>
<title>
ttt
</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
div#con {
border: 1px solid #54a70d;
width: 400px;
font-size: 16px;
text-algin: left;
height: 300px;
}
ul.hot li {
list-style: none;
border: 1px solid #da3a08;
padding: 3px 5px;
float: left;
cursor: pointer;
}
li#hot_t {
border-bottom-width: 0px;
}
div.hot {
clear: both;
display: none;
padding-top: 20px;
}
div.topic {
display: block;
}
div#top {
position: relative;
top: 50px;
left: 200px;
z-index: 10;
width: 200px;
height: 200px;
background-color: red;
}
div#top button {
margin-left: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
var left = 200;
var top = 40;
var i = 0;
function dong() {
document.getElementById('top').style.left = (left + Math.sin(i) * 10) + 'px';
i = i + 20;
var set = setTimeout('dong();', 30);
if (i % 180 == 0) {
clearTimeout(set);
i = 0;
}
}
$(document).ready(function() {
$("#hot_v").mouseover(
function() {
$("div.video").show();
$("#hot_v").css("border-bottom-width", "0");
$("div.topic").hide();
$("#hot_t").css("border-bottom-width", "1px");
$("div.pra").hide();
$("#hot_p").css("border-bottom-width", "1px");
}
);
$("#hot_t").mouseover(
function() {
$("div.video").hide();
$("#hot_v").css("border-bottom-width", "1px");
$("div.topic").show();
$("#hot_t").css("border-bottom-width", "0px");
$("div.pra").hide();
$("#hot_p").css("border-bottom-width", "1px");
}
);
$("#hot_p").mouseover(
function() {
$("div.video").hide();
$("#hot_v").css("border-bottom-width", "1px");
$("div.topic").hide();
$("#hot_t").css("border-bottom-width", "1px");
$("div.pra").show();
$("#hot_p").css("border-bottom-width", "0");
}
);
});
</script>
<div id="con">
<ul class="hot">
<li id="hot_t">hot topic</li>
<li id="hot_v">hot video</li>
<li id="hot_p">hot practice</li>
</ul>
<div class="topic hot">
topictopictopi ctopictopictopic
topictopictopicto pictopictopic
topictopictopict opictopictopic
topictopictopic topictopictopic
</div>
<div class="video hot">
video videovideovid eovideovideovideo
</div>
<div class="pra hot">
pra pra pra pra pra pra pra pra
</div>
</div>
<div style="position:absolute;">
<div id="top">
<button type="button" onclick="dong();">点我一下</button>
</div>
</div>
</body>
</html>
分享到：
相关推荐
学习html Css和Javascript的记录学习html Css和Javascript的记录 学习html Css和Javascript的记录学习html Css和Javascript的记录 学习html Css和Javascript的记录学习html Css和Javascript的记录 学习html Css和...
关于JavaScript的学习记录
学习JavaScript的第一步通常是理解变量、数据类型、运算符和控制流程。变量用于存储数据，数据类型包括基本类型（如字符串、数字、布尔值）和引用类型（如对象）。运算符则用于进行数学计算或逻辑判断，而控制流程...
在学习JavaScript时，我们通常会从以下几个重要知识点入手： 1. JavaScript的基本组成部分 JavaScript主要由三个部分组成： - ECMAscript：它是JavaScript的核心标准，定义了JavaScript的语言规范和基础语法。 - ...
理解这些基础知识是学习JavaScript的第一步。 2. **DOM操作**：Document Object Model（DOM）是网页内容的结构化表示，JavaScript通过DOM可以动态地修改页面内容。熟悉DOM元素的选择（如getElementById、...
在Photoshop中，有一种功能允许用户记录并导出他们在软件中的所有操作为JavaScript代码，这个功能被称为"动作"（Actions）。动作是Photoshop的一个强大工具，它可以自动化一系列重复性的编辑步骤，节省时间和提高...
该项目是基于HTML的JavaScript前端学习记录源码，共计170个文件，其中包括66张JPG图片、21个HTML页面、10个XML文件、9个JAR包、6个Java类文件、6个Java源文件、5个JSP文件、5个GIF动画、5个CSS样式表以及3张JPG图片...
浏览器对象模型（BOM）允许JavaScript访问和控制浏览器的特性，如窗口（window）、历史记录（history）、位置（location）和定时器（setTimeout, setInterval）。 事件处理： JavaScript处理用户与页面的交互，如...
JavaScript是一种广泛应用于Web开发的轻量级编程语言，与Java虽然名字相似，但它们之间并无直接关系。JavaScript原名为LiveScript，在 Netscape Navigator 浏览器的早期版本中首次亮相，后因Java的流行，改名为...
"JavaScript_记录器几乎可以记录一切.zip"中的内容，尤其是winston_master.zip，将为学习和使用JavaScript日志记录提供宝贵的资源。通过深入理解和应用这些知识，开发者可以更好地优化其代码的可维护性和问题解决...
9. **BOM（浏览器对象模型）**：与DOM类似，BOM允许JavaScript与浏览器进行交互，如窗口管理、历史记录、cookies、地理位置等。 10. **性能优化**：理解V8引擎的工作原理，了解如何优化代码执行速度，如避免全局...
学习JavaScript，你需要理解变量、数据类型、控制流程（条件语句、循环）、函数、对象和数组等基础知识。随着ES6（ECMAScript 2015）及以后版本的发布，箭头函数、模板字符串、let和const、解构赋值等新特性也应熟练...
JavaScript学习笔记，当时看黑马的视频记录的
这个"前端学习JavaScriptpt配套资料"包含了深入理解和掌握JavaScript所必需的各种资源，旨在帮助前端开发者或者初学者系统地提升JavaScript技能。 JavaScript的核心概念包括变量、数据类型、操作符、流程控制（条件...
初学者在开始学习JavaScript时，通常需要了解以下几个重要知识点： 1. JavaScript基础语法：包括变量声明、数据类型、运算符、控制结构（if...else语句，switch语句，循环语句等）、函数的定义与使用等。 2. DOM...
在标题“学习资源——JavaScript”与描述“点点滴滴，记录JavaScript的开头引用的应用”中，我们可以理解到这份文档旨在分享JavaScript的一些基本应用实例，特别是关于如何引入（import）或链接(link)外部资源。...
JavaScript 参考资料则是详细记录了 JavaScript 语法、内置对象、函数、方法和特性的文档，它们是开发者学习和查询语言细节的重要资源。例如，MDN Web Docs 提供了详尽的 JavaScript 参考，包括核心语言特性和浏览器...
这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录，对于初学者或者想要深入理解JavaScript的人来说，是一份宝贵的资源。 JavaScript与Java虽然名字相似，但两者实际上是不同...
BOM允许开发者获取和操作浏览器的信息，如浏览器窗口大小、历史记录、弹出对话框等功能。DOM则提供了操作HTML文档的方法，允许通过JavaScript动态修改网页内容。通过DOM，我们可以查找、添加、删除或修改HTML元素，...