百度云盘　　传送门　　密码：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. 安装Composer与PsySH

    Windows安装Composer 需要开启 openssl 配置:打开 php 目录下的 php.ini,将 extension=php_openssl.dll 前面的分号去掉就可以了. https ...

  2. java native本地方法详解（转）

    文章链接出处: 详解native方法的使用 自己实现一个Native方法的调用 JNI 开始本篇的内容之前,首先要讲一下JNI.Java很好,使用的人很多.应用极 广,但是Java不是完美的.Java ...

  3. jQuery导出word文档

    DDoc.js function DDoc() { this.data = []; this.relationData = []; this.listCount = 0; this.counter = ...

  4. shell脚本之nginx启动脚本、统计日志字段、for循环实战、跳板机

    1.NGINX启动脚本 #!/bin/bash # chkconfig: 235 32 62 # description: nginx [ -f /etc/init.d/functions ] &am ...

  5. 设置队列中文件上的“X”号的点击事件+uploadLimit动态加1

    目的:1.设置文件队列中“x”号的点击事件 2.每次删除服务器文件后,把uploadLimit + 1: 'onUploadSuccess': function (file, data, respon ...

  6. 预约系统（四） 管理页面框架搭建easyUI

    Manage控制器用于管理页面 Index视图为管理页面首页,采用easyUi的后台管理框架 Html头部调用,jquery库,easyui库,easyui.css,icon.css,语言包 < ...

  7. eclipse 保存web.xml 和 loading description from 问题的解决

    Eclipse 版本为 2019-06 (4.12.0) 发现开启的时候一直有loading description from ***  ,这个loading description 是web项目加载 ...

  8. linux之信息查看

    在使用Linux操作系统的时候,有时候会需要了解当前使用的系统版本信息,特别是在给别人进行服务器部署运维的时候,准确的系统版本信息至关重要 查看linux内核版本信息: cat  /proc/vers ...

  9. Hadoop网页监控配置

    接之前的内容http://www.cnblogs.com/jourluohua/p/8734406.html 在之前那的内容中,仅实现了Hadoop的安装和运行,距离实际使用还有很远.现在先完成一个小 ...

  10. linux中查看文件夹结构的小工具

    tree命令是Linux/UNIX系统中常用的命令,可以非常方便地查看文件夹的结构,并且以树形目录的形式展示 在Ubuntu中安装 sudo apt-get install tree 在CentOS中 ...