基于jquery的图片展示--卡牌翻转效果-阿里云开发者社区

开发者社区> 杰克.陈> 正文

基于jquery的图片展示--卡牌翻转效果

简介: 原文 http://www.cnblogs.com/daynow/archive/2013/04/29/3051233.html   卡牌翻转效果是一种很好玩的效果,是我用Jquery实现的一种效果,跟Flash实现的效果几乎一模一样。
+关注继续查看

原文 http://www.cnblogs.com/daynow/archive/2013/04/29/3051233.html

  卡牌翻转效果是一种很好玩的效果,是我用Jquery实现的一种效果,跟Flash实现的效果几乎一模一样。代码也非常简单,希望对需要的朋友有所帮助,现在把具体开发过程描述如下:

一、编写HTML代码

<!--卡牌翻转效果容器-->

<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>

二、 编写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代码很重要,必须的请注意,相对位置控制,在通用无限极下拉菜单中我详细介绍过position中absolute 与 relative的区别

三、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配合使用才能达到翻牌效果。欢迎下载

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery 图片滚动特效制作 slide 图片类似窗帘式滚动
jquery特效制作用标题当按钮控制图片窗帘式滚动实现幻灯片效果。   感觉这个效果太好了,做相册绝对完美! 下载的时候提示积分不足,我非常不喜欢下载需要积分这个玩意儿,没办法先弄点积分再说。下载完毕后再免费分享给大家。    下载!
668 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9494 0
jQuery全屏图片焦点图
在线演示 本地下载
599 0
jQuery图片垂直滚动焦点图
在线演示 本地下载
644 0
10款基于jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的jQuery 插件,今天这篇文章向大家推荐10款基于jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1250 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13176 0
jquery 多窗口图片播放以及自动播放
我搜集了2种方法: 1种为写直接写jQuery方法,效果如下: 代码如下: View Code DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
937 0
jQuery 写的插件图片上下切换幻灯效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
587 0
功能强大的jQuery图片查看器插件
功能强大的 jQuery 图片查看器插件 : viewer image.png image.png $(function () { TaskReport.
794 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载