百度云盘　　传送门　　密码：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-property 规定设置过渡效果的 CSS 属性的名称 

　　transition-duration 规定完成过渡效果需要多少秒或毫秒

　　ransition-timing-function 规定速度效果的速度曲线

 　　transition-delay 定义过渡效果何时开始
 
 
 
 
下方图片样式
#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 光标呈现为十字线。

 　　pointer 光标呈现为指示链接的指针
 
border-radius：向 div 元素添加圆角边框
　　length 定义圆角的形状
　　% 以百分比定义圆角的形状
 
 
点击下方图片展示上方图片（coolShow插件）
#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)图片旋转动画特效的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(JQuery.js)点赞按钮动画

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

  3. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  4. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  5. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  6. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  7. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  8. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  9. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

随机推荐

  1. 从入门到自闭之Python软件命名规范

    软件命名规范:分文件存储 当代码存放在一个py文件中时会存在一下缺点: 不便于管理 可读性差 加载速度慢 是Django的雏形 程序员预定俗称的一些东西 启动文件:也叫启动接口,通常文件夹名字使用bi ...

  2. P3488 [POI2009]LYZ-Ice Skates

    传送门 这一题基础是二分图匹配,并且要知道一个 $Hall$ 定理:对于二分图能完全匹配的充要条件是,设点数少的那边为左边,点数为 $n$,对于 $k \in [1,n]$ ,左边任意 $k$ 个点, ...

  3. CF 403D Beautiful Pairs of Numbers

    The sequence of integer pairs (a1, b1), (a2, b2), ..., (ak, bk) is beautiful, if the following state ...

  4. redis 学习（5）-- 列表类型

    redis 学习(5)-- 列表类型 列表特点 有序.可以重复.左右两边插入弹出 索引相关知识 索引从左往右,从0开始逐个增大 0 1 2 3 4 5 索引从右往左,从-1开始逐个减小 -6 -5 - ...

  5. 剑指offer-扑克牌顺子-知识迁移能力-python

    题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...

  6. golang（6）： 接口 & 反射

    接口详解 // 举例:sort包中的 Sort 函数,如下: func Sort(data Interface) Sort sorts data. It makes one call to data. ...

  7. 104、验证Swarm数据持久性 （Swarm11）

    参考https://www.cnblogs.com/CloudMan6/p/8016994.html   上一节我们成功将 nfs 的volume挂载到 Service上,本节验证 Failover时 ...

  8. 记一次启动Tomcat 控制台以及log4j 乱码问题

    Tomcat启动乱码 问题描述:当你发现你的Tomcat启动时乱码了,而你只是换了个Tomcat版本而已. 在找到真正的问题之前,我在网上百度了N多的资料,都试过了,但是都不行.1.修改了 windo ...

  9. PAT Basic 1011 A+B 和 C (15 分)

    给定区间 [−] 内的 3 个整数 A.B 和 C,请判断 A+B 是否大于 C. 输入格式: 输入第 1 行给出正整数 T (≤),是测试用例的个数.随后给出 T 组测试用例,每组占一行,顺序给出  ...

  10. oracle删除临时表空间一直处于等待状态

    现象: 新建一个临时表空间mytemp 然后将其改为默认临时表空间后,执行一条带order by的查询语句,查询出结构后, 修改默认临时表空间为原来的temp,然后执行 drop tablespace ...