CSS+JS实现鼠标悬停图片放大效果
"该资源提供了一段用于实现鼠标经过时图片放大的JavaScript代码,适用于创建一个动态相册效果。用户只需将代码添加到相应的网页位置,即可实现相册功能。" 这段代码是基于HTML和CSS构建的一个简单的相册展示,同时利用JavaScript来实现交互效果。以下是详细解释: 1. **HTML 结构**: - `<html>` 和 `<head>` 标签定义了整个HTML文档的基本结构。 - `<meta>` 标签设置了页面的字符编码为UTF-8,确保多语言文字的正确显示。 - `<title>` 定义了页面的标题。 - `<style>` 标签内包含CSS样式,用于定义页面元素的样式。 2. **CSS 样式**: - `html` 和 `body` 标签的样式设置使得页面占据整个浏览器窗口,并移除了默认的边距和填充。 - `.box` 类定义了一个相册容器,它具有固定宽度,自动高度,溢出隐藏,以及内边距和背景颜色。 - `.box ul` 清除了列表的默认样式,使其适合布局。 - `.box li` 是每个图片项的样式,它们设置为浮动,具有固定宽高,指针事件(鼠标悬停时变为手形),并有边框。 - `#bg` 和 `#bottom` 分别是半透明黑色遮罩层和底部操作栏的ID选择器,它们在JavaScript中会被用到。 3. **JavaScript 部分**: - 虽然这部分没有直接给出JavaScript代码,但可以推测,当鼠标悬停在`.box li` 图片项上时,会触发JavaScript事件,如`onmouseover`,使得`#bg`和`#bottom`元素显示出来,同时放大对应的图片。 - 可能会有一个对应的`onmouseout`事件来处理鼠标离开时恢复原状的效果。 4. **实现原理**: - 当鼠标移动到图片上时,JavaScript会改变图片的大小,显示一个半透明的黑色遮罩层(`#bg`),以及一个底部的操作栏(`#bottom`)。 - 底部操作栏可能包含关闭、导航等按钮,以便用户与放大后的图片进行交互。 - 当鼠标离开图片,所有额外的元素都会消失,图片恢复到原始大小。 5. **实际应用**: - 这种效果常用于网站上的产品展示或个人相册,让用户在不离开当前页面的情况下查看大图,提高用户体验。 6. **优化与扩展**: - 为了适应不同大小的图片,可以使用CSS3的响应式设计,使图片根据屏幕尺寸自动调整大小。 - 使用jQuery或其他JavaScript库可以简化代码,增加动画效果,使过渡更平滑。 - 添加触摸事件支持,以便在移动设备上也能正常工作。 这个代码示例对于初学者来说是一个很好的实践项目,可以通过它来学习如何结合HTML、CSS和JavaScript创建动态的网页交互效果。对于熟练的开发者,这则是一个基础的起点,可以在此基础上进行更多的定制和优化。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿QQ空间图案片展示效果</title>
<style type="text/css">
html, body {height:100%;margin:0px;padding:0px;background:url(http://zf4uc1.chinaw3.com/img/images/bg.jpg);}
.box {width:850px;height:auto;overflow:hidden;margin:30px auto;background:#666;padding:10px 0 0 10px;}
.box ul {margin:0px;padding:0px;float:left;list-style-type:none;}
.box li {width:150px;height:100px;float:left;cursor:pointer;display:inline;margin:0 10px 10px 0;border:5px solid #333;}
#bg {width:100%;height:100%;position:absolute;left:0px;top:0px;background:#000;filter:alpha(opacity:50);opacity:0.5;display:none;}
#bottom {width:215px;height:50px;position:absolute;left:50%;bottom:0px;margin:0 0 0 -107px;border:1px solid #232323;background:#444;padding:1px;z-index:1;display:none;}
#bottom ul {width:100%;height:100%;margin:0px;padding:0px;list-style-type:none;background:#000;}
#bottom li {background:url(http://zf4uc1.chinaw3.com/img/images/ico.jpg) no-repeat;float:left;display:inline;margin:8px 0 0 18px;cursor:pointer;}
#bottom li.prev {width:30px;height:33px;background-position:0 0;}
#bottom li.next {width:30px;height:33px;background-position:-35px 0;}
#bottom li.img {width:30px;height:33px;background-position:-106px 0;}
#bottom li.close {width:31px;height:33px;background-position:-70px 0;}
#frame {background:#fff;padding:3px;position:absolute;z-index:2;display:none;filter:alpha(opacity:0);opacity:0; text-align:center;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
}
window.onload = function(){
var oBox = document.getElementById('box');
var oBg = document.getElementById('bg');
var oBot = document.getElementById('bottom');
var aBli = oBot.getElementsByTagName('li');
var aLi = oBox.getElementsByTagName('li');
var aImg = oBox.getElementsByTagName('img');
var i = iNow = 0;
for(i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function(){
with(oFrame.style){display = 'block',top = this.offsetTop +'px',left = this.offsetLeft +'px',width = this.offsetWidth +'px',height = this.offsetHeight +'px';}
oFrame.innerHTML = '<img src="http://zf4uc1.chinaw3.com/img/images/'+(this.index + 1)+'.jpg" />';
var oImg = oFrame.getElementsByTagName('img')[0];
var iWidth = oImg.width;
var iHeight = oImg.height;
var iLeft = parseInt((document.documentElement.clientWidth / 2) - (iWidth /2));
var iTop = parseInt((document.documentElement.clientHeight / 2) - (iHeight /2) - 50);
with(oImg.style){height = width = '100%';}
startMove(oFrame, {opacity:100, left:iLeft, top:iTop, width:iWidth, height:iHeight});
oBg.style.display = 'block';
oBot.style.display = 'block';
iNow = this.index + 1;
};
}
document.onmousedown = function(){
return false
};
aBli[0].onclick = function(){
iNow--;
if(iNow == 0)iNow = aLi.length;
oFrame.innerHTML = '<img src="http://zf4uc1.chinaw3.com/img/images/'+iNow+'.jpg" width="100%" height="100%" />';
};
aBli[1].onclick = function(){
剩余6页未读,继续阅读
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