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> ...
随机推荐
- 学习django: 庄园漫步
最近在阅读django的资料. 发现一个系列写得很好. <被解放的姜戈> 作者:Vamei 出处:http://www.cnblogs.com/vame 感谢大神指路呀~
- Https接口调用工具类
ClientUtil.java import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org. ...
- python基本数据类型零碎知识点
...
- nginx+php设置大文件请求上传(502及504问题处理)
502问题 php-fpm 修改项: request_terminate_timeout 位置: eg: /etc/php5/fpm2/pool.d/www.conf ; The timeout fo ...
- sql--left join,right join, inner join
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...
- 禁止ios10双指缩放
document.addEventListener('gesturestart', function(event) { event.preventDefault(); });
- linux系统awk命令
awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息awk处理过程:?依次对每一行进行处理,然后输出awk命令形式:awk [-F|-f ...
- springboot(1)-基础篇
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- 韦东山嵌入式Linux学习笔记03--如何搭建软件环境
1. 从网上下一个虚拟机,比如vmvare station 2.下一个ubuntu镜像回来安装, 我下了14.04来安装.参考链接: https://blog.csdn.net/qq1326702 ...
- Spring Boot热部署插件
在实际开发中,我们修改某些代码逻辑功能或页面都需要重启应用,这无形中降低了开发效率,热部署是指当我们修改代码后,服务能自动重启加载新修改的内容,而不需要重启应用,这样大大提高了我们开发的效率. Spr ...