jquery带注释交互式照片js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery带注释交互式照片js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery带注释交互式照片</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/jQuery.iPicture.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jQuery.iPicture.js"></script>
<script>
jQuery(document).ready(function(){
	$( "#iPicture" ).iPicture({
		animation: true,
		animationBg: "bgblack",
		animationType: "ltr-slide",
		pictures: ["picture1","picture2","picture3","picture4","picture5"],
		button: "moreblack",
		moreInfos:{"picture1":[{"id":"tooltip1","descr":"furniture: 299$","top":"185px","left":"393px"},{"id":"tooltip2","descr":"sofa: 199$","top":"346px","left":"483px"},{"id":"tooltip3","descr":"silver candle: 2.99$","top":"461px","left":"556px"}],"picture2":[{"id":"tooltip4","descr":"window","top":"71px","left":"423px"},{"id":"tooltip5","descr":"basket","top":"438px","left":"192px"},{"id":"tooltip6","descr":"hoven","top":"460px","left":"673px"}],"picture3":[{"id":"tooltip7","descr":"Organize the kitchen!","top":"391px","left":"560px"},{"id":"tooltip8","descr":"Hoven: 399$","top":"160px","left":"268px"},{"id":"tooltip9","descr":"chest of drawers","top":"386px","left":"180px"}],"picture4":[{"id":"tooltip10","descr":"pasta maker","top":"277px","left":"672px"},{"id":"tooltip11","descr":"stool","top":"291px","left":"281px"},{"id":"tooltip12","descr":"shelf","top":"144px","left":"579px"},{"id":"tooltip13","descr":"Dishes","top":"183px","left":"181px"}],"picture5":[{"id":"tooltip14","descr":"bed: 199$","top":"398px","left":"351px"},{"id":"tooltip15","descr":"asian style lamp","top":"146px","left":"380px"},{"id":"tooltip16","descr":"console: 105$","top":"273px","left":"567px"}]}
	});
	//set animation false and uncomment this block for a different animation effect
/*	$('.descr').css("display","none");
	$('.more').mouseover(function(){  
		$(this).find('.descr').css("display","");
	}).mouseout(function(){  
		$(this).find('.descr').css("display","none");
	});*/
});
</script>
</head>
<body>
	 <div id="iPicture">
    <div class="slide"><div id="picture1" style="background: url('images/christmas.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
    <div class="slide"><div id="picture2" style="background: url('images/kitchen.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
    <div class="slide"><div id="picture3" style="background: url('images/kitchen2.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
    <div class="slide"><div id="picture4" style="background: url('images/kitchen3.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div><br/>
	<div class="slide"><div id="picture5" style="background: url('images/bedroom.jpg') no-repeat scroll 0 0 #393737; width: 900px; height: 528px;position: relative; margin:0 auto;"></div></div>
	</div>	
</body>
</html>

JS代码(jQuery.iPicture.js):

