JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码：ble6
coolShow.js插件图片旋转动画效果
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>coolShow.js插件图片旋转动画特效</title>
<link href="css/coolShow.css" rel="stylesheet" type="text/css" /> <style>
p {
position: fixed;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translateY(-50%);
font-size: 40px;
font-weight: 900;
color: white;
text-shadow: 0 0 50px black;
text-transform: capitalize;
font-family: 'Roboto','Helvetica','Arial',sans-serif;
letter-spacing: 5px;
}
</style> </head> <p>Gary</p> <!-- 代码部分begin -->
<body style = "background:#ecf0f1;">
<div class = "main">
<div id = "coolShow"></div>
<div id = "handBar"></div>
</div>
<script src = "js/jquery-1.7.2.min.js"></script>
<script src = "js/coolShow.js"></script>
<script>
/*
定义需要展示的图片以及图片的展示时间
*/
$(document).ready(function() {
$('#coolShow').coolShow({
imgSrc:['images/1.png','images/2.png','images/3.png'],
speed:40
});
});
</script>
<!-- 代码部分end -->
</body>
</html>
index.html
@charset "utf-8";
*{
padding: 0;
margin: 0;
} body{width:100%;}
.main{width: 580px;height: 600px;margin: 0 auto;}
#coolShow{width:575px;height:400px;}
#coolShow b{opacity: 0; background-position: 0 0; width: 100%;height: 10px;display: block;}
#handBar{margin-top:50px;position: relative;} #handBar span{ opacity: 0.6;
width:100px;
height: 100px;
overflow: hidden;
display: inline-block;
border: 10px solid #217fbc;
margin-left: 65px;
cursor: pointer;
border-radius: 100px;
-ms-border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
} #handBar span:hover{
opacity: 1;
border: 10px solid #1fcf6d;
transform:rotate(360deg) scale(1.1);
-ms-transition: all 0.5s ease-in-out;
-moz-transform:rotate(360deg) scale(1.1);
-wekit-transform:rotate(360deg) scale(1.1);
-o-transform:rotate(360deg) scale(1.1);
} #handBar span img{
width:100%;
height: 100%;
}
.WaterFallBox img{
width:100%;
height:auto;
}
coolShow.css
实现过程
jQuery图片旋转点击淡出淡进切换代码
coolShow.js：淡入淡出图片旋转动画切换特效插件
CSS
下方三个圆形图片位置
#handBar{margin-top:50px;position: relative;}
鼠标放置下方圆形图片上出现的效果
#handBar span:hover{
opacity: 1;
border: 10px solid #1fcf6d;
transform:rotate(360deg) scale(1.1);
-ms-transition: all 0.5s ease-in-out;
-moz-transform:rotate(360deg) scale(1.1);
-wekit-transform:rotate(360deg) scale(1.1);
-o-transform:rotate(360deg) scale(1.1);
}
opacity：设置 div 元素的不透明级别
border：设置 4 个边框的样式
边框长度：10px
四周都是实线： solid
边框颜色：#1fcf6d
transform:rotate(360deg) scale(1.1)
rotate(angle) 定义 2D 旋转
scale(x,y) 定义 2D 缩放转换
transition：用于设置四个过渡属性 传送门
transition-duration 规定完成过渡效果需要多少秒或毫秒
ransition-timing-function 规定速度效果的速度曲线
#handBar span{
opacity: 0.6;
width:100px;
height: 100px;
overflow: hidden;
display: inline-block;
border: 10px solid #217fbc;
margin-left: 65px;
cursor: pointer;
border-radius: 100px;
-ms-border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
cursor ：”规定要显示的光标的类型（形状） 传送门
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
#coolShow{width:575px;height:400px;}
#coolShow b{opacity: 0; background-position: 0 0; width: 100%;height: 10px;display: block;}
DOM
上方源图片和下方圆形图片
<div class = "main">
<div id = "coolShow"></div>
<div id = "handBar"></div>
</div>
定义图片和图片动画时间
<script>
$(document).ready(function() {
$('#coolShow').coolShow({
imgSrc:['images/1.png','images/2.png','images/3.png'],
speed:40
});
});
</script>
JS框架_(coolShow.js)图片旋转动画特效的更多相关文章
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(JQuery.js)点赞按钮动画
百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(Laydate.js)简单实现日期日历
百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...
- JS框架_(Popup.js)3D对话框窗口插件
百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
随机推荐
- AppCan调试问题
来源:http://edu.appcan.cn/theVideoMain1.html?chapterId=248_1 第1步, 生成AppCan调试中心 第2步, 启动AppCan调试中心 第3步, ...
- Collection接口的子接口——Set接口
https://docs.oracle.com/javase/8/docs/api/java/util/Set.html public interface Set<E> extends ...
- js 禁用F12 和右键查看源码
<script> window.onkeydown = function(e) { if (e.keyCode === 123) { e.preventDefault() } } wind ...
- wex5打包详解
1.模式选择 模式一:主要针对是简单的运用,进行智能更新,也就是说即使服务器更新了,客户端也不会立即更新,不适合产品类型的APP. 模式二:服务器资源更新了,客户端也会立即更新. 模式三:调试模式. ...
- js 回顾知识总结一
1.js数据类型? 基本数据类型:String(字符串).boolean(布尔值).Number(数字).undefined(未定义).null(空) 引用数据类型:Object(对象).Array( ...
- 从Spring看Web项目开发
之前简单介绍过Spring框架,本文换个角度重新诠释Spring.使用Java语言开发的项目,几乎都绕不过Spring,那么Spring到底是啥,为何被如此广泛的应用,下面从以下两个问题出发来剖析Sp ...
- Linux查看系统开机和关机时间
1.who 命令查看 who -b 查看最后一次系统启动的时间 who -r 查看当前系统运行时间 [root@test ~]# who -b system ...
- Cocos Creator 热更新文件MD5计算和需要注意的问题
Creator的热更新使用jsb.热更新基本按照 http://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html?h=% ...
- PAT Basic 1040 有几个PAT (25 分)
字符串 APPAPT 中包含了两个单词 PAT,其中第一个 PAT 是第 2 位(P),第 4 位(A),第 6 位(T):第二个 PAT 是第 3 位(P),第 4 位(A),第 6 位(T). 现 ...
- 度限制MST
POJ1639 顶点度数限制的最小生成树 做法:首先把和顶点相连的X条边全部删掉 得到顶点和 X个连通块 然后求出这X个连通块的MST 再把X条边连接回去这样我们就首先求出了X度MST 知道了X度MS ...