jq图片预览、拖拽插件

imagePreview.min

var ImagePreview={default_params:{},init:function(a){if(a){$.extend(this.default_params,a)}ip_global_img_list=[];var b=this.default_params.id;if(typeof b==”string“){if((ip_global_img_list=$(“#”+b).find(“img“)).length==0){return}}else{if(typeof b==”object“&amp;&amp;b!=null){ip_global_img_list=$(b)}}this.fnGenerateHtml();this.fnBindEvent(ip_global_img_list)},fnBindEvent:function(a){if(a.length==0){return}$(a).on(“click“,this.onClickEvent);this.onDragEvent($(“#ip-img–preview“));$(“#ip-img-preview“).on(“mousewheel DOMMouseScroll“,this.onMouseScrollEvent);$(“#ip-img-floatshadow“).on(“click“,function(){$(“#ip-img-preview”).hide();$(“#ip-left“).hide();$(“#ip-right“).hide();$(“#ip-img-floatshadow”).hide();$(“#ip-img-preview”).attr(“src“,””)});$(“#ip-left“).hover(this.fnMouseOver,this.fnMouseOut).click(this.fnPrev);$(“#ip-right“).hover(this.fnMouseOver,this.fnMouseOut).click(this.fnNext)},fnGenerateHtml:function(){$(“body“).append(‘<img id=”ip-img-preview” style=”position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 19941206;cursor: move;display: none“/><div id=”ip-img-floatshadow” style=”z-index: 19941205;background–color: #000;opacity: .5;top: 0;left: 0;width: 100%;height: 100%;position: fixed;display: none” title=”点击空白处关闭“></div>’);$(“body“).append(‘<div id=”ip-left” style=”display: none; width: 100px; height: 100px;left: 5px; top: 50%; position:fixed;z-index:19941207; cursor: pointer;”><div style=”left:-30px;border: 50px solid;border–color: transparent #1CB9C4 transparent transparent;position: absolute;”></div></div>’);$(“body“).append(‘<div id=”ip-right” style=”display: none; width: 100px; height: 100px; right: 5px; top: 50%; position:fixed; z-index:19941207;cursor: pointer;”><div style=”left:30px;border: 50px solid;border–color: transparent transparent transparent #1CB9C4;position: absolute;”></div></div>’)},fnMouseOver:function(){$(this).css(“background“,”rgb(134, 134, 134)”);$(this).css(“border“,”1px solid rgb(111, 111, 111)”)},fnMouseOut:function(){$(this).css(“background“,””);$(this).css(“border“,””)},fnPrev:function(){if(typeof(ip_global_cur)==”number“&amp;&amp;ip_global_cur>0){ImagePreview.fnReset();$(“#ip-img-preview”).animate({left:”49%”},100);$(“#ip-img-preview”).attr(“src“,ip_global_img_list[–ip_global_cur].src);$(“#ip-img-preview”).animate({left:”50.5%”},100);$(“#ip-img-preview”).animate({left:”50%”},100);ImagePreview.fnAdjustMaxWidth()}},fnNext:function(){if(typeof(ip_global_cur)==”number“&amp;&amp;ip_global_cur<ip_global_img_list.length-1){ImagePreview.fnReset();$(“#ip-img-preview”).animate({left:”51%”},100);$(“#ip-img-preview”).attr(“src“,ip_global_img_list[++ip_global_cur].src);$(“#ip-img-preview”).animate({left:”49.5%”},100);$(“#ip-img-preview”).animate({left:”50%”},100);ImagePreview.fnAdjustMaxWidth()}},fnGetIndexOfCurImg:function(b){for(var a=0;a<ip_global_img_list.length;a++){if($(ip_global_img_list[a]).is(b)){return a}}},onClickEvent:function(a){ImagePreview.fnReset();$(“#ip-img-preview”).attr(“src“,$(this).attr(“src“));ImagePreview.fnAdjustMaxWidth();ip_global_cur=ImagePreview.fnGetIndexOfCurImg($(this));$(“#ip-img-floatshadow”).fadeIn();$(“#ip-img-preview”).fadeIn();$(“#ip-left”).fadeIn();$(“#ip-right“).fadeIn()},fnAdjustMaxWidth:function(){var b=true;var a=$(“#ip-img-preview”).width();if(a<$(“#ip-img-preview”).height()){b=false;a=$(“#ip-img-preview”).height()}if(b&amp;&amp;$(window).width()<a){$(“#ip-img-preview”).css(“width“,”75%”)}else{if(!b&amp;&amp;$(window).height()<a){$(“#ip-img-preview”).css(“height“,”75%”)}}},fnReset:function(){$(“#ip-img-preview”).css(“left”,”50%”);$(“#ip-img-preview”).css(“top“,”50%”);$(“#ip-img-preview”).css(“width”,””);$(“#ip-img-preview”).css(“height“,””)},onMouseScrollEvent:function(b){b.preventDefault();var a=b.originalEvent.wheelDelta||-b.originalEvent.detail;var c=Math.max(-1,Math.min(1,a));if(c<0){$(this).width($(this).width()/1.1);$(this).height($(this).height()/1.1)}else{$(this).width($(this).width()*1.1);$(this).height($(this).height()*1.1)}},onDragEvent:function(c){c.bind(“mousedown“,d);function d(e){if(e.button==0){gapX=e.clientX-c.offset().left;gapY=e.clientY-c.offset().top;$(document).bind(“mousemove”,a);$(document).bind(“mouseup“,b)}return false}function a(e){c.css({left:(e.clientX-gapX+c.width()/2)+”px”,top:(e.clientY-gapY+c.height()/2)+”px”});return false}function b(){$(document).unbind(“mousemove”,a);$(document).unbind(“mouseup“,b)}}};

	<!DOCTYPE html>
	<html lang=”en”>
	<head>
	<meta charset=”UTF-8″>
	<title>Title</title>
	<script src=”js/imagePreview.min.js” type=”text/javascript“></script>
	<script src=”https://www.jq22.com/jquery/jquery-1.10.2.js“></script>
	<style type=”text/css“>
	#imgs img {
	width: 24%;
	}
	</style>
	</head>
	<body>
	<div id=”imgs” style=”height:300px;”>
	<img src=”img/t1.png“>
	<img src=”img/t2.png“>
	<img src=”img/t3.png“>
	<img src=”img/t4.png“>
	</div>
	</body>
	</html>
	<script type=”text/javascript“>
	ImagePreview.init({id:”imgs“});//传参模式一：所有img的父级元素id（不支持跨级，跨级请用第二种）
	// ImagePreview.init({id:$(“#imgs img”)});传参模式二：用jq选择到要初始化的img元素也可以
	</script>

代码007普通

打赏 收藏 海报 链接