/* * jQuery UI iPicture 1.0.0 * * Copyright 2011 D'Alia Sara * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * * Depends:*jquery.ui.core.js *jquery.ui.widget.js *jquery.ui.position.js *jquery.ui.draggable.js *jquery.ui.droppable.js * jquery.ui.effects.core.js */
 (function( $ ){
	$.widget( "justmybit.iPicture",{
	options:{
	animation:false,animationBg:"bgblack",animationType:"ltr-slide",button:"moreblack",modify:false,initialize:false,moreInfos:{
}
,pictures:[]}
,// Set up the widget_create:function(){
	var self = this;
	if(self.options.initialize){
	this.initialization();
}
else{
	//each picture$.each(self.options.pictures,function( index,value ){
	var picture = $( '#'+value );
	var info = (self.options.moreInfos[value]);
	if(info!=undefined){
	// each more infos on that picture$.each(info,function( index,value ){
	var div = $('<div id="'+value.id+'" class="more more32"></div>' ).css('top',value.top).css('left',value.left).appendTo(picture);
	var imgButton;
	if(self.options.modify){
	imgButton = $('<div class="imgButtonDrag '+self.options.button+'" title="drag in the picture"></div>').appendTo(div);
	var divInput = $('<div class="inputDiv"></div>').insertAfter(imgButton);
	var input = $('<input type="text" title="type here this tooltip" value="'+value.descr+'" />').appendTo(divInput);
	$('<p class="pDelete" title="delete this tooltip"></p>').insertAfter(input).bind('click',function(){
	$(div).remove();
}
);
}
else{
	imgButton = $('<div class="imgButton '+self.options.button+'"></div>').appendTo(div);
	$('<span class="descr">'+value.descr+'</span>').appendTo(div);
}
// href populatingif(value.href){
	$('#'+value.id+' a').attr('href',value.href);
}
//modify option managementif(self.options.modify){
	var descr;
	$('#'+value.id).draggable({
	//containment:picture,}
);
}
}
);
}
}
);
	//move option managementif(self.options.modify){
	//add selected animationBg if animation set true if(self.options.animation){
	$(".more").addClass(self.options.animationBg);
}
else{
	$(".more").addClass('noAnimation');
}
//workaround for firefox issue on trimming border-radius content $(".more32").css('overflow','visible');
	this.initialization();
	return;
}
//set animationif (self.options.animation){
	this.animation();
}
}
}
,//animation for tooltipsanimation:function(){
	var self = this;
	switch( self.options.animationType ){
	case "ltr-slide":$(".more").addClass('ltr-slide '+self.options.animationBg);
	//Animation function left to right sliding$(".more").hover(function(){
	$(this).stop().animate({
	width:'225px'}
,200).css({
	'z-index':'10'}
);
}
,function (){
	$(this).stop().animate({
	width:'32px'}
,200).css({
	'z-index':'1'}
);
}
);
	break;
}
}
,initialization:function(){
	var self = this;
	$.each(self.options.pictures,function( index,value ){
	var picture = $( '#'+value );
	// list of buttons to change tooltip colorvar listContainer = $('<div class="listContainer"><ul><li class="'+value+'-button '+self.options.button+'" title="drag in the picture"></li></ul><div class="bgList" title="choose another background for tooltips"></div><div class="buttonsList" title="choose another color for tooltips"></div></div>').appendTo('#'+value);
	var buttonsDropp = $('<div class="buttonsDropp"></div>').insertAfter(listContainer);
	$('<ul class="inline buttons">'+'<li id="moregold" class="moregold"></li>' +'<li id="moregrey" class="moregrey"></li>'+'<li id="moreblack" class="moreblack"></li>'+'<li id="moredarkblue" class="moredarkblue"></li>'+'<li id="moreblue" class="moreblue"></li>'+'<li id="morelightblue" class="morelightblue"></li>'+'<li id="morelightblue2" class="morelightblue2"></li>'+'<li id="morewatergreen" class="morewatergreen"></li>'+'<li id="morelightgreen" class="morelightgreen"></li>'+'<li id="moregreen" class="moregreen"></li>'+'<li id="moreyellow" class="moreyellow"></li>'+'<li id="moreorange" class="moreorange"></li>'+'<li id="morered" class="morered"></li>'+'<li id="morepurple" class="morepurple"></li>'+'<li id="moreviolet" class="moreviolet"></li>'+'<li id="morelightviolet" class="morelightviolet"></li>'+'<li id="morefucsia" class="morefucsia">'+'<li id="beadgold" class="beadgold"></li>'+'<li id="beadgrey" class="beadgrey"></li>'+'<li id="beadblack" class="beadblack"></li>'+'<li id="beaddarkblue" class="beaddarkblue"></li>'+'<li id="beadblue" class="beadblue"></li>'+'<li id="beadlightblue" class="beadlightblue"></li>'+'<li id="beadlightblue2" class="beadlightblue2"></li>'+'<li id="beadwatergreen" class="beadwatergreen"></li>'+'<li id="beadlightgreen" class="beadlightgreen"></li>'+'<li id="beadgreen" class="beadgreen"></li>'+'<li id="beadyellow" class="beadyellow"></li>'+'<li id="beadorange" class="beadorange"></li>'+'<li id="beadred" class="beadred"></li>'+'<li id="beadpurple" class="beadpurple"></li>'+'<li id="beadviolet" class="beadviolet"></li>'+'<li id="beadlightviolet" class="beadlightviolet"></li>'+'<li id="beadfucsia" class="beadfucsia"></li>' +'</ul>').appendTo(buttonsDropp);
	chooseButtons = $('ul.buttons').find('li');
	$.each(chooseButtons,function( index,button ){
	$(button).bind('click',function(){
	$.each(self.options.pictures,function( index,pic ){
	$('.'+pic+'-button').removeClass(self.options.button);
	$('.'+pic+'-button').addClass(button.id);
}
);
	$(buttonsDropp).css('display','none');
	buttons = self.element.find('.imgButtonDrag');
	$.each(buttons,function( index,value ){
	$(value).removeClass(self.options.button);
	$(value).addClass(button.id);
}
);
	self.options.button=button.id;
	clickCounter=0;
	return false;
}
);
	$(button).bind('mouseover',function(){
	$(button).css('width','36');
	$(button).css('height','36');
	$(button).css('background-size','36px');
	$(button).css('z-index','10');
}
);
	$(button).bind('mouseout',function(){
	$(button).css('width','32');
	$(button).css('height','36');
	$(button).css('background-size','32px');
	$(button).css('z-index','1');
}
);
}
);
	var clickCounter=0;
	$('#'+value +' .buttonsList').bind('click',function(){
	if(clickCounter==0){
	$(buttonsDropp).css('display','block');
	clickCounter=1;
}
else if(clickCounter==1){
	$(buttonsDropp).css('display','none');
	clickCounter=0;
}
return false;
}
);
	// list of backgrounds to change tooltip backgroundif (self.options.animation){
	$('.listContainer').addClass(self.options.animationBg);
	var bgDropp = $('<div class="bgDropp"></div>').insertAfter(listContainer);
	$('<ul class="inline bg">'+'<li id="bgblack" class="bgblack noborder"></li>' +'<li id="bgwhite" class="bgwhite noborder"></li>' +'</ul>').appendTo(bgDropp);
	chooseBg = $('ul.bg').find('li');
	$.each(chooseBg,function( index,bg ){
	$(bg).bind('click',function(){
	$('.listContainer').removeClass(self.options.animationBg);
	$('.listContainer').addClass(bg.id);
	$(bgDropp).css('display','none');
	more = self.element.find('.more');
	$.each(more,function( index,value ){
	$(value).removeClass(self.options.animationBg);
	$(value).addClass(bg.id);
}
);
	self.options.animationBg=bg.id;
	clickCounter2=0;
	return false;
}
);
	$(bg).bind('mouseover',function(){
	$(bg).css('border','1px solid red');
	$(bg).css('z-index','10');
}
);
	$(bg).bind('mouseout',function(){
	$(bg).css('border','0');
	$(bg).css('z-index','1');
}
);
}
);
	var clickCounter2=0;
	$('#'+value +' .bgList').bind('click',function(){
	if(clickCounter2==0){
	$(bgDropp).css('display','block');
	clickCounter2=1;
}
else if(clickCounter2==1){
	$(bgDropp).css('display','none');
	clickCounter2=0;
}
return false;
}
);
}
else{
	$('#'+value +' .bgList').bind('click',function(){
	alert('animation is off,set animation:true');
}
);
}
//Create a new tooltip$('.'+value+'-button').draggable({
	helper:'clone',//containment:picture,stop:function(event,ui){
	$('<p class="top">'+ui.position.top+'</p><p class="left">'+ui.position.left+'</p>').appendTo(this);
}
}
);
	var plus=0;
	$('#'+value).droppable({
	accept:'.'+value+'-button',drop:function( event,ui ){
	plus++;
	var div = $('<div id="'+value+'-more'+plus+'" class="'+value+' more more32"></div>' ).css('top',ui.position.top+"px").css('left',ui.position.left+"px").draggable(//{
	containment:picture}
).appendTo(picture);
	//add selected animationBg if animation set true if(self.options.animation){
	$(".more").addClass(self.options.animationBg);
}
else{
	$(".more").addClass('noAnimation');
}
//workaround for firefox issue on trimming border-radius content $(".more32").css('overflow','visible');
	var imgButton = $('<div class="imgButtonDrag '+self.options.button+'" title="drag in the picture"></div>').appendTo(div);
	var divInput = $('<div clas="inputDiv"></div>').insertAfter(imgButton);
	var input = $('<input type="text" title="type here this tooltip"/>').appendTo(divInput).focus();
	$('<p class="pDelete" title="delete this tooltip"></p>').insertAfter(input).bind('click',function(){
	$(div).remove();
}
);
}
}
);
}
);
	if(self.options.initialize){
	$('<div class="buttonSave"><p>Initialization mode</p><input type="button" value="save" class="save" title="get code!"/></div>').prependTo(self.element);
	$('<div class="buttonSave"><p>Initialization mode</p><input type="button" value="save" class="save" title="get code!"/></div>').appendTo(self.element);
}
if(self.options.modify){
	$('<div class="buttonSave"><p>Modify mode</p><input type="button" value="save" class="save" title="get code!"/></div>').prependTo(self.element);
	$('<div class="buttonSave"><p>Modify mode</p><input type="button" value="save" class="save" title="get code!"/></div>').appendTo(self.element);
}
$('#'+self.element.attr('id')+' .save').bind('click',function(){
	var moreInfos = 'moreInfos:{
	';
	//each picture$.each(self.options.pictures,function( index,value ){
	if(index>0){
	moreInfos=moreInfos+',';
}
var picture = $( '#'+value );
	var divs = $(picture).find('.more32');
	moreInfos = moreInfos+'"'+value+'":[';
	// each more infos on that picture$.each(divs,function( index,value ){
	if(index>0){
	moreInfos=moreInfos+',';
}
descr=$(value).find('input').val();
	if(descr==undefined){
	descr="";
}
topPosition=$(value).css('top');
	leftPosition=$(value).css('left');
	moreInfos = moreInfos+'{
	"id":"'+value.id+'","descr":"'+descr+'","top":"';
	moreInfos = moreInfos+topPosition+'","left":"'+leftPosition+'"';
	if(value.href){
	moreInfos=moreInfos+',"href":"'+$('#'+value.id+' a').attr('href')+'"';
}
moreInfos=moreInfos+'}
';
}
);
	moreInfos=moreInfos+']';
}
);
	moreInfos=moreInfos+'}
