仿58同城鼠标经过右侧弹出层_右侧弹窗资源-CSDN下载

5星 · 超过95%的资源需积分: 50 5 浏览量 2014-03-07 15:48:15 上传评论收藏 6KB TXT 举报

根据提供的文件信息，我们可以分析并总结出以下几个关键的知识点： ### 一、HTML与CSS基础结构 1. **文档类型定义（DOCTYPE）**: 文件开头的 `<!DOCTYPE html>` 定义了这是一个 HTML5 文档。 2. **命名空间声明**: `xmlns="http://www.w3.org/1999/xhtml"` 指定了使用 XHTML 命名空间，这有助于确保文档在不同浏览器中的兼容性。 3. **元信息设置**: `<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>` 设置了文档的内容类型为 HTML，并指定了字符集为 UTF-8。 ### 二、CSS样式设计 1. **隐藏元素**: - `.pop` 类将弹出层的初始状态设置为 `display: none;`，意味着该元素默认是隐藏的。 2. **绝对定位**: - 使用 `position: absolute;` 来实现弹出层相对于其最近的定位祖先元素的定位。 3. **内联块元素**: - `.rc_box1`, `.rc_box2`, `.rc_box3` 的样式中都设置了 `display: inline-block;`，使其能够像内联元素一样排列，同时保留块级元素的特性。 4. **兼容性处理**: - `*display: inline; *zoom: 1;` 是一种 IE 特有的 CSS 黑技巧，用于让 IE6 和 IE7 支持 `inline-block` 属性。 5. **边界和填充**: - 通过 `margin` 和 `padding` 控制元素之间的间距。 6. **边框效果**: - 使用 `border-style` 和 `border-color` 设置边框样式和颜色。 7. **绝对定位箭头效果**: - `.lov1` 和 `.lov2` 类利用了透明边框技巧来实现右侧箭头效果。 ### 三、JavaScript交互逻辑 1. **jQuery库加载**: - `<script type="text/javascript" src="jquery-1.7.2.js"></script>` 表明页面引入了 jQuery 库版本 1.7.2，这是实现弹出层效果的关键。 2. **事件绑定**: - `$("a").hover(...)` 绑定了 `hover` 事件到所有 `<a>` 标签上，当鼠标悬停时触发相应的 JavaScript 函数。 3. **动态计算位置**: - 通过获取当前 `<a>` 元素的位置和高度等信息，动态计算弹出层出现的位置，确保其不会超出浏览器窗口范围。 4. **条件判断**: - 使用 `if` 和 `else if` 语句对 `<a>` 元素与浏览器窗口位置关系进行判断，从而决定弹出层应该显示在哪个位置。 ### 四、综合应用结合以上知识点，可以得出这个“仿58同城鼠标经过右侧弹出层”的实现过程： - 通过 CSS 设置好弹出层的样式和初始隐藏状态； - 接着，利用 JavaScript 和 jQuery 实现当鼠标悬浮在特定的 `<a>` 元素上时，弹出层动态显示出来； - 通过计算 `<a>` 元素的位置关系，确保弹出层不会超出浏览器窗口，提供良好的用户体验。这份代码实现了鼠标悬浮时右侧弹出层的效果，并且通过细致的位置计算确保了其在各种情况下的正常显示。

资源推荐

资源详情

资源评论

<!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" />
<title>框框随着鼠标点击的元素的位置改变而改变</title>

<style type="text/css">
.pop{
width: 350px;
height: 200px;
border: 1px solid #00f;
background-color: #ffffee;
display: none;
position:absolute;
}
.rc_box1,.rc_box2,.rc_box3 { display:inline-block; *display:inline; *zoom:1; position:relative; border-style:solid; border-color:RGB(255,130,0);}
.rc_box2,.rc_box3 { border-width:0 1px; *left:-2px; background-color:RGB(255,255,255);}
.rc_box1 { border-width:1px; line-height:1.5; position:absolute}
.rc_box2 { margin:0 -2px;}
.rc_box3 { margin:1px -2px; padding:0 6px; width:200px}
.lov1,.lov2 { position:absolute; overflow:hidden; width:0; height:0; border-top:6px dotted transparent; border-bottom:6px dotted transparent;
border-right:6px solid transparent;}
.lov1 { left:-9px; border-right-color:RGB(255,130,0);}
.lov2 { left:-8px; border-right-color:RGB(255,255,255);}
a{ z-index:-120px; position:relative; line-height:70px}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("a").hover(function () {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