百度云盘　　传送门　　密码：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. 实现一台Linux电脑连接另一台Linux(SSH实现linux之间的免密码登陆)

    怎么实现一台Linux电脑连接另一台Linux电脑? 首先查看是否安装ssh服务:systemctl status sshd.service 启动服务:systemctl start sshd.ser ...

  2. go语言坑之并发访问map

    fatal error: concurrent map read and map write 并发访问map是不安全的,会出现未定义行为,导致程序退出.所以如果希望在多协程中并发访问map,必须提供某 ...

  3. 牛客 2B 树 (组合计数)

    传送门 大意: 给定n节点树, 求划分为不超过$k$个连通块的方案数. n,k<=300. 核心观察是每个连通块深度最低的点固定以后染色方案就固定了. 所以答案为$\sum\limits_{i= ...

  4. PHP扩展开发01:第一个扩展

    我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符.(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样: functio ...

  5. C# using用法之一（命名空间相关）

    通过using关键字可以引入命名空间 using System; using System.Collections.Generic; using System.Linq; using System.T ...

  6. python字典保存至json文件

    import os import json class SaveJson(object): def save_file(self, path, item): # 先将字典对象转化为可写入文本的字符串 ...

  7. es6编译器（babel搭建）

    1.安装Node.js,初始化项目 npm init -y 2.安装babel-cli(兼容至ie7) npm i @babel/core @babel/cli @babel/preset-env - ...

  8. vue中，svg图标添加click事件，部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  9. Idea java 程序打jar包（maven）

    1.准备好控制台程序 2.引用的项目打包(公共类接口) 3.开发打包 点击运行 打包结果如下

  10. Alpha阶段评审

    组别  项目名称 学生互评 助教评分 点评建议 第1组 校园物资共享平台 7.97 6.17 界面较为简洁美观,实现物品信息发布,登录注册和个人信息等功能,交易功能待完善: 博客内容比较完善,有alp ...