html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来:
index.html
jquery制作扑克牌图片切换效果
此时的效果是这样的:
分析:
背景颜色
图片的位置
图片的边框、圆角以及阴影
让图片动起来
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‘]的写法是错误的,把里边的单引号去掉就可以了。
多谢友友么的提醒
用到的图片:
原文:http://blog.51cto.com/13534640/2103309
html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果相关推荐
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- jq制作扑克牌图片切换 --
扑克图片切换: //点击图片和顶层图片交换位置$(function () {$(".pic").click(function () {$(".pic[title]&quo ...
- 用html制作广告图片切换效果,基于jquery实现图片广告轮换效果代码
效果图: 实现代码: hotmarquee * { margin: 0; padding: 0; } body { font: 12px; padding-top: 50px; padding-rig ...
- php幻灯片切换,JavaScript_JS实现FLASH幻灯片图片切换效果的方法,本文实例讲述了JS实现FLASH幻灯 - phpStudy...
JS实现FLASH幻灯片图片切换效果的方法 本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: JS模拟FLASH幻灯片图片切换效果 /* ul,li{ ...
- html图片轮播怎么写,用js和CSS写图片切换效果(轮播图)
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
- CSS+JS带缩略图随机切换方式的图片切换效果
<html> <head> <title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title> <s ...
- html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
- html网页切换效果,css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
- 3种风吹图片jquery堆叠图片切换效果插件
dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...
最新文章
- 无言的鞭策:日本20年19人获自然科学诺奖
- 【项目管理】人力资源管理
- STM32F4 HAL库开发 -- USB U盘
- php使用redis命令,PHP 使用 Redis
- Parallels Desktop虚拟机无法关机提示“虚拟机处理器已被操作系统重置”
- iOSUIImage变为NSData并进行压缩
- 本地计算机上的MSSQLSERVER服务启动后又停止了。一些服务自动停止,如果它们没有什么可做的,例如“性能日志和警报“服务。...
- 安卓系统修改分辨率.2022.01.05
- require smarty.class.php 报错,Smarty SSTI
- RK3328 中文介绍
- 2018.3.3idea破解(亲测可用)
- 1g的树莓派4b能做什么_树莓派4B开发板简介
- 头条-day04_文章搜索前后端成形记 实名认证审核
- python——理一理yield和yield from、coroutine和生成器、async/await
- 三年Java开发,java程序员电脑推荐
- strcmp函数的C语言实现
- 2021.03.15 云题库
- 搜索编程的艺术之C#实现微信小程序包解密
- 详文解读微信「看一看」多模型内容策略与召回
- SpringCloud - Spring Cloud Alibaba 之 Nacos Discovery服务注册发现(三)