html+css+js(+JQuery)制作扑克牌图片切换效果
2018-04-13 23:46
731 查看
要实现的效果图:
先把静态页面写出来:
index.html
此时的效果是这样的:
分析:
背景颜色
图片的位置
图片的边框、圆角以及阴影
让图片动起来
index.css代码:
此时静态的做完了,剩下的就是点击图片的时候进行交换:
首先获取点击的图片的left、top以及z-index值,然后与最前边(z-index数最大的那张)图片的left,top,z-index进行交换,
先给最前边的图片一个标记,我们好知道哪张是最前边的(给class=“pic5”的图片一个title值,值为空就行无所谓)
引入jquery包
加载完成后执行
那么里边写什么呢,
点击图片的时候发生的一些事:
1.获取点击的图片和最前边的图片的left、top以及z-index值
2.进行交换位置
进行交换:
先移除最前边的图片的标号,让点击的图片获取最前边的图片的值并标号,然后最前边的图片获取点击的图片的值
此时是可以动了,但还有一个问题:
如果快速的点击图片的话,会发生什么事:
我们发现它乱了!上边代码中的1000是毫秒,即1秒,点击图片在1秒内完成交换,现在我们是1秒内可能点击了三次甚至更多次,第一次的图片还没有交换,有来了第二次、第三次交换,一时间反应不过来,就出现漏洞了。
我们可以让点击第二次的时候立马归位:
现在就可以了。
贴上index.js的代码:
注:过程中出现的错误
['title']的写法是错误的,把里边的单引号去掉就可以了。
多谢友友么的提醒
资料下载地址:
链接:https://pan.baidu.com/s/1gBYRXXh6WeqsBhFhLYugKw 密码:2bhf
以防万一,附加图片
用到的图片:
先把静态页面写出来:
index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果</title> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <div class="pic pic1"><img src="image/11.jpg" /></div> <div class="pic pic2"><img src="image/22.jpg" /></div> <div class="pic pic3"><img src="image/33.jpg" /></div> <div class="pic pic4"><img src="image/44.jpg" /></div> <div class="pic pic5" title=""><img src="image/55.jpg" /></div> </body> </html>
此时的效果是这样的:
分析:
背景颜色
图片的位置
图片的边框、圆角以及阴影
让图片动起来
index.css代码:
*{ margin:0; padding:0; } body{ /*背景颜色*/ background:#cca0a0; } .pic{ position:absolute; } .pic1 { z-index:1;/*越小越靠下*/ top:120px; left:100px; } .pic2 { z-index:1; top:120px; left:600px; } .pic3 { z-index:2; top:200px; left:200px; } .pic4 { z-index:2; top:200px; left:500px; } .pic5 { z-index:3; top:280px; left:350px; } img { padding:10px; background:#fff; border-radius:10px;/*圆角*/ box-shadow:5px 10px 10px #808080;/*阴影*/ cursor:pointer;/*鼠标移动到图片上,变小手*/ }
此时静态的做完了,剩下的就是点击图片的时候进行交换:
首先获取点击的图片的left、top以及z-index值,然后与最前边(z-index数最大的那张)图片的left,top,z-index进行交换,
先给最前边的图片一个标记,我们好知道哪张是最前边的(给class=“pic5”的图片一个title值,值为空就行无所谓)
引入jquery包
加载完成后执行
$(function(){ });
那么里边写什么呢,
点击图片的时候发生的一些事:
1.获取点击的图片和最前边的图片的left、top以及z-index值
2.进行交换位置
$(".pic").click(function () { /*获取点击的图片的值*/ var left1 = $(this).offset().left;//获取当前图片的left值 var top1 = $(this).offset().top; var zindex1 = $(this).css("z-index"); /*获取最靠前的图片的值*/ var left2 = $(".pic[title]").offset().left; var top2 = $(".pic[title]").offset().top; var zindex2 = $(".pic[title]").css("z-index"); }
进行交换:
先移除最前边的图片的标号,让点击的图片获取最前边的图片的值并标号,然后最前边的图片获取点击的图片的值
//移除最前边的图片的title值 $(".pic[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title"); //动画效果 把最前边的值给点击的图片 $(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", "");
此时是可以动了,但还有一个问题:
如果快速的点击图片的话,会发生什么事:
我们发现它乱了!上边代码中的1000是毫秒,即1秒,点击图片在1秒内完成交换,现在我们是1秒内可能点击了三次甚至更多次,第一次的图片还没有交换,有来了第二次、第三次交换,一时间反应不过来,就出现漏洞了。
我们可以让点击第二次的时候立马归位:
$(".pic[title]").stop(true, true); $(this).stop(true, true);
现在就可以了。
贴上index.js的代码:
//加载完之后
$(function () {
//点击图片的时候
$(".pic").click(function () {
$(".pic[title]").stop(true, true); $(this).stop(true, true);
/*获取点击的图片的值*/
var left1 = $(this).offset().left;//获取当前图片的left值
var top1 = $(this).offset().top;
var zindex1 = $(this).css("z-index");
/*获取最靠前的图片的值*/
var left2 = $(".pic[title]").offset().left;
var top2 = $(".pic[title]").offset().top;
var zindex2 = $(".pic[title]").css("z-index");
//移除最前边的图片的title值 $(".pic[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title"); //动画效果 把最前边的值给点击的图片 $(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", "");
});
});
注:过程中出现的错误
['title']的写法是错误的,把里边的单引号去掉就可以了。
多谢友友么的提醒
资料下载地址:
链接:https://pan.baidu.com/s/1gBYRXXh6WeqsBhFhLYugKw 密码:2bhf
以防万一,附加图片
用到的图片:
相关文章推荐
- Flexslider图片轮播、文字图片相结合滑动切换效果HTML 首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件。
- 实现JS标签切换效果【CSS图片切换】
- 使用jquery + css + html实现点击左右箭头切换图片
- 纯js+html和纯css+html制作手风琴效果
- css图片切换效果代码[不用js]
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- 转:jquery实现tab切换效果及js css ajax推荐
- 基于jquery插件制作左右按钮与标题文字图片切换效果
- 纯js+html和纯css+html制作手风琴效果
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- 用html+css+js实现的一个简单的图片切换特效
- JS+CSS打造腾讯网漂亮的带缩略图的图片幻灯切换效果
- 纯js和纯css+html制作的手风琴的效果
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- html+css+jQuery实现多种图片简单切换功能大综合
- HTML-利用CSS和JavaScript制作一个切换图片的网页
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- JavaScript html js图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
- html+css+jQuery实现多种图片简单切换功能大综合