JavaScript通过mouseover()实现图片变大效果的示例
更新时间：2017年12月20日 08:30:53 作者：AJin0802
下面小编就为大家分享一篇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()实现图片变大效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js将当前时间格式化为 年-月-日 时:分:秒主要是使用js的Date()对象，将系统当前时间格式化为年-月-日 时:分:秒，需要的朋友可以参考下2018-01-01
这篇文章主要介绍了JavaScript 自定义弹出窗口的实现代码,实现一采用html编写弹出窗口内容,实现二采用JavaScript编写弹出窗口内容,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-09-09
这篇文章主要为大家介绍了JS前端组件注册与画布渲染实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
ionic2打包android时gradle无法下载的解决方法
这篇文章主要为大家详细介绍了ionic2打包android时gradle无法下载的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了js判断输入字符串长度，汉字算两个字符，字母数字算一个，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了JAVA四种基本排序方法,较为详细的总结分析了插入法、冒泡法、选择法及Shell排序等四种常用的排序技巧,非常具有实用价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了微信小程序使用gitee进行版本管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了JavaScript添加随滚动条滚动窗体的方法,涉及JavaScript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下2016-02-02
在javascript中，带小数的数据运算时总会出现好多位小数.这是因为在javascript中浮点数的计算是以2进制计算的2014-05-05
这篇文章主要为大家详细介绍了原生js+css实现tab切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论