使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
2024-10-10 21:18:30
查看本章节
查看作业目录
需求说明:
使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
实现思路:
- 在 HTML 页面中添加 <img /> 标签,显示小图片
- 添加 <img id="big_img" /> 标签,用于显示放大的图片
- 在页面加载完毕事件中,获取 id 为 small_img 的 <img/> 标签对象,给图片的鼠标悬停事件绑定方法,实在鼠标指针附近显示放大后的图片
- 在页面加载完毕事件中,获取 id 为 small_img 的 <img/> 标签对象,给图片的鼠标移开事件绑定方法,实现隐藏放大的图片
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var x = 5,y= 15;
$("#small_img").mousemove(function(e){
console.log(e);
$("#big_img").attr("src",this.src);
$("#big_img").css({
"top":e.pageY+y+"px",
"left":e.pageX+x+"px",
"position":"absolute"});
$("#big_img").show();
});
$("#small_img").mouseout(function(e){
$("#big_img").hide();
});
});
</script>
</head>
<body>
<img src="img/img_4.jpg" width="100" height="50" id="small_img"/>
<img id="big_img"/>
</body>
</html>
最新文章
- js php json
- BUG集锦
- 【XLL API 函数】xlSheetNm
- ql Server 高频,高并发访问中的键查找死锁解析
- SQL对字符串数组的处理详解
- delphi 换行操作 Word
- {A} + {B} 分类: HDU 2015-07-11 18:06 6人阅读 评论(0) 收藏
- ManagementFactory cannot be resolved
- 如何用angularjs制作一个完整的表格之五__完整的案例
- Java反射机制简单使用
- cad2007 钢筋符号显示为问号
- ADO.NET 总结
- Htpasswd 给网站后台目录加密
- 4日6日--Math的常用方法
- [luoguP2912] [USACO08OCT]牧场散步Pasture Walking(lca)
- 3D图片变换
- Spring Boot系列(一) Spring Boot介绍和基础POM文件
- 第四周博客之一---Linux的基本命令(前5个)
- ASP.NET Core MVC中URL和数据模型的匹配
- 《TCP/IP 详解 卷1:协议》第 11 章:名称解析和域名系统