博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于jquery的图片展示--卡牌翻转效果
阅读量:5822 次
发布时间:2019-06-18

本文共 1901 字,大约阅读时间需要 6 分钟。

原文

  卡牌翻转效果是一种很好玩的效果,是我用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配合使用才能达到翻牌效果。欢迎

转载地址:http://slfdx.baihongyu.com/

你可能感兴趣的文章
网站运营 相关术语
查看>>
后台(20)——数据库连接池
查看>>
C# 开机自动启动程序
查看>>
【HDU 5572 An Easy Physics Problem】计算几何基础
查看>>
导致Asp.Net站点重启的10个原因
查看>>
v7000数据恢复_MDisk重建数据恢复方法(北亚数据恢复)
查看>>
线分割平面与平面分割空间问题
查看>>
GIT用服务器上的版本强制覆盖掉本地的版本(转)
查看>>
SQL Server里等待统计(Wait Statistics)介绍
查看>>
haproxy配置监控redis主备切换(转)
查看>>
MySQL绿色版的安装(mysql-5.6.22-win32.zip)
查看>>
Cloud Foundry Job图文详解
查看>>
世界制造三巨头,谁是核心?
查看>>
每日算法1——字符串翻转
查看>>
vagrant provision 典型应用场景
查看>>
剑桥:虚拟货币现在究竟怎么样?我们弄了份大报告
查看>>
STL之priority_queue为复合结构排序
查看>>
The Street:BAT增速超美国科技巨头将成常态 为什么BAT仍有巨大发展潜力?
查看>>
eclipse的格式化规则(即format.xml文件)
查看>>
【PMP】Head First PMP 学习笔记 第一章 引言
查看>>