查看本章节

查看作业目录

需求说明：

使用 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. C语言time函数获取当前时间

    以前放了个链接,但是原作者把博文删了,这里放一个获取时间的代码,已经比较详细所以不做注释 #include<stdio.h> #include<time.h> #include ...

  2. Apache架构师的30条设计原则

    本文作者叫 Srinath,是一位科学家,软件架构师,也是一名在分布式系统上工作的程序员. 他是 Apache Axis2 项目的联合创始人,也是 Apache Software 基金会的成员. 他是 ...

  3. sql优化的8种方式

    1.设置索引. MySQL索引操作:给表列创建索引: 建表时创建索引: create table t(id int,name varchar(20),index idx_name (name)); 给 ...

  4. 【力扣】123. 买卖股票的最佳时机 III

    给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的 ...

  5. 代码仓库gogs的基本配置使用

    目录 一.基本功能介绍 主板说明 页面说明 用户设置 二.仓库 新建仓库 迁移仓库 仓库介绍 三.组织和团队 创建新组织 创建团队 一.基本功能介绍 主板说明 图中1表示自己个人账户下的仓库(所有权属 ...

  6. Log4j漏洞源码分析

    Log4j漏洞源码分析 这几天Log4j的问题消息满天飞,今天我们就一起来看看从源码角度看看这个漏洞是如何产生的. 大家都知道这次问题主要是由于Log4j中提供的jndi的功能. 具体涉及到的入口类是 ...

  7. AD小白如何发板厂制板--导出gerber文件和钻孔文件+嘉立创下单教程

    AD如何发工程制板子? 方式1,发PCB源文件给板厂 方式2,发一些工艺文件给板厂,这样就无须泄漏你的PCB源文件了,一个硬件工程师必须要掌握方式2. 方式2要做的就是导出gerber文件和钻孔文件, ...

  8. 一个使用 asyncio 开发的网络爬虫（译文）

    原文地址:https://www.aosabook.org/en/500L/a-web-crawler-with-asyncio-coroutines.html 作者简介 A. Jesse Jiryu ...

  9. [BUUCTF]REVERSE——reverse2

    reverse2 附件 例行检查,64位目标 64位ida载入,首先shift+f12检索程序里的字符串 得到了"this is the right flag!" 的提示字符串,还 ...

  10. 任务关联的类型（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 任务关联的类型,一共是四种,FS.SS.SF.FF. 就这些! -- 好吧,我又调皮了,怎么着也该解释一下吧? 嗯!F就是 ...