JavaScript通过mouseover()实现图片变大效果的示例
实例如下所示：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
<!--jQuery -->
<script src="../jquery.min.js"type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var x=1,y=1;
var myHref;
$("a[class=tooltip]").mouseover(function(e){//鼠标悬停的时候
myHref=this.href;//获取大图片
var $div=$("<div id='tooltip'><img src='"+myHref+"'></img></div>");//创建一个div
$("body").append($div);//把div添加到body中
$("#tooltip").css({
top:e.pageY+y+"px",
left:e.pageX+x+"px"
}).show("slow");
}).mouseout(function(e){//鼠标移开的时候
$("#tooltip").remove();
}).mousemove(function(e){//鼠标移动的时候
$("#tooltip").css({
top:e.pageY+y+"px",
left:e.pageX+x+"px"
}).show("slow");
})
});
</script>
</head>
<body>
<ul>
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li>
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li>
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li>
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
</body>
</html>
以上这篇JavaScript通过mouseover()实现图片变大效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍原生javascript实现图片放大镜效果，包括了原生javascript实现图片放大镜效果的使用技巧和注意事项，需要的朋友参考一下 当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。 我在代码中进行了代码编写的思路的说明和详细
-
本文向大家介绍javascript图片滑动效果实现，包括了javascript图片滑动效果实现的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了javascript图片滑动效果实现方法，具体内容如下，先看一下效果图： 鼠标滑过那张图，显示完整的哪张图，移除则复位： 简单的CSS加JS操作DOM实现： css: js操作： 更多关于滑动效果的专题，请点击下方链接查看： javascript滑
-
本文向大家介绍jQuery实现的小图列表，大图展示效果幻灯片示例，包括了jQuery实现的小图列表，大图展示效果幻灯片示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的小图列表，大图展示效果幻灯片。分享给大家供大家参考，具体如下： 运行效果图如下： 全部代码如下所示： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQue
-
本文向大家介绍Android ListView实现下拉顶部图片变大效果，包括了Android ListView实现下拉顶部图片变大效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android ListView下拉顶部图片变大的具体代码，供大家参考，具体内容如下 在git上查看牛人的代码，发现是反编译别人的代码，还没加注释，代码也没有完全编译完整，所以这里我做的简单的注释，仅供学
-
本文向大家介绍asp.net+xml+flash实现的图片展示效果示例，包括了asp.net+xml+flash实现的图片展示效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了asp.net+xml+flash实现的图片展示效果。分享给大家供大家参考，具体如下： 第一步：首先引入命名空间：（vs08环境中） 第二步：前台页面的使用（需要index.swf文件）： 第三步：生成xml文
-
本文向大家介绍JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】，包括了JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现多张图片放大镜效果。分享给大家供大家参考，具体如下： 效果如下：可以展示图片列表的放大镜效果，图片尺寸没有要求会自动调整至水平垂直居中效果 代码如