html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法。分享给大家供大家参考。具体实现方法如下:

1. CSS部分:

ul{

list-style:none;

}

li{

float:left;

margin-left:10px;

}

img{

border:#CCCCCC solid 1px;

}

#max{

position:absolute;

display:none; /*隐藏层*/

}

2. HTML部分:

苹果产品列表:

  • apple_1.jpg
  • apple_2.jpg
  • apple_3.jpg
  • apple_4.jpg

3. javascript部分:

$(document).ready(function(){

//e 事件对象,可以通过该事件对象获取事件的参数 e.pageX - X轴,距浏览器的左边的距离 e.pageY - y轴,距浏览器的顶端的距离

$("a").mouseover(function(e){

//鼠标移上去 向body追加大图元素

//大图的路径:当前连接的href属性值为大图的路径

var $imgSrc = $(this).attr("href");

var $maxImg ="

%22+%24imgSrc+%22
";

//在body中添加元素

$("body").append($maxImg);

//设置层的top和left坐标,并动画显示层

$("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow');

}).mouseout(function(){

//鼠标移开删除大图所在的层

$("#max").remove();

}).mousemove(function(e){

//鼠标移动时改变大图所在的层的坐标

$("#max").css("top", e.pageY+20).css("left",e.pageX+10);

});

});

希望本文所述对大家的jquery程序设计有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第五节 盒子模型

1. 盒子模型的五个属性 盒模型主要涉及的属性有:width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。 2. 盒子模型的两种模式 模式一:width盒子自身的width (正常情况) 模式二:width盒子自…

第六节 标准文档流

一.标准文档流 标准文档流包括:块级元素和行内元素。 (1). 块级元素 特点: 一个元素单独一行,不与其他元素并行,可以设置其宽度和高度,如果不设置宽度,宽度默认为其父元素的100%。 (2). 行内元素 特点&…

第七节 浮动

一. 浮动的性质 1. 脱标(脱离标准文档流) 无论是块级元素还是行内元素,一旦浮动了,就脱离标准文档流(脱标)了,就可以设置宽和高了。 下面事例是两个div,其中第一个div浮动了。 1 &l…

html5测试 iphone6sp,5款旧iPhone测试iOS运行速度:只有6S速度明显提升

苹果在周三凌晨推送了iOS13.3.1更新,这款最新系统修复了许多Bug,而且还新增了功能。那么升级后的流畅度表现如何呢?外媒就在第一时间将iPhoneSE、iPhone6S、iPhone7、iPhone8、iPhoneXR这5款旧iPhone进行了一次速度测试,与iOS13.3…

第八节 定位

一. 定位介绍 谈到定位,顾名思义,就确定元素的位置,定位分为三种:相对定位、绝对定位、固定定位;分别用 position:relative、position:absolute、position:fixed来表示,它…

html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

使用string对象的split()方法能够处理。正则表达式定义: split() 方法用于把一个字符串分割成字符串数组。数组使用方法以下:cdnstringObject.split(separator,howmany)对象参数描述:blogseparator 必需。字符串或正则表达式,从该…

CSS块级元素与行内元素的区别和联系

块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。 默认情况下块元素,是独占一行的常见的块元素:div、p、h1-h6…

联想台式计算机驱动程序,联想键盘驱动程序

联想键盘驱动程序官方版联想键盘驱动程序官方版是款适合联想键盘的用户打造的驱动程序。联想键盘驱动程序主要作用就是可以帮助用户解决键盘输入过程中的各种问题,包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…

JS入门

一. 总体介绍 结合近半年来前端的项目的经验,这里梳理一下JS常用知识,方便自己日后温习查找,同时给广大JS入门者提供一些帮助,文章中如有错误,欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门…

联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆神经网络是模拟人脑, 把一些样本模式存储在神经网络的权值中, 通过大规模的并行计算, 使不完整的、受到噪声“污染”的畸变模式在网络中恢复到原有的模式本身。大脑是人体最为复杂的信息处理系统。联想记忆(AssociativeMemory, AM) 是人脑的重要认知功能之一。例如, 听…

第二节 DOM-Document对象

一. 整体介绍 这里介绍DOM对象中的Document对象。 何为Document对象?每个载入浏览器的HTML文档都会成为Document对象,Document对象可以帮助我们对所有的HTML文档进行访问。 任何一个对象都会有属性和方法,当然Document对象也不例外&#xff0…

计算机专业的情书,【实用】大学各专业表白情书,你能看懂几个

原标题:【实用】大学各专业表白情书,你能看懂几个大学各专业表白情书的正确打开方式每每看到朋友圈秀恩爱时就会用知识摆脱烦恼刷刷微博浏览网页学学专业技能......但是!居然连专业都不放过表白还那么高调来感受感受吧……音乐专业每次看着你…

第三节 DOM-Element对象

一. 整体介绍 这里介绍DOM对象中Element对象。 那么何为Element对象呢?Element对象就是HTML元素,Element对象包括:元素节点、文本节点、属性节点。 下面利用一张图来总体概括一下Element对象包含的知识点。 二. 知识梳理 一张图胜似千言万语…

w8计算机配置要求,win8配置要求 详细介绍

随着win8系统的不断完善,现在已经越来越多用户投身到win8的行列之中,越来越多的人使用win8也代表着出现了新的问题,很多用户考虑到win系统对电脑的硬件要求有所不同,所以有些电脑无法完美的运行win8系统,究竟要怎么样才…

C#多线程编程系列(一)- 简介

目录 系列大纲一、前言二、目录结构四、章节结构五、相关链接系列大纲# 目前只整理到第二章,线程同步,笔者后面会慢慢更新,争取能把这本书中精华的知识都分享出来。C#多线程编程系列(一)- 简介C#多线程编程系列&…

计算机论文答辩注意哪些问题,计算机专业论文答辩(准备和注意事项)

随着社会的不断发展,计算机的应用在中国越来越普遍,在互联网、通信、多媒体等领域都有应用,对于计算专业的同学,毕业时,除了想了解毕业论文如何写作,还有就是论文的答辩准备,下面我们就为大家重…

C#多线程编程系列(二)- 线程基础

目录 C#多线程编程系列(二)- 线程基础 1.1 简介1.2 创建线程1.3 暂停线程1.4 线程等待1.5 终止线程1.6 检测线程状态1.7 线程优先级1.8 前台线程和后台线程1.9 向线程传递参数1.10 C# Lock关键字的使用1.11 使用Monitor类锁定资源1.12 多线程中处理异常…

C#多线程编程系列(三)- 线程同步

目录 1.1 简介1.2 执行基本原子操作1.3 使用Mutex类1.4 使用SemaphoreSlim类1.5 使用AutoResetEvent类1.6 使用ManualResetEventSlim类1.7 使用CountDownEvent类1.8 使用Barrier类1.9 使用ReaderWriterLockSlim类1.10 使用SpinWait类参考书籍笔者水平有限,如果错误…

C#多线程编程系列(四)- 使用线程池

目录 1.1 简介1.2 在线程池中调用委托1.3 向线程池中放入异步操作1.4 线程池与并行度1.5 实现一个取消选项1.6 在线程池中使用等待事件处理器及超时1.7 使用计时器1.8 使用BackgroundWorker组件参考书籍笔者水平有限,如果错误欢迎各位批评指正!1.1 简介…

C#线程模型脉络

今天在看同事新买到的《C#本质论 Edition 4》的时候,对比下以前Edtion3的新特性时,针对Async/Await关键字时发现对一些线程方面的定义还理解的不是很透彻,脉络还不是很清晰,这样有了本文,希望对有同样困惑的朋友有些帮…