查看本章节

查看作业目录

需求说明：

使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

实现思路：

  1. 在 HTML 页面中添加 <img /> 标签，显示小图片
  2. 添加 <img id="big_img" /> 标签，用于显示放大的图片
  3. 在页面加载完毕事件中，获取 id 为 small_img 的 <img/> 标签对象，给图片的鼠标悬停事件绑定方法，实在鼠标指针附近显示放大后的图片
  4. 在页面加载完毕事件中，获取 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>

使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片的更多相关文章

  1. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  2. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...

  3. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  4. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  5. ifram父页面、子页面元素及方法的获取调用

    page1 父页面 <div id="ifram" class="parent1"> <iframe frameborder="0& ...

  6. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  7. 三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素

    1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...

  8. JQUERY操作css与css()方法、获取设置尺寸；

    一.jQuery addClass() 方法 向不同的元素添加 class 属性.在添加类时,您也可以选取多个元素 <style> .aa { color:red; }; </sty ...

  9. jQuery -- 光阴似箭（三）：jQuery 操作 HTML 元素和属性

    jQuery -- 知识点回顾篇(三):jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容:  text().html() 以及 val() ...

随机推荐

  1. Docker学习（三）——Docker镜像使用

    Docker镜像使用     当运行容器时,使用的镜像如果在本地中不存在,docker就会自动从docker镜像仓库中下载,默认是从Docker Hub公共镜像源下载. 1.镜像使用     (1)列 ...

  2. Linux基础命令---apachectl

    apachectl apachectl指令是apache http服务器的前端控制程序,可以协助控制apache服务的守护进程httpd. 此命令的适用范围:RedHat.RHEL.Ubuntu.Ce ...

  3. Linux基础命令---vmstat显示虚拟内存状态

    vmstat vmstat指令用来显示虚拟内存使用状态,同时也可以显示进程.cpu活动情况.vmstat报告有关进程.内存.分页.块IO.陷阱和CPU活动的信息.生成的第一份报告给出了自上次重新启动以 ...

  4. jmeter设置参数化

    设置参数化方法有3种 第一种: 1.打开 jmeter,导入badboy录制的脚本 导入后记得选择"step"右键选择change controller ->逻辑控制器-&g ...

  5. UIButton总结

    UIButton 1. 功能 既能显示文字,又能显示图片(能显示2张图片,背景图片.内容图片) 长按高亮的时候可以切换图片\文字 直接通过addTarget...方法监听点击 2. 状态 normal ...

  6. redis入门到精通系列（八）：redis的高可用--主从复制详解

    (一)主从复制介绍 前面所讲的关于redis的操作都属于单机操作,单机操作虽然操作简单,但是处理能力有限,无法高可用.所谓高可用性,就是指当一台服务器宕机的时候,有备用的服务器能顶替上,在单机操作上这 ...

  7. 【编程思想】【设计模式】【行为模式Behavioral】中介者模式Mediator

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/mediator.py #!/usr/bin/env py ...

  8. react-native环境搭建完后，用genymotion运行出错的处理方法

    以下方法是争对react-native  0.63版本的 出错提示如下: 模拟器点击reload后,如下提示: 找了网上很多方法,很多都是旧版本的bug处理的方法,没有用,后面经过摸索发现,原来原因是 ...

  9. 【C++】结构体/结构体数组/结构体指针/结构体嵌套/函数参数/const

    一.结构体声明 struct Student { //成员列表 string name; int age; int score; }; //s3;定义时直接声明 int main() { struct ...

  10. Mongodb安全防护

    1.Mongodb未授权访问 描述 MongoDB 是一个基于分布式文件存储的数据库.默认情况下启动服务存在未授权访问风险,用户可以远程访问数据库,无需认证连接数据库并对数据库进行任意操作,存在严重的 ...