微客导航 » 文章资讯 » JavaScript通过mouseover()实现图片变大效果的示例

JavaScript通过mouseover()实现图片变大效果的示例

2023-09-19 03:35:05 177

实例如下所示：





图片提示



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:1pxsolid#AAAAAA;
}
/*tooltip*/
#tooltip{
position:absolute;
border:1pxsolid#ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}


$(document).ready(function(){
varx=1,y=1;
varmyHref;
$("a[class=tooltip]").mouseover(function(e){//鼠标悬停的时候
myHref=this.href;//获取大图片
var$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"); }) });

以上这篇JavaScript通过mouseover()实现图片变大效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JavaScript通过mouseover()实现图片变大效果的示例

热门推荐

随机推荐