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 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 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 array_flip() 删除数组重复元素
2009/01/14 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python实现随机漫步方法和原理
2019/06/10 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
django 实现简单的插入视频
2020/04/07 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
银行实习生的自我评价
2013/12/09 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
建国大业观后感
2015/06/01 职场文书