jquery 图片展示--翻牌旋转效果

最新推荐文章于 2022-10-25 16:06:13 发布

Rosanu

最新推荐文章于 2022-10-25 16:06:13 发布

阅读量3k

点赞数

分类专栏： jQuery 文章标签： jquery function border div xhtml float

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

因客户需要图片展示翻牌效果，本人对Flash又是不熟悉，特用Jquery开发这一效果，自认为还不错，满足客户需求，代码也非常简单，希望对需要的朋友有所帮助，现在把具体Jquery代码展示如下：

一、html代码

代码很简单不用解释

二、 CSS代码

     body{font-family:Verdana, Geneva, sans-serif; font-size:12px;}
     #picshowfz { margin:90px;}
     #picshowfz div{float:left; width:118px; margin-left:10px; margin-right:10px; border:0px;}
    #picshowfz img{position:relative;}----这段css代码很重要，必须的请注意

三、js代码

<script>
       var imgarray = new Array("pic/3.gif","pic/4.gif");
//翻转展示图片路径
       var linkarray = new Array("","");
//翻转展示图片连接地址
function fanzhan()
{
$("#picshowfz div").each(function(d){
    //查找所有展示图片并翻转新图片
    $(this).find("img").animate({ width: "0px",left: "59px"}, 300,function(){})
//实现翻转动画 从有到无
    var oldimg = $(this).find("img").attr("src");
//存放原来图片路径
    var oldlink = $(this).find("img").attr("href");
//存放原来图片链接地址
    $(this).find("img").attr("src", imgarray[d])
//设置新图片路径
    $(this).find("img").attr("width", "0");
//设置新图片宽度
    $(this).find("img").attr("href", linkarray[d])
//设置新图片连接地址
    imgarray[d]=oldimg;
    linkarray[d]=oldlink;
    $(this).find("img").animate({ width: "118px",left: "0px"}, 300); 
//翻转动画 从无到有   
})
}
$("#picshowfz div").hover(
//实现鼠标悬停效果  鼠标放到图片上后 图片逐渐变大  移除后图片还原
    function(){        
        $(this).find("img").animate({ width: "138px",left: "-10px",height: "201px",top: "-10px"}, 100);    
    
    }, function(){
    $(this).find("img").animate({ width: "118px",left: "0px",height: "181px",top: "0px"}, 100);        
    })
var anima=setInterval('fanzhan()',5000) 
//定时执行翻牌效果
 $("#picshowfz").hover(
              function () {
                clearInterval(anima);
              },
              function () {
                anima=setInterval('fanzhan()',5000) 
              }
            );  
//鼠标放到图片上停止翻转效果 移除图片翻转效果继续
</script>

该js代码必须引入jquery库，还必须与css配合使用才能达到翻牌效果。

完整代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery翻牌效果</title>
<style type="text/css"> 
	body{font-family:Verdana, Geneva, sans-serif; font-size:12px;}
	#picshowfz { margin:90px;}
	#picshowfz div{float:left; width:118px; margin-left:10px; margin-right:10px; border:0px;}
	#picshowfz img{position:relative;}
</style>  

<script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
<div id="picshowfz">        
<div>
<a href="" target="_blank"><img src="pic/1.gif" width="118" height="181" border="0"/></a>
</div>
      
  <div>
<a href="" target="_blank"><img src="pic/2.gif" width="118" height="181" border="0"/></a>
</div>
</div>

<script>
	   var imgarray = new Array("pic/3.gif","pic/4.gif");
	   var linkarray = new Array("","");
function fanzhan()
{
$("#picshowfz div").each(function(d){
	//
	$(this).find("img").animate({ width: "0px",left: "59px"}, 300,function(){})
	var oldimg = $(this).find("img").attr("src");
	var oldlink = $(this).find("img").attr("href");
	$(this).find("img").attr("src", imgarray[d])
	$(this).find("img").attr("width", "0");
	$(this).find("img").attr("href", linkarray[d])
	$(this).find("img").attr("width", "0");
	imgarray[d]=oldimg;
	linkarray[d]=oldlink;
	$(this).find("img").animate({ width: "118px",left: "0px"}, 300);	
})
}
$("#picshowfz div").hover(
	function(){
		
		$(this).find("img").animate({ width: "138px",left: "-10px",height: "201px",top: "-10px"}, 100);	
	
	}, function(){
	$(this).find("img").animate({ width: "118px",left: "0px",height: "181px",top: "0px"}, 100);		
	})
var anima=setInterval('fanzhan()',5000) 
 $("#picshowfz").hover(
              function () {
                clearInterval(anima);
              },
              function () {
                anima=setInterval('fanzhan()',5000) 
              }
            );  
</script>
</body>
</html>

源代码下载地址：http://files.cnblogs.com/studyplay/jquery%E7%BF%BB%E7%89%8C%E6%95%88%E6%9E%9C.zip

本文转自：http://www.cnblogs.com/studyplay/archive/2012/10/14/2723440.html

Rosanu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 图片展示--翻牌旋转效果

因客户需要图片展示翻牌效果，本人对Flash又是不熟悉，特用Jquery开发这一效果，自认为还不错，满足客户需求，代码也非常简单，希望对需要的朋友有所帮助，现在把具体Jquery代码展示如下：一、html代码代码很简单不用解释二、 CSS代码 body{font-family:Verdana, Geneva
复制链接

扫一扫