百度云盘　　传送门　　密码:y0dk

图片掀开切换效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery图片相册掀开切换</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(function(){   

    var interval;

    $(".container img").click(function cover(){

            $(this).addClass("zoom").fadeOut(700,append);

            function append(){

            $(this).removeClass("zoom").appendTo(".container").show();

            var name = $(".container").children("img").first().attr("alt");

             $(".name p").text("No "+name);

            }    

    })

    function auto(){

            var play = $(".container").children("img").first();

            play.addClass("zoom").fadeOut(700,append);

            function append(){

            $(this).removeClass("zoom").appendTo(".container").show();

            var name = $(this).parent().children("img").first().attr("alt");

             $(".name p").text("No "+name);

            }

            interval = setTimeout(auto,5000);

    }

    $(".container img").hover(function(){

            stopPlay();

    },function(){

            interval = setTimeout(auto,5000);

    })

    function stopPlay(){

        clearTimeout(interval)

    }

    auto();

})

</script>

</head>

<body>

<h1>Gary</h1>

<div class="container" style="margin-top:100px">

  <img src="data:images/a1.png" alt="1" />

  <img src="data:images/a2.png" alt="2" />

  <img src="data:images/a3.png" alt="3" />

  <img src="data:images/a4.png" alt="4" />

  <img src="data:images/a5.png" alt="5" />

</div>

<div class="name">

<p>No 1</p>

</div>

</body>

</html>

index.html

@charset "utf-8";

body{ background-color: #F5F3F3 }

h1{ text-align:center; font-size:18px}

.container{ background: #FF9; width: 420px; height: 300px; margin: 0px auto; cursor: pointer; overflow: hidden; box-shadow: 6px 4px 5px hsla(0,0%,59%,.2); -webkit-box-shadow: 6px 4px 5px hsla(0,0%,59%,.2); }

.container img{

    background:#FFF;

    display:block;

    width:400px;

    height:280px;

    padding:10px;

    float:left;

    -webkit-transition:0.7s;

    -moz-transition:0.7s;

    -o-transition:0.7s;

}

.zoom{

    position:absolute;

    -moz-transform:translate(-150px,-120px);

    -webkit-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);

    -ms-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);

    -o-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);

}

.name{

    background:#FFF;

    width:220px;

    height:30px;

    margin:15px auto;

    cursor:pointer;

    box-shadow:2px 2px 5px #969696;/*opera或ie9*/

    -webkit-border-radius:20px;

    -moz-border-radius:20px;

    border-radius:20px;

}

.name p{

    font:bold 24px Verdana, Geneva, sans-serif;

    text-align:center;

    line-height:30px;

    color:#FFF;

    background:#333;

    -webkit-border-radius:20px;

    -moz-border-radius:20px;

    border-radius:20px;

}

style.css

实现过程：

.zoom{

    position:absolute;

    -moz-transform:translate(-150px,-120px);

    -webkit-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);

    -ms-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);

    -o-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);

}

transform语法：传送门

　translate(x,y) 定义 2D 转换

　scale(x,y) 定义 2D 缩放转换

　skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换

一、点击相册实现图片切换

    $(".container img").click(function cover(){

            $(this).addClass("zoom").fadeOut(700,append);

            function append(){

            $(this).removeClass("zoom").appendTo(".container").show();

            var name = $(".container").children("img").first().attr("alt");

             $(".name p").text("No "+name);

            }    

    })

addClass() ：向被选元素添加"zoom"类

removeClass() ：从被选元素移除"zoom"类

点击相册实现图片淡入效果：$(selector).fadeOut(speed,callback)

$(selector).fadeOut(speed,callback)

speed：可选。规定元素从可见到隐藏的速度。默认为 "normal"。

参数值：

毫秒 （比如 1500）

"slow"

"normal"

"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。

callback：可选。fadeOut 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

fadeOut() ：使用淡出效果来隐藏被选元素

（jQuery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到淡入淡出效果目的，但缺点是有轻微的卡顿感，并且运行效率一般）

appendTo() ：”在被选元素的结尾（仍然在内部）插入指定内容

