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> ...
随机推荐
- python多进程，并获取每个进程的返回值
pool = multiprocessing.Pool(processes=10) row = [...] for row in rows: task_id = row[1] img_id = row ...
- jquery的ajax方法使用application/json出现400错误码的解决方案
400说明是客户端错误,将contentType默认的application/x-www-form-urlencoded改成application/json就出现错误,说明传输的数据不是JSON. 解 ...
- LinkedList实现基于LRU算法的缓存
LinkedList实现基于LRU算法的缓存 2015年08月07日 18:18:45 秦江波 阅读数 2068 文章标签: java算法linkedlist缓存LRU更多 分类专栏: Java ...
- linux增加swap大小
参考自:https://blog.csdn.net/ssrmygod/article/details/70157716 我在centos6.5上照着操作成功了首先查一下目前swap的大小: [root ...
- private修饰的方法可以通过反射访问，那么private的意义是什么？
反射代码: package test; public class Person { private String userName= "Tom"; private void pla ...
- yarn的安装步骤
yarn依赖npm,是npm中的一个包 https://www.npmjs.com/package/yarn 1.安装 npm i -g -yarn 2.测试是否安装成功 yarn --vresion ...
- EF报错：对一个或多个实体的验证失败（Entity Framework 强制转换失败数据异常处理方法）
1.使用MVC和EF,在保存数据的时候报错:System.Data.Entity.Validation.DbEntityValidationException: 对一个或多个实体的验证失败.有关详细信 ...
- 用ant打包
Eclipse 内置了 Ant . Ant 是一种类似于批处理程序的软件包,它主要繁琐的工作是编写和调试自动处理脚本(一个 XML 文件),但只要有了这个脚本,我们就可以一键完成所有的设定工作. 本节 ...
- CDH中Oozie无法卸载
问题:HUE依赖Oozie 所以Oozie不能够卸载,好坑啊 解决思路: 重新装回来,但是不启动Oozie,节约一部分性能.
- poj 2033 Alphacode (dp)
Alphacode Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 13378 Accepted: 4026 Descri ...