';
	if(self.options.animation){
	alert('animation:true,animationType:"'+self.options.animationType+'",animationBg:"'+self.options.animationBg+'",button:"'+self.options.button+'",'+moreInfos);
}
else{
	alert('animation:false,button:"'+self.options.button+'",'+moreInfos);
}
}
);
}
,// Use the _setOption method to respond to changes to options_setOption:function( key,value ){
	// In jQuery UI 1.8,you have to manually invoke the _setOption method from the base widget$.Widget.prototype._setOption.apply( this,arguments );
	// In jQuery UI 1.9 and above,you use the _super method instead//this._super( "_setOption",key,value );
}
,// Use the destroy method to clean up any modifications your widget has made to the DOMdestroy:function(){
	// In jQuery UI 1.8,you must invoke the destroy method from the base widget$.Widget.prototype.destroy.call( this );
	// In jQuery UI 1.9 and above,you would define _destroy instead of destroy and not call the base method}
}
);
}
( jQuery ) );

CSS代码(jQuery.iPicture.css):

#iPicture{font-family:'Lucida Sans Unicode','Lucida Grande',Tahoma,Arial,san-serif;font-size:62.5%;color:#000000;}
.more32{height:32px;overflow:hidden;padding:0;position:absolute;text-align:left;width:225px;}
.more32 span{font:bold 13px Lucida Grande,Arial,sans-serif;text-align:center;padding:8px 0 0 0;position:absolute;width:160px;}
..more32 a{height:100%;display:inline-block;cursor:pointer;}
.more32 input{border-radius:3px 3px 3px 3px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;float:right;height:20px;margin-right:7px;margin-top:5px;width:100%;background:transparent;font:bold 13px Lucida Grande,Arial,sans-serif;}
.more32 p{height:16px;margin:0 0 0 148px;padding:0;position:relative;width:16px;cursor:pointer;}
.more32 .pDelete{background:url("../images/cross.png") no-repeat scroll right center transparent;position:absolute;right:0;}
.more32 .pInvert{background:url("../images/refresh.png") no-repeat scroll right center transparent;}
.more32 div{float:right;}
.moregreen-{padding-top:2px;}
.top{display:none;}
.left{display:none;}
.ltr-slide{width:32px;padding:0;}
.bgblack{background:url("../images/bg.png") repeat scroll 0 0 transparent;border-radius:30px 30px 30px 30px;-moz-border-radius:30px 30px 30px 30px;-webkit-border-radius:30px 30px 30px 30px;}
.bgblack span{color:#FFFFFF;text-shadow:1px 1px 0 #000000;}
.bgblack input{color:#FFFFFF;text-shadow:1px 1px 0 #000000;border:1px solid #FFFFFF;}
.bgwhite{background:url("../images/bg-white.png") repeat scroll 0 0 transparent;border-radius:30px 30px 30px 30px;-moz-border-radius:30px 30px 30px 30px;-webkit-border-radius:30px 30px 30px 30px;}
.bgwhite span{color:#000000;text-shadow:1px 1px 0 #ffffff;}
.bgwhite input{border:1px solid #000000;color:#000000;text-shadow:1px 1px 0 #ffffff;}
.noAnimation input{background:url("../images/bg-white.png") repeat scroll 0 0 transparent;border:1px solid #000000;color:#000000;}
ul{padding:0;margin:0;}
li{list-style:none;z-index:1000;}
.buttonsDropp{border:1px dashed #333333;position:absolute;width:550px;display:none;background:url("../images/bg-white.png") repeat scroll 0 0 transparent;}
.buttonsDropp li{cursor:pointer;height:36px;width:32px;z-index:1;}
.bgDropp{border:1px dashed #333333;position:absolute;display:none;width:210px;/*background:url("../images/bg-white.png") repeat scroll 0 0 transparent;*/
}
.bgDropp li{cursor:pointer;height:35px;width:200px;z-index:1;margin:0 3px 5px 3px;}
.listContainer{width:53px;height:35px;border-radius:0;}
.listContainer li{cursor:move;height:32px;width:32px;}
.listContainer ul{float:left;}
.buttonsList{float:right;background:url("../images/choosebutton.png") no-repeat scroll right center transparent;height:16px;width:16px;margin-top:3px;margin-right:3px;cursor:pointer;}
.bgList{height:16px;width:16px;background:url("../images/color_swatch.png") no-repeat scroll right center transparent;margin-right:3px;cursor:pointer;float:right;}
.inline{margin:0;}
ul.inline{padding-top:5px;}
.inline li{float:left;}
.buttonSave{display:inline-block;height:25px;vertical-align:bottom;width:100%;background:none repeat scroll 0 0 transparent !important;border-bottom:1px dashed #000000;border-top:1px dashed #000000;margin:3px 0;padding:2px;}
.buttonSave p{display:inline;margin:0;padding:5px 0 0;position:absolute;}
.buttonSave input{left:45%;position:absolute;}
.imgButton{width:32px;height:32px;float:left!important;}
.imgButtonDrag{cursor:move;width:32px;height:32px;float:left!important;}
.noborder{border:0;border-radius:0;}
.inputDiv{width:80%}
/* ################################################################### buttons classes ################################################################### */
.moregold{background:url("../images/moregold/button.png") no-repeat scroll left center transparent;}
.moregrey{background:url("../images/moregrey/button.png") no-repeat scroll left center transparent;}
.moreblack{background:url("../images/moreblack/button.png") no-repeat scroll left center transparent;}
.moredarkblue{background:url("../images/moredarkblue/button.png") no-repeat scroll left center transparent;}
.moreblue{background:url("../images/moreblue/button.png") no-repeat scroll left center transparent;}
.morelightblue{background:url("../images/morelightblue/button.png") no-repeat scroll left center transparent;}
.morelightblue2{background:url("../images/morelightblue2/button.png") no-repeat scroll left center transparent;}
.morewatergreen{background:url("../images/morewatergreen/button.png") no-repeat scroll left center transparent;}
.morelightgreen{background:url("../images/morelightgreen/button.png") no-repeat scroll left center transparent;}
.moregreen{background:url("../images/moregreen/button.png") no-repeat scroll left center transparent;}
.moreyellow{background:url("../images/moreyellow/button.png") no-repeat scroll left center transparent;}
.moreorange{background:url("../images/moreorange/button.png") no-repeat scroll left center transparent;}
.morered{background:url("../images/morered/button.png") no-repeat scroll left center transparent;}
.morepurple{background:url("../images/morepurple/button.png") no-repeat scroll left center transparent;}
.moreviolet{background:url("../images/moreviolet/button.png") no-repeat scroll left center transparent;}
.morelightviolet{background:url("../images/morelightviolet/button.png") no-repeat scroll left center transparent;}
.morefucsia{background:url("../images/morefucsia/button.png") no-repeat scroll left center transparent;}
.beadgold{background:url("../images/beadgold/button.png") no-repeat scroll left center transparent;}
.beadgrey{background:url("../images/beadgrey/button.png") no-repeat scroll left center transparent;}
.beadblack{background:url("../images/beadblack/button.png") no-repeat scroll left center transparent;}
.beaddarkblue{background:url("../images/beaddarkblue/button.png") no-repeat scroll left center transparent;}
.beadblue{background:url("../images/beadblue/button.png") no-repeat scroll left center transparent;}
.beadlightblue{background:url("../images/beadlightblue/button.png") no-repeat scroll left center transparent;}
.beadlightblue2{background:url("../images/beadlightblue2/button.png") no-repeat scroll left center transparent;}
.beadwatergreen{background:url("../images/beadwatergreen/button.png") no-repeat scroll left center transparent;}
.beadlightgreen{background:url("../images/beadlightgreen/button.png") no-repeat scroll left center transparent;}
.beadgreen{background:url("../images/beadgreen/button.png") no-repeat scroll left center transparent;}
.beadyellow{background:url("../images/beadyellow/button.png") no-repeat scroll left center transparent;}
.beadorange{background:url("../images/beadorange/button.png") no-repeat scroll left center transparent;}
.beadred{background:url("../images/beadred/button.png") no-repeat scroll left center transparent;}
.beadpurple{background:url("../images/beadpurple/button.png") no-repeat scroll left center transparent;}
.beadviolet{background:url("../images/beadviolet/button.png") no-repeat scroll left center transparent;}
.beadlightviolet{background:url("../images/beadlightviolet/button.png") no-repeat scroll left center transparent;}
.beadfucsia{background:url("../images/beadfucsia/button.png") no-repeat scroll left center transparent;}

附件:下载该文件资源,减少时间成本(增值服务)