`
pengsky2002
  • 浏览: 23203 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

JQuery-图片滑动

jQueryJavaScriptCSSAjaxHTML 
阅读更多

photostepcarousel.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://localhost:8080/dojodemo/" />
<title>图片滑动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html { margin:0; padding:0; color:#333333; font-size:12px; line-height:20px; background-color:#FFFFFF;}
ul,li { list-style:none; margin:0; padding:0;}
img { border:none;margin:0;padding:0px;}
a { color:#333333; text-decoration:none;}
a:hover { color:#FC5A0A; text-decoration:none;}
.box_title {color:#590000; line-height:17px; text-align:left; font-weight:bold; font-size:14px;background:url(http://static.l99.com/skin/default/images/bg_title_1.jpg) left top repeat-x;padding:1px 0px 0px 3px;}
.box_line { height:26px; background:url(http://static.l99.com/skin/default/images/line_title_1.jpg) left bottom repeat-x; padding:1px 1px 0px 1px;}
.box_border {width:100%; border:solid 1px #999999; margin-bottom:15px; padding-bottom:4px; overflow:hidden; background: url(http://static.l99.com/skin/default/images/picture/bg_corner.jpg) right bottom no-repeat;}
.photo_select {border:1px #fc5a0a solid;  opacity:0.61; filter:Alpha(Opacity=61);}
.stepcarousel{position: relative;width: 720px;height: 120px;}
.stepcarousel .belt{position: absolute;left: 0;top: 0;}
.prev {display:block;width:20px;height:20px;background: url(http://static.l99.com/skin/default/images/arrow.gif) 0 0 no-repeat;position:absolute;left:0;bottom:0;}
.prev:hover{background: url(http://static.l99.com/skin/default/images/arrow.gif) 0 -20px no-repeat;}		
.next {display:block;width:20px;height:20px;background: url(http://static.l99.com/skin/default/images/arrow.gif) -20px 0px no-repeat;position:absolute;right:0;bottom:0;}
.next:hover {background: url(http://static.l99.com/skin/default/images/arrow.gif) -20px -20px no-repeat;}
.adv_view ul { width:720px; margin: 0px auto;}
.adv_view ul li{ float: left; width: 110px; height:104px; margin: 10px; display:inline;text-align:center; vertical-align:middle; *font-size: 88px;}
.adv_view ul li img {margin:0 auto;vertical-align:middle;}
</style>
</head>

<body>
	<div style="width: 730px; position: relative;left: 20%;top: 100px;">
	<div class="box_border adv_view" style="position: relative;">
			<div class="box_line">
				<div class="box_title">图片滑动</div>	
			</div>
			<div class="stepcarousel" id="mygallery">
				<div class="belt">
					<ul id="hot_picture1" class="hot_picture">
							<li class="styleSingleHotPic photo_select" style="float: none; position: absolute; left: 0px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1221229158335_yezi47_s.jpg" />
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 122px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1218838819597_8gh87i_s.jpg" />
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 242px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219761385362_5mq0kv_s.jpg" />
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 362px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219762971646_8r2c1h_s.jpg" />
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 482px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219716241365_w31br2_s.jpg" />
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 602px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219761443515_3p0m95_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 722px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219240181821_1xrmt9_s.jpeg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 842px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1218910221184_m31atb_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 962px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1218977244296_nk198x_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1082px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219716224546_g0pd8n_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1202px;">
								<a href="javascript:void(0);">
									<img  src="photos/jquery/1221228985007_6fma7t_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1322px;">
								<a href="javascript:void(0);">
									<img  src="photos/jquery/1219716244624_2nr6ce_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1442px;">
								<a href="javascript:void(0);">
									<img  src="photos/jquery/1219716229627_ksc3g3_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1562px;">
								<a href="javascript:void(0);">
									<img  src="photos/jquery/1219762966900_ug829i_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1682px;">
								<a href="javascript:void(0);">
									<img  src="photos/jquery/1219464163301_tg9hk9_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1802px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219716357617_9pti45_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1922px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1219240207051_7aek7x_s.jpg"/>
								</a>
							</li>
						
							<li class="styleSingleHotPic" style="float: none; position: absolute; left: 2162px;">
								<a href="javascript:void(0);">
									<img src="photos/jquery/1218838758341_amia76_s.jpg"/>
								</a>
							</li>
	
					</ul>
				</div>
			</div>
			<a class="prev" href="javascript:stepcarousel.stepBy('mygallery', -6);" title="上一组">  </a>
			<a class="next" href="javascript:stepcarousel.stepBy('mygallery', 6);" title="下一组">  </a>
		</div> 
		<b>当前数:</b> <span id="statusA"></span> <b style="margin-left: 30px">总数:</b> <span id="statusC"></span> <br /><br />
</div>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/photo.stepcarousel.js"></script>

<script type="text/javascript" >
	stepcarousel.setup({
		galleryid: 'mygallery',
		beltclass: 'belt',
		panelclass: 'styleSingleHotPic', 
		panelbehavior: {speed:500, wraparound:true, persist:true},
		defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', 1, 75], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -14, 75]},
		statusvars: ['statusA', 'statusB', 'statusC'],
		contenttype: ['inline']
	});
</script>
</body>
</html>
   

 

 

photo.stepcarousel.js

var stepcarousel={


	ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="http://static.l99.com/skin/default/images/picture/lightbox-ico-loading.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content


	defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)


	configholder: {},





	getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer


		return (val=="auto")? 0 : parseInt(val);


	},





	getremotepanels:function($, config){ //function to fetch external page containing the panel DIVs


		config.$belt.html(this.ajaxloadingmsg);


		$.ajax({


			url: config.contenttype[1], //path to external content


			async: true,


			error:function(ajaxrequest){


				config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText);


			},


			success:function(content){


				config.$belt.html(content);


				config.$panels=config.$gallery.find('.'+config.panelclass);


				stepcarousel.alignpanels($, config);


			}


		})


	},





	getoffset:function(what, offsettype){


		return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype];


	},





	getCookie:function(Name){ 


		var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair


		if (document.cookie.match(re)) //if cookie found


			return document.cookie.match(re)[0].split("=")[1]; //return its value


		return null;


	},





	setCookie:function(name, value){


		document.cookie = name+"="+value;


	},





	fadebuttons:function(config, currentpanel){


		config.$leftnavbutton.fadeTo('fast', currentpanel==0? this.defaultbuttonsfade : 1);


		config.$rightnavbutton.fadeTo('fast', currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1);


	},





	addnavbuttons:function(config, currentpanel){


		config.$leftnavbutton=$('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body');


		config.$rightnavbutton=$('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body');


		config.$leftnavbutton.bind('click', function(){ //assign nav button event handlers


			stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);


		});


		config.$rightnavbutton.bind('click', function(){ //assign nav button event handlers


			stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);


		});


		if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)


			this.fadebuttons(config, currentpanel);


		}


	},





	alignpanels:function($, config){


		var paneloffset=0


		config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)


		config.panelwidths=[] //array to store widths of each panel


		config.$panels.each(function(index){ //loop through panels


			var $currentpanel=$(this);


			$currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}); //position panel


			$currentpanel.bind('click', function(e){return config.onpanelclick(e.target);}); //bind onpanelclick() to onclick event


			paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')); //calculate next panel offset


			config.paneloffsets.push(paneloffset); //remember this offset


			config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]); //remember panel width


		})


		config.paneloffsets.pop(); //delete last offset (redundant)


		var addpanelwidths=0;


		var lastpanelindex=config.$panels.length-1;


		config.lastvisiblepanel=lastpanelindex;


		for (var i=config.$panels.length-1; i>=0; i=i-1){


			addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i]);


			if (config.gallerywidth>addpanelwidths){


				config.lastvisiblepanel=i; //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width


			}


		}


		config.$belt.css({width: paneloffset+'px'}); //Set Belt DIV to total panels' widths


		config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(window[config.galleryid+"persist"])) : 0; //determine 1st panel to show by default


		config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0;


		if (config.currentpanel!=0){


			var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset);


			config.$belt.css({left: -endpoint+'px'});


		}


		if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons


			this.addnavbuttons(config, config.currentpanel);


			$(window).bind("load", function(){ //refresh position of nav buttons when page loads, in case offsets weren't available document.oncontentload


				config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")};


				config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'});


				config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'});


			});


		}


		this.statusreport(config.galleryid);


		config.oninit();


		config.onslideaction(this);


	},





	stepTo:function(galleryid, pindex){ /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */


		var config=stepcarousel.configholder[galleryid];


		if (typeof config=="undefined"){


			alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!");


			return;


		}


		var pindex=Math.min(pindex-1, config.paneloffsets.length-1);


		var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset);


		if (config.panelbehavior.wraparound==false && config.defaultbuttons.enable==true){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)


			this.fadebuttons(config, pindex);


		}


		config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)});


		config.currentpanel=pindex;


		this.statusreport(galleryid);


	},





	stepBy:function(galleryid, steps){


		var config=stepcarousel.configholder[galleryid];


		if (typeof config=="undefined"){


			alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!");


			return;


		}


		var direction=(steps>0)? 'forward' : 'back'; //If "steps" is negative, that means backwards


		var pindex=config.currentpanel+steps ;//index of panel to stop at


		if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)


			pindex=(direction=="back" && pindex<=0)? 0 : (direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex;


			if (config.defaultbuttons.enable==true){ //if default nav buttons are enabled, fade them in and out depending on if at start or end of carousel


				stepcarousel.fadebuttons(config, pindex);


			}	


		}


		else{ //else, for normal stepBy behavior


			pindex=(pindex>config.paneloffsets.length-1 || pindex<0 && pindex-steps>0)? 0 : (pindex<0)? config.paneloffsets.length+steps : pindex; //take into account end or starting panel and step direction


		}


		var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset); //left distance for Belt DIV to travel to


		if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back' && config.panelbehavior.wraparound==true){ //decide whether to apply "push pull" effect


			config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){


				config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this);});


			});


		}


		else


			config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this);});


			config.currentpanel=pindex;


			this.statusreport(galleryid);


	},





	statusreport:function(galleryid){


		var config=stepcarousel.configholder[galleryid];


		var startpoint=config.currentpanel; //index of first visible panel 


		var visiblewidth=0;


		for (var endpoint=startpoint; endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last visible panel


			visiblewidth+=config.panelwidths[endpoint];


			if (visiblewidth>config.gallerywidth){


				break;


			}


		}


		startpoint+=1; //format startpoint for user friendiness


		endpoint=(endpoint+1==startpoint)? startpoint : endpoint; //If only one image visible on the screen and partially hidden, set endpoint to startpoint


		var valuearray=[startpoint, endpoint, config.panelwidths.length];


		for (var i=0; i<config.statusvars.length; i++){


			window[config.statusvars[i]]=valuearray[i]; //Define variable (with user specified name) and set to one of the status values


			config.$statusobjs[i].text(valuearray[i]+" "); //Populate element on page with ID="user specified name" with one of the status values


		}


	},





	setup:function(config){


		//Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users with JS disabled)


		document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>');


		jQuery(document).ready(function($){


			config.$gallery=$('#'+config.galleryid);


			config.gallerywidth=config.$gallery.width();


			config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")};


			config.$belt=config.$gallery.find('.'+config.beltclass); //Find Belt DIV that contains all the panels


			config.$panels=config.$gallery.find('.'+config.panelclass); //Find Panel DIVs that each contain a slide


			config.onpanelclick=(typeof config.onpanelclick=="undefined")? function(target){} : config.onpanelclick; //attach custom "onpanelclick" event handler


			config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$(beltobj).stop(); config.onslide();}; //attach custom "onslide" event handler


			config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit;//attach custom "oninit" event handler


			config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft')); //Find length of Belt DIV's left margin


			config.statusvars=config.statusvars || [];  //get variable names that will hold "start", "end", and "total" slides info


			config.$statusobjs=[$('#'+config.statusvars[0]), $('#'+config.statusvars[1]), $('#'+config.statusvars[2])];


			config.currentpanel=0;


			stepcarousel.configholder[config.galleryid]=config; //store config parameter as a variable


			if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined") //fetch ajax content?


				stepcarousel.getremotepanels($, config);


			else


				stepcarousel.alignpanels($, config); //align panels and initialize gallery


		}) //end document.ready


		jQuery(window).bind('unload', function(){ //clean up


			if (config.panelbehavior.persist){


				stepcarousel.setCookie(window[config.galleryid+"persist"], config.currentpanel);


			}


			jQuery.each(config, function(ai, oi){


				oi=null;


			})


			config=null;


		});


	}


};

 

 

图

  • 大小: 32.9 KB
分享到：
| JQuery-图片剪裁
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery-ui-1.10.2.custom

    3. **Effects**：jQuery UI 提供了一套完整的特效库，如淡入淡出（Fade）、滑动（Slide）、切换（Toggle）等，以及一个用于自定义动画效果的工具集。 4. **Positioning**：这个功能可以帮助开发者精确地定位页面...

    jQuery-Waterwheel-Carousel-图片左右滚动切换特效

    《jQuery Waterwheel Carousel：实现图片左右滚动切换特效详解》 在网页设计中，动态效果的运用可以提升用户体验，其中图片轮播组件是不可或缺的一部分。jQuery Waterwheel Carousel 是一个优秀的插件，专门用于...

    jquery-1.5.1.js;jquery-1.5.1.min.js 框架

    7. **插件生态（Plugin Ecosystem）**：jQuery拥有庞大的插件库，覆盖了各种功能，如表单验证、图片轮播、日期选择器等，极大地扩展了jQuery的功能。 **jQuery 1.5.1特性** - 支持新的CSS3选择器。 - 引入了`....

    jquery-stack-image-player.rar

    为了实现酷狗音乐图片轮播的逼真效果，插件可能采用了平滑过渡的动画效果，比如淡入淡出或左右滑动。这些效果可以通过CSS3的transition属性和jQuery的animate方法实现，使得图片之间的切换更为自然流畅。 在实际...

    jQuery.jquery-finger—左右自适应全屏幻灯片切换

    1. **左右滑动手势支持**：`jQuery-finger` 支持触摸设备的滑动手势，使得在手机和平板电脑上浏览幻灯片更加自然和便捷。 2. **自适应布局**：该插件能够根据浏览器窗口大小自动调整幻灯片尺寸，确保在不同屏幕尺寸...

    jquery的全屏轮播插件jquery-fsscroll

    它可以轻松地集成到项目中，为用户提供流畅的图片或内容切换体验，适用于产品展示、个人作品集、网站背景滑动等多种场景。 **主要特性：** 1. **简便性：** jQuery-fsscroll易于理解和使用，只需要少量的代码就能...

    jquery-ui-1.8.18.zip

    - **图片资源**：一些必要的图片文件，如箭头、滑块的背景等。 - **示例或文档**：可能包括演示如何使用各个组件的HTML和JS文件，以及API文档。 在实际开发中，根据项目需求，可以通过官方提供的定制工具选择需要的...

    jquery-ui-1.8.18.custom.zip

    2. **jQuery UI 特效**：在“jquery-ui-1.8.18.custom.zip”中，包含了许多jQuery特效，例如淡入淡出（fadeIn/fadeOut）、滑动（slide）、动画（animate）等，这些特效能够增强网站的视觉吸引力，提升用户的浏览体验...

    图文切换-多浏览器兼容-jQuery-jcSlider

    它可能包含如淡入淡出、滑动、缩放等多种切换效果，并且其简单的代码结构使得开发者可以快速理解和应用。jcSlider的特性可能还包括自定义设置（如切换速度、动画类型）、响应式设计以适应不同设备，以及易于整合到...

    jquery-gallary4 图片切换

    jQuery-Gallery4是一个基于JavaScript库jQuery的图片轮播插件，它提供了多种动态的图片切换效果，如淡入淡出、滑动、缩放等，使得网页中的图片展示更加生动有趣。其简洁的API和易于定制的特性，使得开发者能够快速...

    jquery-1.3.2.min.js

    - **网页动态效果**：jQuery广泛用于创建交互式的网页元素，如滑动菜单、下拉效果、图片轮播等。 - **Ajax无刷新更新**：通过$.ajax()实现页面部分数据的无刷新更新，提升用户体验。 - **响应式设计**：配合媒体...

    jquery-ui-1.8.13库模板UI演示效果

    1. **组件丰富**：jQuery UI 包含了各种常见的用户界面元素，如日期选择器（Datepicker）、对话框（Dialog）、拖放（Draggable）、可堆叠（Sortable）、可缩放（Resizable）和可滑动（Slidable）等，这些组件极大地...

    jquery-ui js/css通用文件

    3. **Slider（滑块）**：创建可滑动的数值选择器。 4. **Datepicker（日期选择器）**：在输入框中插入一个日历，方便用户选择日期。 5. **Autocomplete（自动完成）**：为输入框提供动态的建议列表。 6. **Tabs...

    jquery-ui-1.10.3.custom

    在文件名称列表中，“jquery-ui-1.10.3.custom”可能是一个已经通过定制器构建的压缩包，其中包含了所选组件的 JavaScript 文件、CSS 文件和必要的图片资源。解压后，开发者只需在网页中引用这些文件，即可实现...

    前端项目-jquery-instagram.zip

    这个项目为开发者提供了一种简单的方式，在他们的网站上实现类似Instagram的用户体验，包括图片展示、滑动浏览、点赞、评论等交互效果。在深入讨论这个项目之前，先了解一下jQuery——一个广泛使用的JavaScript库，...

    jquery-ui-1.8.16.custom.zip

    - **css** 文件夹：包含了jQuery UI的样式文件，包括主题CSS和可能的图片资源。1.8.16版本可能包含默认的“smoothness”主题或其他用户自定义的主题。 - **js** 文件夹：存放jQuery UI的JavaScript库和其他相关...

    jQuery-exposure 多种效果图片滚动相册，焦点图滚动

    1. **滚动相册**：jQuery-exposure的滚动相册功能允许用户以多种形式展示图片，如横向滑动、纵向滑动、轮播等。用户可以自定义滚动速度、方向以及是否显示导航按钮，为用户提供流畅的浏览体验。 2. **焦点图滚动**...

    jquery-ui-1.8.12.custom.zip

    - 下载并解压`jquery-ui-1.8.12.custom.zip`，包含jQuery UI的核心库和所选组件的JavaScript文件、CSS文件以及必要的图片资源。 - 在HTML文件中引入jQuery库和jQuery UI库，确保jQuery先于jQuery UI加载。 - 初始...

    基于JQuery横向跑马灯jQuery-easyAccordion

    而jQuery-easyAccordion则是将这种效果横向展开，使得内容以水平滑动的方式呈现，增加了视觉吸引力。 要理解和使用jQuery-easyAccordion，首先需要了解jQuery基础。jQuery是一个强大的JavaScript库，它简化了DOM...

Magicbox
Global site tag (gtag.js) - Google Analytics