您的位置：首页 > 移动开发

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

2017-04-06 18:48 776 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航