jquery图片插件(未全完成)-优快云博客

本文链接：https://blog.youkuaiyun.com/tempdowncomputer/article/details/84085264

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

$(function(){

var IPP=$(".preview_class").IPP(); //图片插件

});

$.fn.extend({

IPP:function(){

$(this).bind("mouseover",function(){

$(this).focus();

});

//取得焦点事件

$(this).bind("focus",function(){

var imgObj=new Image(); //图片对象

imgObj.src=$(this).attr("href");

var source_width=$(this).width();

var source_height=$(this).height();

var source_x=$(this).offset().left;

var source_y=$(this).offset().top;

if($("#img_plug_preview").length>0){

$("#img_plug_preview").attr("src",imgObj.src);

}else{

var img_plug_preview= document.createElement("img");

$(img_plug_preview).attr("id","img_plug_preview");

$(img_plug_preview).css("border","1px solid #99bbe8");

$(img_plug_preview).css("z-index","5000");

$(img_plug_preview).css("position","absolute");

$(img_plug_preview).attr("src",imgObj.src);

$(img_plug_preview).bind("click",function(){

alert($(this).attr("src"));

$("#img_plug_preview").remove();

});

$(img_plug_preview).error(function(){

//$(this).attr("src","easier_5/assets/error.png");

$("#img_plug_preview").remove();

});

$(document.body).append($(img_plug_preview));

}

//公共值

$("#img_plug_preview").css("display","none"); //先隐藏

$("#img_plug_preview").slideDown("fast",function(){

var margin_top=source_y; //距离上边的距离

var margin_right=$(document).width()-(source_width+source_x); //距离右边的距离

var margin_bottom=$(document).height()-(source_height+source_y); //距离下边的距离

var margin_left=source_x; //距离左边的距离

var x=source_x+source_width+10;

var y=source_y+(source_height/2);

var borderWidth=1;

//上下左右都大于本身

if((margin_top>imgObj.width+20)||(margin_right>imgObj.height)||(margin_bottom>imgObj.width)||(margin_left>imgObj.height)){

//显示下边

//x=source_x+((source_width/2)/2)-borderWidth;

//y=source_y+source_height+10;

x=source_x+source_width+10;

y=source_y+(source_height/2/2);

}

//右边小于宽度;+下边也小于高度

if((margin_right<imgObj.width)&&(margin_bottom<imgObj.height)){

//显示上面

x=source_x+((source_width/2)/2)-borderWidth;

y=source_y-imgObj.height-10;

}

//右边小于宽度;+下边大于高度

if((margin_right<imgObj.width)&&(margin_bottom>imgObj.height)){

//显示左边

x=source_x-imgObj.width-10;

y=source_y-(((source_height/2))+borderWidth*4);

}

//左边小于宽度;+上边小于高度

if((margin_left<imgObj.width)&&(margin_top<imgObj.height)){

//显示右边

x=source_x+source_width+10;

y=source_y+(source_height/2/2);

}

$("#img_plug_preview").css("left",x);

$("#img_plug_preview").css("top",y);

});

$(document).click(function(){ if( $("#img_plug_preview").length>0 ){ $("#img_plug_preview").remove(); } });

}

});

</script>

</head>

<body >

<a href="easier_5/assets/pause.png" class='preview_class'>pause.png</a><br/>

<a href="easier_5/assets/player.png" class='preview_class'>player.png</a><br/>

<a href="easier_5/assets/rotate-left.png" class='preview_class'>rotate-left.png</a><br/>

<a href="easier_5/assets/rotate-right.png" class='preview_class'>rotate-right.png</a><br/>

</p>

<p>

<div

</p>

</body>

</html>