<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".testdiv").bind("click",function(){
var clickId = $(this).attr("id");
var showId = "content" + clickId.substring(7,clickId.length);
$("#" + showId).slideToggle();
var obj = document.getElementById(clickId);
var scrollX = parseInt($("#mouseX").val());
var scrollY = parseInt($("#mouseY").val()) + parseInt(240);
var num = clickId.substring(7,clickId.length);
$("html,body").animate({scrollTop: $("#box" + num).offset().top}, 1000);
});
$(document).mousemove(function(e){
$("#mouseX").val(e.pageX);
$("#mouseY").val(e.pageY);
});
});
</script>
<style>
.testdiv{
background-color:#FFFFCC;
width:400px;
height:100%;
border:1px solid blue;
}
.content{
background-color:#6699FF;
width:400px;
height:240px;
display:none;
border:#3300FF 1px solid;
}
</style>
</head>
<body>
<p>鼠标指针位于： <span><input type="text" id="mouseY" /><input type="text" id="mouseX" /></span></p>
<div class="testdiv" id="testdiv1">111111111111111
<div class="content" id="content1">11111111111111111</div>
<span id="box1"/>
</div>
<div class="testdiv" id="testdiv2">222222222222222222222
<div class="content" id="content2">22222222222222</div>
<span id="box2"/>
</div>
<div class="testdiv" id="testdiv3">33333333333333333
<div class="content" id="content3">3333333333333333333</div>
<span id="box3" type="text" />
</div>
<div class="testdiv" id="testdiv4">4444444444444444
<div class="content" id="content4"></div>
<span id="box4" />
</div>
<div class="testdiv" id="testdiv5">555555555555555
<div class="content" id="content5"></div>
<span id="box5"/>
</div>
</body>
</html>
分享到：
相关推荐
此外，如果div是弹出式的，可能需要额外的代码来控制它的显示和隐藏，例如通过添加或删除CSS类来改变其可见性。 至于标签中的"源码"，这暗示我们可能会在上述示例的基础上看到更复杂的功能，比如封装成一个可复用的...
轮播图的基本原理是利用HTML、CSS以及JavaScript技术控制一组图片的显示与隐藏。 1. **理解轮播图的运动机制**： - 类比电影胶片，轮播图中的图片可以看作是一帧帧的画面。 - 我们可以通过控制一个容器内的图片...
使用JavaScript，可以通过控制文字的显示、隐藏、淡入淡出、滑动等动画效果来实现。例如，可以利用`setTimeout`或`setInterval`函数定时改变元素的样式，如透明度和位置，以达到平滑过渡的效果。 第二款"小清新...
emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式) label: { // label高亮时的配置 show: true, textStyle: { color: '#fff', // 高亮时标签颜色变为 白色 ...
在这个特效中，jQuery用于控制视频元素的显示和隐藏，以及视频播放的启停。通过选择器选取视频元素，并结合事件监听器，我们可以实现点击圆形透明区域时视频的播放和暂停，带来流畅的交互体验。 接着，我们来看看...
标题和内容部分也有各自的样式，关闭按钮则设置了鼠标悬停时的小手效果。 最后，利用jQuery来处理窗口的显示和隐藏。jQuery提供了多种方法来实现动画效果，如`fadeIn()`, `fadeOut()` 和 `hide()`。以下是一段示例...
8)增加对VS2008的支持,使用VS2008的用户请使用DotNetTextBox2008.sln打开项目,VS2005的用户则使用DotNetTextBox2005.sln打开项目(VS2008下控件的设计时显示尚不完美,以后版本将会尽快完善)! 2008/3/25 Version ...
4. **jQuery事件监听**：使用jQuery的`on('mousedown/mousemove/mouseup')`事件监听用户的鼠标行为，当用户按下鼠标并移动时，计算鼠标位置并擦除对应Canvas区域的颜色。 5. **动画效果**：为了提升用户体验，可以...
【JavaScript简易刮刮卡实现详解】 在Web开发中，实现互动性和趣味性的功能往往能吸引用户的注意力，其中“刮刮卡”就是一个常见的例子。本文将详细介绍如何使用JavaScript语言来创建一个简易的刮刮卡功能。 首先...
同时，DOM（Document Object Model）操作用于动态地改变网页内容，如显示或隐藏元素，以响应游戏进程。 HTML5的离线存储机制，如localStorage或IndexedDB，也可能在这类游戏中发挥作用。它们可以存储玩家的游戏进度...