html中鼠标悬停图片变大,JavaScript通过mouseover()实现图片变大效果的示例

图片提示

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;

}

$(document).ready(function(){

var x=1,y=1;

var myHref;

$("a[class=tooltip]").mouseover(function(e){//鼠标悬停的时候

myHref=this.href;//获取大图片

var $div=$("

%22+myHref+%22
");//创建一个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");

})

});

  • 02121.png
  • 02121.png
  • 02121.png
  • 02121.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值