jquery滑动显示和隐藏图片特效代码

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

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

以下是 jquery滑动显示和隐藏图片特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<style>
*
{
	font-family:Arial, Tahoma;
	font-size: 12px;
}
html
{
	height:100%;
	overflow: hidden;
}

body
{
	height: 100%;
	margin:20;
	padding:20px;
	overflow: hidden;
}
</style>
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery.slide.js" type="text/javascript"></script>
<script>
 $(document).ready(function(){  
       $('#slideLeftShow').click(function(){
       	$('.slide').slideLeftShow();
       	return false;
       });
       $('#slideLeftHide').click(function(){
       	$('.slide').slideLeftHide();
       	return false;
       });
       $('#slideLeftToggle').click(function(){
       	$('.slide').slideLeftToggle();
       	return false;
       });
       $('#slideRightShow').click(function(){
       	$('.slide').slideRightShow();
       	return false;
       });
       $('#slideRightHide').click(function(){
       	$('.slide').slideRightHide();
       	return false;
       });
       $('#slideRightToggle').click(function(){
       	$('.slide').slideRightToggle();
       	return false;
       });
 });
</script>
</head>
<body>
<a id="slideLeftShow" href="#">slideLeftShow</a> &nbsp; <a id="slideLeftHide" href="#">slideLeftHide</a> &nbsp; <a id="slideLeftToggle" href="#">slideLeftToggle</a><br>
<a id="slideRightShow" href="#">slideRightShow</a> &nbsp; <a id="slideRightHide" href="#">slideRightHide</a> &nbsp; <a id="slideRightToggle" href="#">slideRightToggle</a>
<p>
	<div class="slide" style="width: 200px; height:200px; border: 1px solid #000">
		position: '';<br>
		width: 200px;<br>
		height:200px;<br />
<img src="images/pic.jpg" width="205" height="246" />

	</div>
	<div class="slide" style="position: relative; left:200px; top:100px; width: 200px; height:200px; border: 1px solid #000">
		position: relative;<br>
		left:200px;<br>
		top:100px;<br>
		width: 200px;<br>
		height:200px;<br />
<img src="images/3.jpg" width="205" height="246" />
	</div>
	<div class="slide" style="position: absolute; left:700px; top:150px; width: 200px; height:300px; border: 1px solid #000">
		position: absolute;<br>
		left:700px;<br>
		top:150px;<br>
		width: 300px;<br>
		height:300px;<br />
<img src="images/2.jpg" width="205" height="246" />
	</div>
</body>
</html>

JS代码(jquery.slide.js):

(function($){
	$.extend($.fn,{
	slideLeftShow:function(speed,callback){
	return this.animate({
	width:"show"}
,speed,callback);
}
,slideLeftHide:function(speed,callback){
	return this.animate({
	width:"hide"}
,speed,callback);
}
,slideLeftToggle:function(speed,callback){
	return this.animate({
	width:"toggle"}
,speed,callback);
}
,slideRightShow:function(speed,callback){
	return this.animate({
	width:"show"}
,{
	step:function(now,data){
	var w = Math.ceil(now);
	if(typeof(data.origLeft) == 'undefined'){
	var position = $(this).css('position');
	if(position=='static'){
	$(this).css('position','relative');
}
data.origPos = position;
	data.origLeft = data.end+parseInt($(this).css('left'))||0;
}
$(this).css({
	left:data.origLeft-(data.start+w)}
);
	if(w==data.end)$(this).css('position',data.origPos);
}
,duration:speed,complete:callback}
);
}
,slideRightHide:function(speed,callback){
	return this.animate({
	width:"hide"}
,{
	step:function(now,data){
	var w = Math.ceil(now);
	if(typeof(data.origLeft) == 'undefined'){
	var position = $(this).css('position');
	if(position=='static'){
	$(this).css('position','relative');
}
data.origPos = position;
	data.origLeft = parseInt($(this).css('left'))||0;
}
$(this).css({
	left:data.origLeft+(data.start-w)}
);
	if(w==0)$(this).css({
	left:data.origLeft,position:data.origPos}
);
}
,duration:speed,complete:callback}
);
}
,slideRightToggle:function(speed,callback){
	return this.animate({
	width:"toggle"}
,{
	step:function(now,data){
	var w = Math.ceil(now);
	if(typeof(data.origLeft) == 'undefined'){
	var position = $(this).css('position');
	if(position=='static'){
	$(this).css('position','relative');
}
data.origPos = position;
	data.origLeft = data.end+parseInt($(this).css('left'))||0;
}
if(data.start == 0){
	if(w==data.end)$(this).css('position',data.origPos);
	$(this).css({
	left:data.origLeft-(data.start+w)}
);
}
else{
	$(this).css({
	left:data.origLeft+(data.start-w)}
);
	if(w==0)$(this).css({
	left:data.origLeft,position:data.origPos}
);
}
}
,duration:speed,complete:callback}
);
}
}
);
}
)(jQuery);

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