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部分：

苹果产品列表：

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 ="

//在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程序设计有所帮助。

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

imagebutton的鼠标悬停事件：鼠标指向时显示图片1，鼠标离开时显示图片2
this .ibtn_SiteMsg.Attributes[ " onmouseover " ] = " this.src='../images/my2_r6_C12 ...
[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码
[html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码 <title>Document</title> <style> *{ margin:0; paddi ...
VS+Qt应用开发-Qt+Halcon显示图片，实现鼠标缩放、移动图片
VS+Qt应用开发-Qt+Halcon显示图片,实现鼠标缩放.移动图片效果展示界面设计代码例程完整代码 CMyLabel.h CMyLabel.cpp BrowsePic.h BrowsePi ...
CSS 控制鼠标划过，图片放大效果
♩ 背景今天在做后台管理 CMS 时,对于小图片的显示感觉太大了会浪费页面空间,想着在鼠标滑动时可以缓慢放大就好. ♪ 知识点 ①. transform:scale() 用法:transform: ...
php鼠标经过显示文本,jQuery实现鼠标单击网页文字后在文本框显示的方法
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考 ...
鼠标悬停时显示图片，不悬停时，隐藏图片
场景:让某元素本身在屏幕中不可见.如:鼠标:hover之后元素隐藏常见属性: visibility: hidden display: none 区别: visibility: hidden 隐藏元素 ...
鼠标划过显示鼠标移出隐藏效果
项目开发中有一个页面元素较多,为了使页面更简洁决定对其中一些元素进行隐藏,鼠标划过的时候才显示出来,于是就有了这篇文章. 实现这个效果的几个主要元素是:onmouseover.onmouseout.o ...
android webview加载html图片自适应手机屏幕大小点击查看大图
我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要 ...
鼠标悬停显示图片html5,JavaScript 鼠标悬停图片，显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下世界上最 ...

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

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

最新文章

热门文章