原生js實(shí)現(xiàn)簡(jiǎn)單的焦點(diǎn)圖效果實(shí)例
用到一些封裝好的運(yùn)動(dòng)函數(shù),主要是定時(shí)器
效果為圖片和圖片的描述定時(shí)自動(dòng)更換。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } img { border: none; vertical-align: top; } #bg_box { width: 1000px; height: 590px; margin: 50px auto; position: relative; background: url(img/bg1.jpg) no-repeat; } .pic { width: 440px; height: 274px; position: absolute; top: 50px; left: 220px; overflow: hidden; } .li_box { width: 1760px; height: 274px; position: absolute; left: 0; } .tags { width: 440px; height: 80px; position: absolute; bottom: -80px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%); color: white; padding-left: 20px; padding-top: 15px; box-sizing: border-box; } .tags:nth-of-type(1) { /*bottom: 0;*/ } .img { float: left; width: 440px; height: 274px; } h3 { font: bold 20px/30px "微軟雅黑"; } p { font: 16px/30px "微軟雅黑"; } </style> <script src="tween.js"></script> <script src="commom.js"></script> <script type="text/javascript"> window.onload = function() { //獲取元素 var liBbox = $('ul')[0]; var li = $('li'); var tags = $('.tags') var num = 0; //設(shè)置初始位置 Change() function Change() { var M = tags[num]; MTween(M, 'bottom', 0, 500, 'px', 'linear', function() { //先讓描述內(nèi)容出現(xiàn) num++ if(num > li.length - 1) { //邊界設(shè)置。 return; } setTimeout(function() { MTween(M, 'bottom', -80, 500, 'px', 'linear', function() { //讓描述內(nèi)容不顯示 MTween(liBbox, 'left', -num * 440, 800, 'px', 'linear', function() { Change(); }); //切換圖片 }); }, 1000) }); } } </script> </head> <body> <section id="bg_box"> <div class="pic"> <ul class="li_box"> <li> <img class="img" src="img/a5.gif"> </li> <li> <img class="img" src="img/a6.gif"> </li> <li> <img class="img" src="img/a7.gif"> </li> <li> <img class="img" src="img/a8.gif"> </li> </ul> <div class="tags"> <h3 class="title">下雨了~~~</h3> <p class="tag">這是一個(gè)適合在家睡覺(jué)的日子!!</p> </div> <div class="tags"> <h3 class="title">包餃子~~~</h3> <p class="tag">一只會(huì)居家過(guò)日子的小狐貍!!</p> </div> <div class="tags"> <h3 class="title">生氣了~~~</h3> <p class="tag">吃掉好吃的就不生氣了?。?lt;/p> </div> <div class="tags"> <h3 class="title">出發(fā)了~~~</h3> <p class="tag">來(lái)一段說(shuō)走就走的旅行!!</p> </div> </div> </section> </body> </html>
commom.js
function MTween(obj,attr,end,duration,unit,way,callBack){ if(obj.isAnim) return; //obj開始運(yùn)動(dòng)了 自定義屬性 obj.isAnim = true; if(!way){ //如果用戶沒(méi)有選擇運(yùn)動(dòng)方式就默認(rèn)勻速 way = 'linear'; } if(!unit){ //如果用戶沒(méi)有選擇運(yùn)動(dòng)方式就默認(rèn)勻速 unit = ''; } var start = parseFloat(getStyle(obj,attr));//起始位置 // var end = 1000;//目標(biāo)點(diǎn) // var duration = 1000;//動(dòng)畫執(zhí)行的總時(shí)間 單位是毫秒 var startTime = Date.now(); var s = end - start; //總路程 // var v = s/duration; //計(jì)算出來(lái)的速度 //每次20ms走一幀 clearInterval(timer); var timer = 0; timer = setInterval(function(){ var endTime = Date.now(); //計(jì)算出當(dāng)前時(shí)間 var t = endTime-startTime; if(t>=duration){ t = duration; clearInterval(timer);//到達(dá)目標(biāo)點(diǎn)要清除定時(shí)器 } // obj.style[attr] = t*s/duration+start+'px'; // console.log(Tween[way](t,start,s,duration)) obj.style[attr] = Tween[way](t,start,s,duration)+unit; //透明度的兼容處理 if(attr=='opacity'){ obj.style.filter = 'Alpha(opacity='+Tween[way](t,start,s,duration)*100+')'; } if(t==duration){ obj.isAnim = false; //等到上一個(gè)動(dòng)畫完成 然后再調(diào)用 if(callBack){ callBack(); } } },20); }
tween.js
/* * t : time 已過(guò)時(shí)間 當(dāng)前時(shí)間-初始時(shí)間 * b : begin 起始值 * c : count 總的運(yùn)動(dòng)值 總路程 * d : duration 持續(xù)時(shí)間 總時(shí)間 * * s = vt; => c = t*c/d 這里只計(jì)算總共要運(yùn)動(dòng)的路程 ,不包括起始位置 * * attrVal = t*c/d + b; * * 曲線方程 * * */ //Tween.linear(); var Tween = { linear: function (t, b, c, d){ //勻速 return c*t/d + b; }, easeIn: function(t, b, c, d){ //加速曲線 return c*(t/=d)*t + b; }, easeOut: function(t, b, c, d){ //減速曲線 return -c *(t/=d)*(t-2) + b; }, easeBoth: function(t, b, c, d){ //加速減速曲線 if ((t/=d/2) < 1) { return c/2*t*t + b; } return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInStrong: function(t, b, c, d){ //加加速曲線 return c*(t/=d)*t*t*t + b; }, easeOutStrong: function(t, b, c, d){ //減減速曲線 return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeBothStrong: function(t, b, c, d){ //加加速減減速曲線 if ((t/=d/2) < 1) { return c/2*t*t*t*t + b; } return -c/2 * ((t-=2)*t*t*t - 2) + b; }, elasticIn: function(t, b, c, d, a, p){ //正弦衰減曲線(彈動(dòng)漸入) if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, elasticOut: function(t, b, c, d, a, p){ //*正弦增強(qiáng)曲線(彈動(dòng)漸出) if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, elasticBoth: function(t, b, c, d, a, p){ if (t === 0) { return b; } if ( (t /= d/2) == 2 ) { return b+c; } if (!p) { p = d*(0.3*1.5); } if ( !a || a < Math.abs(c) ) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } if (t < 1) { return - 0.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; } return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; }, backIn: function(t, b, c, d, s){ //回退加速(回退漸入) if (typeof s == 'undefined') { s = 1.70158; } return c*(t/=d)*t*((s+1)*t - s) + b; }, backOut: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 3.70158; //回縮的距離 } return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, backBoth: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 1.70158; } if ((t /= d/2 ) < 1) { return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; } return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, bounceIn: function(t, b, c, d){ //彈球減振(彈球漸出) return c - Tween['bounceOut'](d-t, 0, c, d) + b; }, bounceOut: function(t, b, c, d){//* if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; } return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; }, bounceBoth: function(t, b, c, d){ if (t < d/2) { return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b; } return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b; } }
以上這篇原生js實(shí)現(xiàn)簡(jiǎn)單的焦點(diǎn)圖效果實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼
今天小編就為大家分享一篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09添加、刪除HTML結(jié)點(diǎn) & 上傳圖片預(yù)覽
添加、刪除HTML結(jié)點(diǎn) & 上傳圖片預(yù)覽...2006-10-10我遇到的參數(shù)傳遞中 雙引號(hào)單引號(hào)嵌套問(wèn)題
我遇到的參數(shù)傳遞中 雙引號(hào)單引號(hào)嵌套問(wèn)題2010-02-02關(guān)于JS中match() 和 exec() 返回值和屬性的測(cè)試
這篇文章主要介紹了關(guān)于JS中match() 和 exec() 返回值和屬性的測(cè)試 的相關(guān)資料,需要的朋友可以參考下2016-03-03淺談JavaScript find 方法不支持IE的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談JavaScript find 方法不支持IE的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09關(guān)于取不到由location.href提交而來(lái)的上級(jí)頁(yè)面地址的解決辦法
驗(yàn)證上級(jí)頁(yè)面來(lái)源取不到由location.href提交而來(lái)的頁(yè)面地址,搜索了一大堆沒(méi)有合適的解決辦法,突然想到通過(guò)模擬JS點(diǎn)擊鏈接的方法2009-07-07