翻牌jquery,翻牌子幽默回复

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

网页实现点击图片后图片消失显示文字

给你实现思路：

扑克翻页效果的原理在于利用眼睛观察物体的错觉，扑克翻页效果分解为两个步骤：

按扑克中轴线，以固定速率将img的width逐步变为0，这样扑克将消失；

动态替换img为扑克反面，以同样速率将img的width由0变为原宽度，完成翻页。

关键代码：

div id="divad1" class="poker" style="text-align: center;"

a onclick＝"javascript:flipPoker()" href="#"img src="front.jpg" id="picad1" height="200" border="0" style="width: 200px; display: inline-block;"/a/div

给这个div内的img元素绑定函数flipPoker

function flipPoker( ){

var tar = $('#picad1');

var origin = tar.attr('src');

var back = "back.jpg" //扑克背面图片名称

//以中轴线渐变将图片隐藏,并瞬间替换img图片内容

tar.animate({width:'0px'},"fast",function(){tar.attr('src',origin);});

//立即渐变还原图片width

tar.animate({width:'200px'},"fast");

}

＝＝＝＝＝＝＝＝＝＝＝＝＝

上述代码用到了jQuery1.8.3 的animate函数

html代码里的样式"text-align:center"很关键，没有这个样式，图片将会自左向右渐变，加了样式之后就是按中轴线渐变了

如果还不行就参考这个页面的代码：

相关问答

Q1: 关于程序员要怎么找工作问题。

让你做打杂的事，就已经开始给你机会了。。。

别人又不知道你到底有多少斤两，怎么敢把重要的交给你呢？任务都是有时间限制的，不可能像在学校或培训机构里让你慢慢的挤出来

这样说，如果今天一上班就把一个模块交给你，并且给你定了一个时限，你肯定又会觉得怎么没有循序渐进，一下来来这么大压力。。。其实对大家来说压力都是一样的，大家做一样的活，都有一定的要求

开始工作的时候最忌讳浮躁，心比天高。大事做不来，小事不愿做，到哪家公司都吃不开。他们给你打杂的活，你能按时或者提前完成么？如果能完成，去看别人写的代码，学里面的技术，经验。光看别人代码，你也就只能跟着点头。写得好，变成自己的；写得不好，你主动完善。时间长了，你就不可能再会是打杂的了。送你一句话：你自己争取来的机会，别人允许你犯错；别人给你的机会，你就不能犯错了

Q2: 怎么用js实现图片的变形

这个用css就可以解决，当然css能解决的js基本都能解决。

首先css：

左边图片设置关键css属性（其他属性你自己补充）：

①透明度：filter: Alpha(Opacity=50);opacity:0.5;兼容火狐和IE，

②Z轴顺序（要小于右边图像）：z-index: 1;也可以不设置；

③定位，固定大小：position: relative(或absolute); left: 100px; top:100px;width:100px;height:80px;

右边图片设置关键css属性（其他属性你自己补充）：

①Z轴顺序（要保证大于左边图像的Z轴顺序）：z-index: 2;

②定位，固定大小：position: relative(或absolute);left: 40px; top:100px;width:100px;height:80px;

js实现的话就稍微复杂一点，如果你懂jQuery也许还能容易点，所以就不写了，太多代码，

因为css就可以解决，那么你就用css实现吧。