基于JS移动端图片上下左右滑动图片的对比度与灰度变化

最新推荐文章于 2024-06-05 12:42:29 发布

zpcsgo

最新推荐文章于 2024-06-05 12:42:29 发布

阅读量988

点赞数

分类专栏：移动开发 css Js HTML5 微信开发 Bootstrap

本文链接：https://blog.csdn.net/zpcsgo/article/details/69403899

版权

移动开发同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/hammer.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>图像</h1>
    </div>
    <div data-role="main" class="ui-content">
        <img src="img/1.png" style="width:100%;height:100%" id="swipe"/>
    </div>
    <div data-role="footer" id='d1'>
        <h1>底部文本</h1>
    </div>
</div>
</body>
<script>
    //阻止页面下拉
    $(function(){
    document.querySelector('body').addEventListener('touchmove', function(e) {
    e.preventDefault();
})
    });
    //对比度：调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
    //灰度：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
   	var data={contrast:100,grayscale:0};//存储当前值
     //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
    var hammertime = new Hammer(document.getElementById("swipe"));
    //配置hammer,不配置不能进行上下滑动，允许所有方向的滑动
    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
    //左滑动
    hammertime.on("swipeleft", function (e) {
       var CON=data.contrast;//取当前值
       var X=e.deltaX;//水平滑动的距离
       if(X<0)
       {
       	X=X*(-1);
       }
       data.contrast=CON-X/10;//当前距离减去滑动距离的十分之一，可以设置更少
       if(CON<0){
       	data.contrast=0;
       }
         datachage();
   });
    hammertime.on("swiperight", function (e) {
        var CON=data.contrast;
        var X=e.deltaX;
        if(X<0)
        {
        	X=X*(-1);
        }
        data.contrast=CON+X/10;
         datachage();
   });
   hammertime.on("swipeup", function (e) {
   		var GRAY=data.grayscale;
        var Y=e.deltaY;
        if(Y<0)
        {
       		Y=Y*(-1);
        }
       data.grayscale=GRAY+Y/10;
       if(GRAY>100)
       {
       data.grayscale=100;
       }
        datachage();
   });
    hammertime.on("swipedown", function (e) {
        var GRAY=data.grayscale;
        var Y=e.deltaY;
        if(Y<0)
        {
       		Y=Y*(-1);
        }
       data.grayscale=GRAY-Y/10;
        if(GRAY<0){
        data.grayscale=0;
        }
        datachage();
   });
   function  datachage(){
       $("#swipe").css({
         "filter": "grayscale("+data.grayscale+"%) contrast("+data.contrast+"%)",//灰度与对比度的设置，都设置为当前值
         "-webkit-filter":"grayscale("+data.grayscale+"%) contrast("+data.contrast+"%)"//兼容性处理，如需要兼容opera需再加前缀-o-,IE -ms-,firefox -moz-
       });
   		$("#d1 h1").html("对比度:"+data.contrast+" 灰度:"+data.grayscale);//显示灰度与对比度的值，仅供测试看
   }
</script>
</html>