tofacebook.com -专业IT技术社区 【百家号】脸书百科,JS框架_(JQuery.js)图片相册掀开切换效果 Web程序 - tofacebook.com-专业IT技术社区
81°

【百家号】脸书百科,JS框架_(JQuery.js)图片相册掀开切换效果 Web程序

标签:使用   attr   asc   strong   www.   clear   目的   center   on()   

 

 

 

图片掀开切换效果:

技术分享图片

 

技术分享图片
<!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="images/a1.png" alt="1" /> 
  <img src="images/a2.png" alt="2" /> 
  <img src="images/a3.png" alt="3" /> 
  <img src="images/a4.png" alt="4" /> 
  <img src="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)图片相册掀开切换效果

标签:使用   attr   asc   strong   www.   clear   目的   center   on()   

原文地址:https://www.cnblogs.com/1138720556Gary/p/9376828.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: