JavaScript实战练习—

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}#app {margin: 0 auto;}</style>
</head>
<body><div id="app"></div><script src="/通用资源/publicPackage.js"></script><script>var app = document.getElementById('app');dealImage(app, '/img/small.jpg');function dealImage(dom, url) {//创建图片var img = new Image();//设置图片地址img.src = url;//图片加载完毕img.onload = function () {var width = img.width;var height = img.height;// console.log(img.width, img.height);//创建遮罩层var layer = document.createElement('div');//创建切图层var mask = document.createElement('div');//创建小圆点var dot = document.createElement('div');dom.appendChild(layer);dom.appendChild(mask);mask.appendChild(dot);css(dom, {width: width + 'px',height: height + 'px',backgroundImage: 'url(' + url + ')',position: 'relative',border: '1px solid #ccc'});css(layer, {position: 'absolute',left: 0,top: 0 ,right: 0,bottom: 0,backgroundColor: 'rgba(0, 0, 0, 0.4)'});css(mask, {width: width / 4 + 'px',height: height / 4 + 'px',position: 'absolute',top: 0,left: 0,backgroundImage: 'url(' + url + ')',cursor: 'move'});css(dot, {width: '10px',height: '10px',position: 'absolute',right: '-5px',bottom: '-5px',borderRadius: '50%',backgroundColor: 'red',cursor: 'default'});var ox, oy, top, left, maskLeft, maskTop;//dot交互function moveDot(e) {//鼠标移动时位置var dx = e.clientX;var dy = e.clientY;//新坐标var x = dx - ox + left;var y = dy - oy + top;//边界处理if (x < 0) {x = 0;} else if (x + maskLeft > width) {x = width - maskLeft;};if (y < 0) {y = 0;} else if (y + maskTop > height) {y = height - maskTop;};css(mask, {width: x + 'px',height: y + 'px'});};bindEvent(dot, 'mousedown', function(e) {//停止冒泡e.stopPropagation();//鼠标点击时位置ox = e.clientX;oy = e.clientY;//mask宽高left = parseInt(getStyle(mask, 'width'));top = parseInt(getStyle(mask, 'height'));//mask原先偏移量maskLeft = mask.offsetLeft;maskTop = mask.offsetTop;bindEvent(document, 'mousemove', moveDot);});bindEvent(document, 'mouseup', function(e) {removeEvent(document, 'mousemove', moveDot);});//mask交互function moveMask(e) {//鼠标移动时位置var dx = e.clientX;var dy = e.clientY;//移动距离var x = dx - mx + ml;//边界处理var y = dy - my + mt;if (x < 0) {x = 0;} else if (x + mw > width) {x = width - mw;};if (y < 0) {y = 0;} else if (y + mh > height) {y = height - mh;};css(mask, {backgroundPositionX: -x + 'px',backgroundPositionY: -y + 'px',left: x + 'px',top: y + 'px'});};bindEvent(mask, 'mousedown', function(e) {//鼠标点击时位置mx = e.clientX;my = e.clientY;//mask宽高mw = parseInt(getStyle(mask, 'width'));mh = parseInt(getStyle(mask, 'height'));//mask原先偏移量ml = mask.offsetLeft;mt = mask.offsetTop;bindEvent(document, 'mousemove', moveMask);});bindEvent(document, 'mouseup', function() {removeEvent(document, 'mousemove', moveMask);});};};</script>
</body>
</html>

publicPackage.js文件是我自己日常封装的一些方法，这次的实战练习中也有用到getStyle()、removeEvent()、bindEvent()等自己封装的方法（只要你没见过就是我自定义的，别怀疑你自己的小脑瓜子），这次的dealImage()也可以封装好，下次直接调用。这里奉上publicPackage.js文件里面的全部代码。

publicPackage.js

/***
获取任何元素样式@element    元素@styleName  样式
***/
function getStyle(element, styleName) {if (window.getComputedStyle) {return getComputedStyle(element)[styleName];} else{var style= element.currentStyle;if (style) {styleName = styleName.replace(/-([a-z])?/g, function(match, $1) {return $1.toUpperCase();})return style[styleName];};};
};/***
实现任何事件绑定(DOM0、DOM2、ie)@dom    元素@type   事件@fn     回调函数
***/
function bindEvent(dom, type, fn) {if (dom.addEventListener) {dom.addEventListener(type, fn);} else if (dom.attachEvent) {dom.attachEvent('on' + type, function(e) {e.target = e.srcElement;e.currentTarget = this;fn.call(dom, e);    //this指向});} else {var oldFun = dom['on' + type];dom['on' + type] = function(e) {oldFun && oldFun(e || window.event);fn(e || window.event);};};
};/***
实现任何事件移除(DOM0、DOM2、ie)@dom    元素@type   事件@fn     回调函数
***/
function removeEvent(dom, type, fn) {if (dom.removeEventListener) {dom.removeEventListener(type, fn);} else if (dom.detachEvent) {dom.detachEvent('on' + type, fn);} else {dom['on' + type] = null;}
}/***
封装防抖函数@fn     函数
***/
function throttle_event(fn) {clearTimeout(fn.__timebar);fn.__timebar = setTimeout(fn, 200);
};/***
封装节流函数@fn     函数
***/
function throttle_time(fn) {//lock为true不执行if (fn.__lock) {return;};fn.__lock = true;fn();setTimeout(function() {fn.__lock = false;},1000);
};/***
实现设置样式方法 css(dom, width, 200px) 或 css(dom, {width: '200px', color: 'red'})@dom    元素@key   样式名@value     样式值
***/
function css(dom, key, value) {if (typeof key === 'string') {dom.style[key] = value;} else {for (var name in key) {css(dom, name, key[name]);}}
}/***
实现任何元素到document的距离@dom    元素
***/
function offset(dom) {var result = {left: dom.offsetLeft,top: dom.offsetTop};while (dom !== document.getElementsByTagName('body')[0]) {dom = dom.offsetParent;result.left += dom.offsetLeft + dom.clientLeft;result.top += dom.offsetTop + dom.clientTop;}return result;
};/***
封装放大器方法@dom    元素@url    图片地址@width  容器宽度@height 容器高度
***/
function imageZoom(dom, url, width, height) {var mask = document.createElement('div');var big = document.createElement('div');app.appendChild(mask);app.appendChild(big);css(app, {width: width + 'px',height: height + 'px',position: 'relative',backgroundImage: 'url('+ url +')',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',border: '1px solid #ccc'});css(mask, {width: width / 2 + 'px',height: height / 2 + 'px',position: 'absolute',backgroundColor: 'rgba(214, 235, 99, 0.4)',cursor: 'move',display: 'none'});css(big, {width: width + 'px',height: height + 'px',position: 'absolute',top: 0,left: '100%',backgroundImage: 'url('+ url +')',backgroundRepeat: 'no-repeat',display: 'none'});//鼠标移入bindEvent(app, 'mouseenter', function(e) {//鼠标进入时位置//mask和big显示css(mask, {display: 'block'});css(big, {display: 'block'});//鼠标移动时位置bindEvent(dom, 'mousemove', function(e) {var mouse_newX = e.clientX;var mouse_newY = e.clientY;//mask左顶点位置var mask_left = mouse_newX - width / 4 - offset(dom)['left'] + document.documentElement.scrollLeft;var mask_top = mouse_newY - height /4 - offset(dom)['top'] + document.documentElement.scrollTop;//边界处理(mask始终不能跑到app外头)if (mask_left < 0) {mask_left = 0;} else if (mask_left > width / 2) {mask_left = width / 2;};if(mask_top < 0) {mask_top = 0;} else if (mask_top > height / 2) {mask_top = height / 2;}//mask位置(mask随鼠标移动而移动)css(mask, {left: mask_left + 'px', top: mask_top + 'px'});console.log(mask_left, mask_top);//big背景图设置css(big, {backgroundPositionX: '-' + mask_left * 2 + 'px',backgroundPositionY: '-' + mask_top * 2 + 'px',})});});// 鼠标移出bindEvent(app, 'mouseleave', function(e) {css(mask, {display: 'none'});css(big, {display: 'none'});});
};

效果演示：

javaScript实战——图片裁剪

JavaScript实战练习——图片裁剪相关推荐

JavaScript 实战（图片切换）【轮播图】
功能描述: 点击下一张换到下一张图片. 点击上一张换到上一张图片. 等到最后一张时,再点击下一张呈现第一张图片. 实现效果: 图片切换 <!DOCTYPE html> <html l ...
JavaScript插件图片裁剪photoClip
阅读目录 JavaScript插件图片裁剪 photoClip 1.截图 2.代码后台接收并处理图片代码 JavaScript插件图片裁剪 photoClip 页面裁剪图片得到 base64 格式的 ...
Java+Javascript图片裁剪简单封装
在做项目的过程中,有很多时候前端的图片会出现拉伸现象,所以在上传图片的时候,图片裁剪是必不可少的.所以有了封装一个图片裁剪工具的念头,下面是实现步骤: 1.首先选择一个前台裁剪工具,我这里使用的是Jc ...
Java实现图片裁剪预览功能
Java实现图片裁剪预览功能在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload;imp ...
图片裁剪的js有哪些（整理）
图片裁剪的js有哪些(整理) 一.总结一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...
apiCloud中图片裁剪模块FNImageClip的使用
思路 1.获取需裁剪图片的地址 2.跳转到裁剪页面 3.裁剪成功返回新图片地址 4.替换原有图片地址增加修饰和事件 str += '<li class="tu image" ...
使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...
图片裁剪功能集成优化
问题所在最近公司编辑在发布新闻的时候遇到一个问题,编辑后台提供的原有的图片裁剪功能在移动端和一些特定类型的显示时达不到具体的要求.最后去深究发现我们的服务器对上传上来的图片进行了一次裁剪,为了减小图 ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

JavaScript实战练习——图片裁剪

源码：

publicPackage.js

效果演示：

JavaScript实战练习——图片裁剪相关推荐

最新文章

热门文章