欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果

 更新時間:2022年02月23日 14:57:15   作者:hind?sight  
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果的具體代碼,供大家參考,具體內(nèi)容如下

html部分

<div class="wrap" id="wrap">
? ? <div class="slide" id="slide">
? ? ? ? <ul>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic1.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic2.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic3.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic4.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic5.jpg" alt=""></a></li>
? ? ? ? </ul>
? ? ? ? <div class="arrow" id="arrow">
? ? ? ? ? ? <a href="javascript:" id="next"></a>
? ? ? ? ? ? <a href="javascript:" id="prev"></a>
? ? ? ? </div>
? ? </div>
</div>

css部分

@charset "UTF-8";
/*初始化 ?reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
?
.wrap {
? ? margin: 100px auto;
? ? width: 1200px;
}
.slide {
? ? height: 500px;
? ? position: relative;
}
?
.slide li {
? ? position: absolute;
? ? left: 200px;
? ? top: 0;
}
.slide li img {
? ? width: 100%;
}
.arrow {
? ? opacity: 0;
}
#next,#prev {
? ? width: 76px;
? ? height: 112px;
? ? position: absolute;
? ? top: 50%;
? ? margin-top: -56px;
? ? background: url("../images/prev.png") no-repeat;
? ? z-index: 99;
}
#next {
? ? background-image: url("../images/next.png");
? ? right: 0;
}

js部分

<script src="common.js"></script>
? ? <script>
? ? ? ? var config = [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 400,
? ? ? ? ? ? ? ? opacity: 0.2,
? ? ? ? ? ? ? ? height: 250,
? ? ? ? ? ? ? ? left: 50,
? ? ? ? ? ? ? ? top: 20,
? ? ? ? ? ? ? ? zIndex: 2
? ? ? ? ? ? },//0
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 600,
? ? ? ? ? ? ? ? opacity: 0.7,
? ? ? ? ? ? ? ? height: 350,
? ? ? ? ? ? ? ? left: 0,
? ? ? ? ? ? ? ? top: 70,
? ? ? ? ? ? ? ? zIndex: 3
? ? ? ? ? ? },//1
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 800,
? ? ? ? ? ? ? ? opacity: 1,
? ? ? ? ? ? ? ? height: 500,
? ? ? ? ? ? ? ? left: 200,
? ? ? ? ? ? ? ? top: 100,
? ? ? ? ? ? ? ? zIndex: 4
? ? ? ? ? ? },//2
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 600,
? ? ? ? ? ? ? ? opacity: 0.7,
? ? ? ? ? ? ? ? height: 350,
? ? ? ? ? ? ? ? left: 600,
? ? ? ? ? ? ? ? top: 70,
? ? ? ? ? ? ? ? zIndex: 3
? ? ? ? ? ? },//3
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 400,
? ? ? ? ? ? ? ? opacity: 0.2,
? ? ? ? ? ? ? ? height: 250,
? ? ? ? ? ? ? ? left: 750,
? ? ? ? ? ? ? ? top: 20,
? ? ? ? ? ? ? ? zIndex: 2
? ? ? ? ? ? }//4
? ? ? ? ];
? ? ? ? //頁面加載事件
? ? ? ? window.onload = function () {
? ? ? ? ? ? var flag=true;//默認(rèn)所有的動畫都結(jié)束了
? ? ? ? ? ? //獲取li標(biāo)簽
? ? ? ? ? ? var list = my$("slide").getElementsByTagName("li");
? ? ? ? ? ? //散開圖片
? ? ? ? ? ? function assign() {
? ? ? ? ? ? ? ? for (var i = 0; i < list.length; i++) {
? ? ? ? ? ? ? ? ? ? animate(list[i], config[i],function () {
? ? ? ? ? ? ? ? ? ? ? ? flag=true;//回調(diào)函數(shù),當(dāng)動畫加載完后,flag變?yōu)閠rue
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? assign();
? ? ? ? ? ? //點(diǎn)擊右邊焦點(diǎn)
? ? ? ? ? ? my$("next").onclick = function () {
? ? ? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? ? ? flag=false;
? ? ? ? ? ? ? ? ? ? config.push(config.shift());//把數(shù)組中的第一個元素作為返回值并追加加到這個數(shù)組的最后面
? ? ? ? ? ? ? ? ? ? assign();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? //點(diǎn)擊左邊焦點(diǎn)
? ? ? ? ? ? my$("prev").onclick = function () {
? ? ? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? ? ? flag=false;
? ? ? ? ? ? ? ? ? ? config.unshift(config.pop());//把數(shù)組的最后一個元素作為返回值并追加到這個數(shù)組的最前面
? ? ? ? ? ? ? ? ? ? assign();
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? };
? ? ? ? ? ? //鼠標(biāo)進(jìn)入逐漸的顯示左右焦點(diǎn)
? ? ? ? ? ? my$("slide").onmouseover=function () {
? ? ? ? ? ? ? ?animate(my$("arrow"),{"opacity":1});
? ? ? ? ? ? };
? ? ? ? ? ? //鼠標(biāo)離開隱藏
? ? ? ? ? ? my$("slide").onmouseout = function () {
? ? ? ? ? ? ? ? animate(my$("arrow"),{"opacity":0});
? ? ? ? ? ? };
? ? ? ? };
</script>

common.js部分

//根據(jù)id獲取元素對象
function my$(id) {
? ? return document.getElementById(id);
}
/*
* element---任意的元素
* attr---屬性
* */
function getAttrValue(element,attr) {
? ? return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}
//動畫函數(shù)
function animate(element,json,fn) {
? ? clearInterval(element.timeId);
? ? element.timeId=setInterval(function () {
? ? ? ? var flag=true;//假設(shè)都達(dá)到了目標(biāo)
? ? ? ? for(var attr in json){
? ? ? ? ? ? if(attr=="opacity"){//判斷屬性是不是opacity
? ? ? ? ? ? ? ? var current= getAttrValue(element,attr)*100;
? ? ? ? ? ? ? ? //每次移動多少步
? ? ? ? ? ? ? ? var target=json[attr]*100;//直接賦值給一個變量,后面的代碼都不用改
? ? ? ? ? ? ? ? var step=(target-current)/10;//(目標(biāo)-當(dāng)前)/10
? ? ? ? ? ? ? ? step=step>0?Math.ceil(step):Math.floor(step);
? ? ? ? ? ? ? ? current=current+step;
? ? ? ? ? ? ? ? element.style[attr]=current/100;
? ? ? ? ? ? }else if(attr=="zIndex"){//判斷屬性是不是zIndex
? ? ? ? ? ? ? ? element.style[attr]=json[attr];
? ? ? ? ? ? }else{//普通的屬性
?
? ? ? ? ? ? ? ? //獲取當(dāng)前的位置----getAttrValue(element,attr)獲取的是字符串類型
? ? ? ? ? ? ? ? var current= parseInt(getAttrValue(element,attr))||0;
? ? ? ? ? ? ? ? //每次移動多少步
? ? ? ? ? ? ? ? var target=json[attr];//直接賦值給一個變量,后面的代碼都不用改
? ? ? ? ? ? ? ? var step=(target-current)/10;//(目標(biāo)-當(dāng)前)/10
? ? ? ? ? ? ? ? step=step>0?Math.ceil(step):Math.floor(step);
? ? ? ? ? ? ? ? current=current+step;
? ? ? ? ? ? ? ? element.style[attr]=current+"px";
? ? ? ? ? ? }
? ? ? ? ? ? if(current!=target){
? ? ? ? ? ? ? ? flag=false;//如果沒到目標(biāo)結(jié)果就為false
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? if(flag){//結(jié)果為true
? ? ? ? ? ? clearInterval(element.timeId);
? ? ? ? ? ? if(fn){//如果用戶傳入了回調(diào)的函數(shù)
? ? ? ? ? ? ? ? fn(); //就直接的調(diào)用,
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log("target:"+target+"current:"+current+"step:"+step);
? ? },10);
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 一個js的tab切換效果代碼[代碼分離]

    一個js的tab切換效果代碼[代碼分離]

    看了此文(YUI實(shí)現(xiàn)的Tab 切換),有感而發(fā),寫了一個tab切換的函數(shù),做學(xué)習(xí)之用。原生js實(shí)現(xiàn),因?yàn)榭蚣懿缓猛妗?
    2010-04-04
  • JavaScript 2048 游戲?qū)嵗a(簡單易懂)

    JavaScript 2048 游戲?qū)嵗a(簡單易懂)

    使用javascript制作的2048小游戲非常好玩,有意思,下面給大家分享使用javascript代碼制作的2048游戲,需要的朋友參考下吧
    2016-03-03
  • 詳解JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換

    詳解JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換

    在JavaScript中,數(shù)據(jù)類型的轉(zhuǎn)換是一項(xiàng)常見的任務(wù),不同的數(shù)據(jù)類型之間需要相互轉(zhuǎn)換以滿足程序的需求,本篇博客將深入探討JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換,包括隱式轉(zhuǎn)換和顯式轉(zhuǎn)換的概念、轉(zhuǎn)換規(guī)則和常見的數(shù)據(jù)類型轉(zhuǎn)換示例
    2023-06-06
  • javascript實(shí)現(xiàn)別踩白塊兒小游戲程序

    javascript實(shí)現(xiàn)別踩白塊兒小游戲程序

    我們先看到的未開始的頁面黑色和白色方塊是隨機(jī)生成的,完了這么多把沒有發(fā)現(xiàn)時固定不變的。點(diǎn)擊一次方塊,程序需要判斷是黑色還是白色的。如果是黑色的,當(dāng)然程序也是實(shí)現(xiàn)了一次自減,在動畫中是實(shí)現(xiàn)一次下移的,下移的時候點(diǎn)擊的方塊到黃顏色的區(qū)域會變成灰色
    2015-11-11
  • 詳解使用mocha對webpack打包的項(xiàng)目進(jìn)行

    詳解使用mocha對webpack打包的項(xiàng)目進(jìn)行"冒煙測試"的大致流程

    這篇文章主要介紹了詳解使用mocha對webpack打包的項(xiàng)目進(jìn)行"冒煙測試"的大致流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • javascript中onclick(this)用法介紹

    javascript中onclick(this)用法介紹

    this指觸發(fā)事件的對象,接下來為大家分享下javascript中onclick(this)的用法,感興趣的朋友可以參考下哈,希望對你有所幫助
    2013-04-04
  • 微信小程序模板和模塊化用法實(shí)例分析

    微信小程序模板和模塊化用法實(shí)例分析

    這篇文章主要介紹了微信小程序模板和模塊化用法,結(jié)合實(shí)例形式分析了微信小程序中的模板與模塊化概念與簡單使用技巧,需要的朋友可以參考下
    2017-11-11
  • 小程序scroll-view組件實(shí)現(xiàn)滾動的示例代碼

    小程序scroll-view組件實(shí)現(xiàn)滾動的示例代碼

    這篇文章主要介紹了小程序scroll-view組件實(shí)現(xiàn)滾動的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解webpack自動生成html頁面

    詳解webpack自動生成html頁面

    本篇文章主要介紹了詳解webpack自動生成頁面,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • JS運(yùn)動框架之分享側(cè)邊欄動畫實(shí)例

    JS運(yùn)動框架之分享側(cè)邊欄動畫實(shí)例

    這篇文章主要介紹了JS運(yùn)動框架之分享側(cè)邊欄動畫,實(shí)例分析了javascript操作div及css的技巧,需要的朋友可以參考下
    2015-03-03

最新評論