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> ...
随机推荐
- 最好用linux版QQ
这个版本的qq是见过linux下做好用的qq,希望对大家有用; 安装简单,qq易用,不卡死,可以接收文件. 安装过程如下: git clone https://gitee.com/wszqkzqk/d ...
- oracle 重置密码(一般电网，国企需要的二级等保)
oracle 10g,11g 可以查找以下,12c没有测试 一.查看profile配置并记录;二.在重置密码之前修改profile(PASSWORD_REUSE_MAX.PASSWORD_REUSE_ ...
- ASP.NET配置KindEditor文本编辑器
文本编辑器:CKEditor和CKFinder KindEditor 1.KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开 ...
- 安装kubuctl
安装和设置kubectl 使用Kubernetes命令行工具kubectl在Kubernetes上部署和管理应用程序.使用kubectl,可以检查集群资源; 创建,删除和更新组件. 以下是安装kube ...
- O018、理解 Keystone 核心概念
参考https://www.cnblogs.com/CloudMan6/p/5365474.html 作为OpenStack的基础支持服务,Keystone做了下面几件事情: 1.管理 ...
- python如何判断字符串是否以某个字母或者数字结尾
1.如果是对某个确定的字符或者数字进行判断,可以直接使用endswith()方法 # 判断str_a是否以‘A’结尾 str_a = '20190813A' print(str_a.endswith( ...
- 创建全文索引----SQLserver
1.启动 Microsoft Search 服务 开始菜单-->SQL程序组-->服务管理器-->下拉筐-->Microsoft Search 服务-->启动它. 2. ...
- TCP/IP模型层次结构
计算机网络体系结构 (1)OSI七层协议:从上到下:应用层.表示层.会话层.传输层.网络层.数据链路层.物理层. (2)TCP/IP四层协议:从上到下:应用层,传输层.网络层.数据链路层.网络接口层. ...
- idea安装完成后要做的几件事（设置字体、编码、行号）
1.设置字体大小和样式 打开设置:File-->Settings 看到如下界面,输入font,点击Editor目录下的Font设置字体大小和样式: Font:字体样式 size:字体大小 Fal ...
- postgres使用pg_ctl 命令
想要用pg_ctl等一系列的命令,需要配置环境变量: PATH=$PATH:$HOME/.local/bin:$HOME/bin:/usr/local/pgsql/binexport PGDATA=/ ...