children() ：返回被选相册的所有照片，实现便利效果

 二、不点击图片时，实现相册(5s)自动切换图片

    function auto(){

            var play = $(".container").children("img").first();

            play.addClass("zoom").fadeOut(700,append);

            function append(){

            $(this).removeClass("zoom").appendTo(".container").show();

            var name = $(this).parent().children("img").first().attr("alt");

             $(".name p").text("No "+name);

            }

            interval = setTimeout(auto,5000);

    }

　定时器setTimeout()

　setTimeout(code,millisec)：用于在指定的毫秒数后调用函数或计算表达式

　　code （必需）：要调用的函数后要执行的 JavaScript 代码串。
　　millisec（必需）：在执行代码前需等待的毫秒数

　setTimeout() 调用一次只能执行 code 一次

三、当鼠标悬停相册上时停止图片切换

    $(".container img").hover(function(){

            stopPlay();

    },function(){

            interval = setTimeout(auto,5000);

    })

    function stopPlay(){

        clearTimeout(interval)

    }

    auto();

hover() ：规定当鼠标指针悬停在被选元素上时要运行的stopPlay()方法

clearTimeout()：停止setTimeout()的执行

JS框架_(JQuery.js)图片相册掀开切换效果的更多相关文章

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

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

  2. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

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

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

  4. JS框架_(JQuery.js)网页文字评论弹幕

    百度云盘 传送门 密码:3azl jQuery网页右下角文字评论弹幕效果 <!DOCTYPE html> <html> <head> <title>jQ ...

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

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

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

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

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

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

  8. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  9. JS框架_(JQuery.js)模拟刮奖

    百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. Centos8 安装ifconfig(net-tools.x86_64)

    情况: yum search net-tools.x86_64 没有找到结果 解决: 1.yum search net-tools 2. yum install -y net-tools.x86_64 ...

  2. EM 算法(二)-KMeans

    KMeans 算法太过简单,不再赘述 本文尝试用 EM 算法解释 KMeans,而事实上 KMeans 算是 EM 的一个特例 EM 算法是包含隐变量的参数估计模型,那对应到 KMeans 上,隐变量 ...

  3. 福建工程学院第十四届ACM校赛G题题解

    外传:编剧说了不玩游戏不行 题意: 有n个石堆,我每次只能从某一堆中取偶数个石子,你取奇数个,我先手,先不能操作的人输.问最后谁能赢. 思路: 这个题仔细想想,就发现,取奇数的人有巨大的优势,因为假设 ...

  4. java.util.MissingFormatArgumentException: Format specifier '%s'

    java.util.MissingFormatArgumentException: Format specifier '%s' at java.util.Formatter.format(Format ...

  5. JavaSE--异常机制

    异常就是程序在运行时出现的不正常情况.发生在运行时期,java程序在运行时期发生的不正常情况,此时java就按照面向对象的思想对不正常现象进行描述和对象的封装.异常的由来:问题也是现实生活中一个具体的 ...

  6. 第六篇 ajax

    加载异步数据 6-1 加载异步数据 XMLHttpRequest--传统的JavaScript方法实现Ajax功能 6-1-a <!DOCTYPE html PUBLIC "-//W3 ...

  7. js中 base64 转二进制

    function base64toBlob(base64,type) { // 将base64转为Unicode规则编码 let bstr = atob(base64, type), n = bstr ...

  8. 免费数学神器Mathpix发布移动版了，一起来写更快的公式

    目录 1. 按 2. 下载地址 3. 介绍和使用 3.1. 介绍 3.2. 实际使用体验 1. 按 本文介绍的Mathpix可用于将手写的公式通过拍照或截图转成LaTeX 表达式. 写博客.记笔记最麻 ...

  9. 自学Python5.6-面向对象三大基本特征_多态

    自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...

  10. Python测开面试题之装饰器

    Python的装饰器是面试常被问到的问题之一,在面试Python测试开发时被问到的概率不低于70%,那么装饰器的原理是什么,怎么快速写出一个装饰器呢,接下来我们详细讲解装饰器的实现方法. Python ...