JS实现图片高斯模糊切换效果的焦点图实例


Posted in Javascript onJanuary 21, 2017

焦点图相信对大家来说都不陌生,本文给大家分享的是一种图片高斯模糊切换效果的焦点图,下面话不多说了,来看看实现的效果图和实例代码吧。

效果图

JS实现图片高斯模糊切换效果的焦点图实例

实例代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes show
{
	0%{
		opacity:1;
		-webkit-transform:scale(1);
	}
	100%
	{
		opacity:.1;
		-webkit-transform:scale(3);
	}
}
body{ background:#e8d0ca;}
#wrap{width:600px; margin:100px auto;border:2px solid #000; position:relative;}
#list{ position:relative; height:310px;margin:0;padding:0; list-style:none;}
#list li{ width:281px;height:310px; background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914zaxalfffaylelyxd.png) no-repeat; position:absolute;top:0; transition:.6s;}
#list span{ width:100%;height:100%; display:block;transition:.6s;}
#list li:nth-of-type(1){ left:0;z-index:1; -webkit-transform:scale(0.8);opacity:0.6;}
#list li:nth-of-type(1) span{ background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914zfkmqfb0zzummnhy.png); opacity:1;}
#list li:nth-of-type(2){ left:calc(50% - 140px);background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113913nvvkf5pf4f77x55k.png);z-index:2; opacity:1;}
#list li:nth-of-type(2) span{ background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914cx8x8z8ldfgckpmf.png); opacity:0;}
#list li:nth-of-type(3){ left:calc(100% - 281px);background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914zhou55z6tlru25lu.png);z-index:1;-webkit-transform:scale(0.8); opacity:0.6;}
#list li:nth-of-type(3) span{ background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113914sofg7wja0c0cowjv.png); opacity:1;}
.btn{width:18px;height:29px; position:absolute;top:130px;z-index:10; cursor:pointer;}
.btn span{ position:absolute;left:0;top:0; background:inherit; width:100%;height:100%; transition:.5s;}
.btn:hover span:nth-of-type(1){-webkit-animation:show 2s infinite; }
.btn:hover span:nth-of-type(2){-webkit-animation:show 2s 1s infinite; }
#prev{ left:80px; background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113915d96e0acuyjccybcb.png) no-repeat;}
#next{ right:80px; background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/17/113915kfhwnrawaeaibf6a.png) no-repeat;}
</style>
</head>
<body>
<div id="wrap">
	<ul id="list">
 	<li>
 	<span></span>
 </li>
 <li>
 	<span></span>
 </li>
 <li>
 	<span></span>
 </li>
 </ul>
 <div id="prev" class="btn">
 	<span></span>
 <span></span>
 </div>
 <div id="next" class="btn">
 	<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=document.getElementById("next");
	var arr=[];
	//arr.unshift(arr.pop());把最后一个删除添加到数组第一个
	//arr.push(arr.shift());把第一个删除添加到数组第一个
 //获取li的信息
	for(var i=0;i<aLi.length;i++)
	{
		var oSpan=aLi[i].children[0];
		arr[i]={left:getStyle(aLi[i],"left"),opacity:getStyle(aLi[i],"opacity"),scale:getStyle(aLi[i],"-webkit-transform"),zIndex:getStyle(aLi[i],"z-index"),alpha:getStyle(oSpan,"opacity")};
	}
	oPrev.onclick=function()
	{
		arr.unshift(arr.pop());
		toStyle();
	};
	oNext.onclick=function()
	{
		arr.push(arr.shift());
		toStyle();
	};
	function toStyle()
	{
		for(var i=0;i<aLi.length;i++)
		{
			var oSpan=aLi[i].children[0];
			aLi[i].style.left=arr[i].left;
			aLi[i].style.opacity=arr[i].opacity;
			aLi[i].style.WebkitTransform=arr[i].scale;	
			aLi[i].style.zIndex=arr[i].zIndex;	
			oSpan.style.opacity=arr[i].alpha;
		}	
	}
};
function getStyle(obj,attr)
{
 if( obj.currentStyle){
  return obj.currentStyle[attr]; 
 }
 return getComputedStyle(obj)[attr]; 
}
</script>
</body>
</html>

总结

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

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 #Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 #Javascript
利用transition实现文字上下抖动的效果
Jan 21 #Javascript
jQuery Ajax实现跨域请求
Jan 21 #Javascript
three.js快速入门【推荐】
Jan 21 #Javascript
详解Angualr 组件间通信
Jan 21 #Javascript
js的三种继承方式详解
Jan 21 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
JS中的三个循环小结
2017/06/20 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python实现简单文件读写函数
2021/02/25 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
大学班级学风建设方案
2014/05/01 职场文书
搞笑婚前保证书
2015/02/28 职场文书
校车司机安全责任书
2015/05/11 职场文书
庆七一活动简报
2015/07/20 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
background-position百分比原理详解
2021/05/08 HTML / CSS