JS实现鼠标移动到缩略图显示大图的图片放大效果

一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的。

图片提示效果

body{margin:0 ;padding:40px;line-height:180%;}
img{border:none;}
ul,li{margin:0 ;padding:0;}
li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;}
/*tooltip*/
#tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;}

$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle?"
"+ this.myTitle : "";
var tooltip = "

"+imgTitle+""; //创建 div 元素
document.write(tooltip);
$("body").append(tooltip); //把它追加到文档中
$("#tooltip").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).fadeIn(600); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})

效果

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

  • js放大镜放大图片效果
  • JS简单的图片放大缩小的两种方法
  • 鼠标滑上去后图片放大浮出效果的js代码
  • JavaScript图片放大镜效果代码[代码比较简单]
  • 奇妙的Javascript图片放大镜
  • js实现单击图片放大图片的方法
  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
  • JavaScript 图片放大镜(可拖放、缩放效果)
  • js仿淘宝商品放大预览功能

Tags:鼠标经过 显示大图

相关文章

  • 2008-01-01用dom+xhtml+css制作的一个相册效果代码打包下载
  • 2007-02-02js实现图片等比缩略显示 支持IE/FF
  • 2010-04-04cloudgamer出品ImageZoom 图片放大效果
  • 2008-02-02javascript实现的三维正方体(兼容ie7,ff)
  • 2007-02-02照片各部分的彩色与黑白交替更换
  • 2010-08-08一个简单的javascript图片放大效果代码
  • 2006-10-10TFDN图片播放器 不错自动播放
  • 2008-07-07js 新浪的一个图片播放图片轮换效果代码
  • 2009-12-12javascript 多图浏览超炫效果
  • 2007-05-05從博客網扣了一個效果出來

最新评论

时间: 2012-12-08

js放大镜放大图片效果

我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le

JavaScript 图片放大镜(可拖放、缩放效果)第1/4页

前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一

js仿淘宝商品放大预览功能

将鼠标移动至图片区域可放大预览 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0; margin:0;} #img1{width:300px; height:200px;} #sp1{width:60px;

js实现单击图片放大图片的方法

本文实例讲述了js实现单击图片放大图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>单击图片即可放大图片</title> <body> 点击图片预览效果.<br> <img src="/images/m01.jpg" onclick="this.width+=50;this.height+=50" onclick="javascript:

鼠标滑上去后图片放大浮出效果的js代码

复制代码 代码如下: <script> function GetAbsPosition(obj) { var curleft = 0, curtop = 0; do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return [curleft,curtop]; } function ShowFloatingImage(image, width, height) {

JS简单的图片放大缩小的两种方法

以左上角为定点,放大缩小,该点位置不变. 方法一: Html代码 复制代码 代码如下: <script type="text/javascript">         //兼容IE和火狐   缩小放大.缩放         function ImageSuofang(args) {             var oImg = document.getElementById("oImg");             if (args) {        

JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

JavaScript图片放大镜效果代码[代码比较简单]

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op

JavaScript 图片放大效果及代码说明

Magnifier #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img{ width:342px; height:420px; } #Browser{ border:1px solid #000; z-index:100; position:absolute; background:#555; } #m

JavaScript实现放大镜效果代码示例

JavaScript实现放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&

原生javascript实现图片放大镜效果

当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <html> <head> <meta charset="UTF-8"> <title>Document</title> <style t

原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

JavaScript实现图片放大镜效果

本文实例为大家分享了js实现图片放大镜效果的具体代码,供大家参考,具体内容如下 1.结构布局HTML代码 <div class="leftcon" id="left"> <img src="~/Content/images/风景-1.jpg" /> <div class="slide_box" id="box"></div> </div> <

js鼠标点击图片切换效果实现代码

本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

Javascript 实现放大镜效果实例详解

Javascript 实现放大镜效果 今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构! <div id="pic_wrap"> <div id="floa

JS实现图片放大镜效果的方法

本文实例讲述了JS实现图片放大镜效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

基于jQuery插件jqzoom实现的图片放大镜效果示例

本文实例讲述了基于jQuery插件jqzoom实现的图片放大镜效果.分享给大家供大家参考,具体如下: jqzoom插件实现图片放大镜效果. 图1.1jqzoom插件实现图片放大镜效果 1.引入jqurty和jqzoom插件 <script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script> <script src="/js/common/jquer