焦点图相信大家都很熟悉。本文就是给大家分享一个高斯模糊切换效果的聚焦图。下面就不多说了。让我们看看实现的效果图和示例代码。

翻译

示例代码

！doctype html html ownerta charset=' utf-8 '标题无标题文档/title style @-web工具包-关键帧显示{ 0% { opa city 33601；-web套件-transform :秤(1)；} 100% { opa city 3360.1；-web套件-transform :秤(3)；} }正文{ background: # e8d0ca} #环绕{ width :600 pxmargin :100 px auto order :2 px固体# 000;位置：相对；} # list { position : relative height :310 pmargin 33600划水：0;列表式：无；} # list Li { width :281 pxh 8 :310 px background : URL(http://cdn。附上。qd uns。com/notes/pics/201701/17/113914 zaxafffaylelyxd。png)不重复；位置：绝对；top:0transition:6s} #列表跨度{宽度：100%；高度：100%;显示：块；transition:6s } # list li:nth第(1)种类型{ left:0z索引：1;-web套件-transform :比例尺(0.8)；opa city 33600.6 } # list Li : of-type(1)span { background : URL(http://cdn。附上。qd funs。com/notes/pics/201701/17/113914 zfkmqfb 0 zzumnhy。巴布亚新几内亚)；opacity:1 } # list Li第：个-type(2){ left : calc(50%-140 px)；背景-图像： URL(http://cdn。附上。qd uns。com/notes/pics/201701/17/113913 vvkf5pf 4 f 77 x55k。巴布亚新几内亚)；z索引：2;opa city 33601 } # list Li : of-type(2)span {后台： URL(http://cdn。附上。qd funs。com/notes/pics/201701/17/113914 cx8z 8 ldfgckpmf。巴布亚新几内亚)；opa city 33600 } # list Li : th of-type(3){ left : calc(100%-281 px)；背景图像： URL(http://cdn。附上。qd uns。com/notes/pics/201701/17/113914周55 z6tr u25lu。巴布亚新几内亚)；z索引：1;-web套件-transform :比例尺(0.8)；opa city 33600.6 } # list Li : of-type(3)span { background : URL(http://cdn。附上。qd funs。com/notes/pics/201701/17/113914 soof 7 wja0 c0co JV。巴布亚新几内亚)；opacity:1 }。btn { width:18px高度：29 px位置：绝对；top:130pxz索引：10;光标：指针指针；}.BTN span { position : absolute eleft :0 top :0 background : inherit宽度：100%;高度：100%;transition:5s }。BTN :悬停跨度：的类型(1){-网页套件-动画：s如何2s无限；} .BTN :悬停跨度：类型(2){-网络套件-动画：s如何2s 1s无限；} # prev { left :80 pxbackground : URL(http://cdn。附上。qd funs。com/notes/pics/201701/17/113915d 96 E0 acuyjccybcb。png)不重复；} #下一个{ right :80 pxbackground : URL(http://cdn。附上。qd funs。com/notes/pics/201701/17/113915 kfh wnrawaib6a。png)不重复；}/style/head dydiv id=' wrap ' ul id=' list ' Li span/span/Li span/span/Li/ul div id=' prev ' span=' BTN ' span/span/span/div id=' next ' class=' BTN ' span/span/span/span/span/div/div script window。onload=function(){ var oList=document。getelementbyid(' list ')；var AlI=Olist . children var Oprev=document。getelementbyid(' prev ')；var oNext=文档。getelementbyid(' next ')；var arr=[]；//arr。unshift(arr。pop())；把最后一个删除添加到数组第一个//arr。推动(arr。shift())；把第一个删除添加到数组第一个//获取里的信息for(var I=0；iaLi.lengthi ){var oSpan=aLi[i].子级[0];arr[I]={ left : get style(AlI[I]，' left ')、Phinois 3360 get style(AlI[I]，'不透明度)、scale:getStyle(aLi[i]，'-webkit-transform ')、zIndex:getStyle(aLi[i]，' z-index ')、alpha:getStyle(oSpan ')不透明度')};} oprev。onclick=function(){ arr。unshift(arr。pop())；toStyle()；};下一个。onclick=function(){ arr。推动(arr。shift())；toStyle()；};函数tostyle(){ for(var I=0；iaLi.lengthi ){var oSpan=aLi[i].子级[0];aLi[i].style.left=arr[i].向左；aLi[i].style.opacity=arr[i].不透明度；阿里[我]。风格。WebKittransform=arr[I].规模；aLi[i].style.zIndex=arr[i].zindexospan . style . opacity=arr[I].阿尔法；}}};函数getStyle(obj，attr){ if(obj。currentstyle){ return obj。current style[attr]；}返回getcomputed style(obj)[attr]；}/脚本/正文/html更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。