鼠标悬浮放大图片的具体实现

鼠标悬浮放大图片的具体实现_第1张图片

代码实现:

头像
$(function() {
    imagePreview();  
  });
function imagePreview() {
    // 图片距离鼠标的位置
    this.xOffset = 10;
    this.yOffset = -10;
       
    //hover([over,]out)
    //over:鼠标移到元素上要触发的函数
    //out:鼠标移出元素要触发的函数

    //鼠标悬浮的事件
    $(".apreview").hover(function (e) {
       // this.t = this.title;//显示在图片下的标题
       // this.title = "";    //将title置为空,不让文字悬浮提示
        this.imgSr = this.src;//图片的连接
       // this.c = (this.t != "") ? "
" + this.t : ""; $("body").append("
Image preview
"); $(".preview") .css("top","10px") .css("left","10px") .fadeIn("fast"); }, function () { // this.title = this.t;//恢复title $(".preview").remove(); } ); //鼠标移动的事件,让图片随着移动 $(".apreview").mousemove(function (e) { $(".preview") .css("top", "10px") .css("left","10px"); }); };


你可能感兴趣的:(javascript)