在线美图

最新推荐文章于 2024-03-21 07:25:16 发布
学习急先锋
最新推荐文章于 2024-03-21 07:25:16 发布
阅读量555
点赞数
分类专栏： js 文章标签：美图
本文链接：https://blog.csdn.net/myvanguard/article/details/52887531
版权
js 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在线美图</title>
<style type="text/css">
*{ padding:0; margin:0; list-style-type:none;}
body{font-family: "??";font-size: 12px;}
#t_con{ width:460px; line-height:20px; color:#00F; cursor:pointer; margin:20px auto 0 auto; border:1px #09C dashed; text-align:center;}
#t_area1{ width:300px; height:200px;overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; }
#t_area{ width:300px; height:200px;overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; }
#t_area ol{ margin:10px 0;}
#t_area li{ width:60px; height:18px; float:left; display:inline; text-align:center; line-height:18px; margin:4px auto auto 5px; }
#t_area li a{ color:#fff; text-decoration:none;}
#t_area li a:hover,a:active{ color:#fff; text-decoration:underline;}
</style>

<!--t_area是生成的盒子 t_con是a所在文本的地方-->

<!--Speia滤镜(Speia)　-->
<style type="text/css">
  .sepia{
    /**  格式，filer: sepia(效果范围)
     *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
     */
    -webkit-filter: sepia(100%);  
    -moz-filter:sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    filter: sepia(100%);  
  }
</style>

<!--灰度图滤镜-->
<style type="text/css">
  .grayscale{
    /**  格式，filer: grayscale(效果范围)
     *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
     */
     -webkit-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);  
  }
</style>

<!--高斯模糊滤镜(Blur)　-->
<style type="text/css">
  .blur{
    /**  格式，filer: blur(模糊半径)
     *  模糊半径，取值范围0~Npx，0为无效果
     */
     -webkit-filter: blur(1px);
     -moz-filter: blur(1px);
     -o-filter: blur(1px);
     -ms-filter: blur(1px);
     filter: blur(1px); 
  }
</style>

<!--反色滤镜(Inver)　-->
<style type="text/css">
  .invert{
    /**  格式，filer: invert(效果范围)
     *  效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果
     */
     -webkit-filter: invert(1);
     -moz-filter: invert(1);
     -o-filter: invert(1);
     -ms-filter: invert(1);
     filter: invert(1); 
  }
</style>

<!--饱和度滤镜(Saturate)　-->
<style type="text/css">
  .saturate{
    /**  格式，filer: saturate(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图
     */
     -webkit-filter: saturate(2);
     -moz-filter: saturate(2);
     -o-filter: saturate(2);
     -ms-filter: saturate(2);
     filter: saturate(2); 
  }
</style>
<!--亮度滤镜(Brightness)　-->
<style type="text/css">
  .brightness{
    /**  格式，filer: brightness(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果
     */
     -webkit-filter: brightness(2);
     -moz-filter: brightness(2);
     -o-filter: brightness(2);
     -ms-filter: brightness(2);
     filter: brightness(2); 
  }
</style>
<!--对比度滤镜(Contrast)　-->
<style type="text/css">
  .contrast{
    /**  格式，filer: contrast(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果
     */
     -webkit-filter: contrast(2);
     -moz-filter: contrast(2);
     -o-filter: contrast(2);
     -ms-filter: contrast(2);
     filter: contrast(2); 
  }
</style>




<!--色相旋转滤镜(Hue Rotate)-->
<style type="text/css">
  .hue-rotate{
    /**  格式，filer: hue-rotate(效果范围)
     *  效果范围，取值范0deg~365deg，0（默认值）为无效果
     */
     -webkit-filter: hue-rotate(200deg);
     -moz-filter: hue-rotate(200deg);
     -o-filter: hue-rotate(200deg);
     -ms-filter: hue-rotate(200deg);
     filter: hue-rotate(200deg); 
  }
</style>

<!--阴影滤镜(Drop Shadow)　-->
<style type="text/css">
  .drop-shadow{
    /**  格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
     *  x-offset和y-offset为阴影的相对于元素左上角的位移距离；
     * 注意：
     *     1. 阴影的外观受border-radius样式的影响；
     *     2. :after和:before等伪元素会继承阴影的效果。
     */
     -webkit-filter: drop-shadow(5px 5px 0px #333);
     -moz-filter: drop-shadow(5px 5px 0px #333);
     -o-filter: drop-shadow(5px 5px 0px #333);
     -ms-filter: drop-shadow(5px 5px 0px #333);
     filter: drop-shadow(5px 5px 0px #333); 

     // 圆角
     border: solid 10px #e00;
     -webkit-border-radius: 10px;
  }
</style>

<!--透明度滤镜-->
<style type="text/css">
    .opacity{   
    filter:alpha(opacity=50); /* IE */  
    -moz-opacity:0.5; /* 老版Mozilla */  
    -khtml-opacity:0.5; /* 老版Safari */  
    opacity: 0.5; /* 支持opacity的浏览器*/  
    }  
</style>


<style type="text/css">
#clickindex1{
 color:black
}
.onLineHandleImg{
color:#00CC99;

width:240px;

background-color:#CC9933;

border-color:#0000FF;

border: 2px solid ;
}
</style> 



<script type="text/javascript">
function showarea(){
    var con = document.getElementById("t_area");
    var arealist = con.getElementsByTagName("li");
    var g = document.getElementById("t_con");
    var val2 = "seeeeeee";
    con.style.display = "block";
    for (var i=0;i<arealist.length;i++){
    arealist[i].onmouseover = function(){this.style.backgroundColor = "red"}
    arealist[i].onmouseout = function(){this.style.backgroundColor = "#F1F9FC"}
    arealist[i].onclick = function(){
             //g.innerHTML = this.innerHTML ;
        //document.getElementById("textnew").innerHTML=g.innerHTML;//赋值给下面一个form的值
    //document.getElementById("ttt").value  = document.getElementById("t_con").innerHTML;      //赋值给下面一个form的值
document.getElementById("selected").value=this.innerHTML ;
//con.style.display = "none";
            }
        }

    }
function offarea(){      //dissappeared when mouse move out this div
    var con = document.getElementById("t_area");
    con.style.display = "none";
    }
var timer;
//新增的方法
function comfirm(){
    var g = document.getElementById("t_con");
var d=document.getElementById("clickindex2");
    g.innerHTML = document.getElementById("selected").value;
//alert(g.innerHTML);
offarea();
if(g.innerHTML=="在线美图"){
d.className="onLineHandleImg"
}
else if(g.innerHTML=="Speia滤镜"){
d.className = "sepia";
}


else if(g.innerHTML=="灰度图滤镜"){
d.className = "grayscale";
}
else if(g.innerHTML=="高斯模糊滤镜"){
d.className = "opacity";
}
else if(g.innerHTML=="反色滤镜"){
d.className = "sepia";
}
else if(g.innerHTML=="对比度滤镜"){
d.className = "contrast";
}
else if(g.innerHTML=="饱和度滤镜"){
d.className = "saturate";
}

else if(g.innerHTML=="亮度滤镜"){
d.className = "brightness";
}
else if(g.innerHTML=="色相旋转滤镜"){
d.className = "hue-rotate";
}
else if(g.innerHTML=="阴影滤镜"){
d.className = "drop-shadow";
}


}





</script>
</head>
<body>
<div class="onLineHandleImg" id="clickindex2">
<p>
<a href="javascript:void(0);"   data-names="onLineHandleImg"
id="t_con" onClick="showarea();clearTimeout(timer);return false;" onmouseout="timer=setTimeout('offarea()',3500);"
>
在线美图
</a>
</p>
<!--请在网页所在的文件夹下插入一张图片-->
<img src="mm.jpg">
</div>

<div id="t_area" onmouseover="showarea() ;clearTimeout(timer);return false;" onmouseout="offarea();clearTimeout(timer)">
<ol>    
<li>高斯模糊滤镜</li>
<li>Speia滤镜 </li>
<li>灰度图滤镜</li>
<li>对比度滤镜</li>
<li>反色滤镜</li>
<li>饱和度滤镜 </li>
 <li>亮度滤镜</li>
<li>色相旋转滤镜</li>
<li>阴影滤镜</li>
<li>透明度滤镜</li>
</ol>

<p>
    <!-- 新增的按钮-->
    <button onclick="comfirm()">确定</button>
    <button onclick="offarea()">取消</button>
</p>

    </div>
<!-- 新增的隐藏域，用来保存当前选择的城市-->
<input type="hidden" id="selected"/>

</body>
这里写图片描述
学习急先锋
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在线美图

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>在线美图</title><style type="text/css">*{ padding:0; margin:0; list-style-t
复制链接

扫一扫
专栏目录