本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScrollTIP:1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimScrollresize重新调用插件增加的代码部分:function setScroll(){ $(".box-list").slimScroll({ height: boxHeight, alwaysVisible: true, });}setScroll();$(window).on("resize",setScroll);插件的调用以及参数设置:$(function() { $(".slimscroll").slimScroll({ width: 'auto', //可滚动区域宽度 height: '100%', //可滚动区域高度 size: '10px', //组件宽度 color: '#000', //滚动条颜色 position: 'right', //组件位置:left/right distance: '0px', //组件与侧边之间的距离 start: 'top', //默认滚动位置:top/bottom opacity: .4, //滚动条透明度 alwaysVisible: true, //是否 始终显示组件 disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件,离开时隐藏组件 railVisible: true, //是否 显示轨道 railColor: '#333', //轨道颜色 railOpacity: .2, //轨道透明度 railDraggable: true, //是否 滚动条可拖动 railClass: 'slimScrollRail', //轨道div类名 barClass: 'slimScrollBar', //滚动条div类名 wrapperClass: 'slimScrollDiv', //外包div类名 allowPageScroll: true, //是否 使用滚轮到达顶端/底端时,滚动窗口 wheelStep: 20, //滚轮滚动量 touchScrollStep: 200, //滚动量当用户使用手势 borderRadius: '7px', //滚动条圆角 railBorderRadius: '7px' //轨道圆角 });});slimScroll事件——当滚动条达到父容器的顶部或底部触发事件:$(selector).slimScroll().bind('slimscroll', function(e, pos){ console.log("Reached " + pos");});完整例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slimScroll插件使用例子</title></head><body> <div class="superDiv"> <div id="innerDiv"> <p>xxxxxxxxxxxxxx</p> </div> </div> <script src="jquery.min.js"></script> <script src="jquery.slimscroll.js"></script> <script> $(function(){ $('#innerDiv').slimScroll({ height: '250px' }); $('#innerDiv').slimScroll().bind('slimscroll', function(e, pos){ if(pos=='bottom'){ // 执行其他逻辑 } }); }); </script></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

在用javaScript编程的过程中,我们经常会遇到这样一个问题,就是需要检测一个数据或变量的类型,那么在javaScript中给我们提供了哪些方法呢?网上流传的代码比比皆是,但是发现其中有些是有误的,索性我自己动手把每种方法用了一遍,今天我专门整理了下,以便以后查阅。一、typeof  检测typeof 是一个一元运算符,语法:typeof(运算数),运算数可以是任意类型。它的返回值是一个字符串,该字符串说明运算数的类型。// var arr = { name:"john"}; // object // var arr = ["语文","数学"]; // object // function Person() {}; // typeof(Person) => function // var arr = '我是字符串' ; // string // var arr = 66 ; // number // var arr = true ; // boolean // var arr = new Person(); // object // var arr = undefined; // undefined // var arr = null; // object // var arr = /^\d{5,20}$/; // object // console.log( typeof(arr) );二、instanceof  检测instanceof 检测某个对象是不是另一个对象的实例,可以在继承关系中用来判断一个实例是否属于它的父类型。// var arr = '我是字符串' ;   // console.log( arr instanceof String ) => false // var arr = 66 ;    // console.log( arr instanceof Number ) =>false // var arr = true ;    // console.log( arr instanceof Boolean ) =>false // var arr = ["语文","数学"];   // console.log( arr instanceof Array ) =>true // var arr = { name:"john"};    // console.log( arr instanceof Object ) =>true // var arr = function Person(){}; //console.log(arr instanceof Function)=>true // var arr = undefined; // console.log(arr instanceof Object)=>false // var arr = null; // console.log(arr instanceof Object)=>false // var arr = /^\d{5,20}$/; // console.log(arr instanceof RegExp)=>true三、Object.prototype.toString.call  检测 使用Object.prototype上的原生toString()方法判断数据类型,使用方法如下:Object.prototype.toString.call(value)// var arr = '我是字符串' ; //[object String] // var arr = 66 ; //[object Number] // var arr = true ; //[object Boolean] // var arr = ["语文","数学"]; //[object Array] // var arr = { name:"john"}; //[object Object] // var arr = function Person(){}; //[object Function] // var arr = undefined; //[object Undefined] // var arr = null; //[object Null] // var arr = /^\d{5,20}$/; //[object RegExp] // console.log( Object.prototype.toString.call(arr) );以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

3DES简介:3DES(或称为Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称。它相当于是对每个数据块应用三次DES加密算法。由于计算机运算能力的增强,原版DES密码的密钥长度变得容易被暴力破解;3DES即是设计用来提供一种相对简单的方法,即通过增加DES的密钥长度来避免类似的攻击,而不是设计一种全新的块密码算法。今天需要在客户端实现des 很快就找到了 http://www.tero.co.uk/des/code.php应用示例 var key = "this is a 24 byte key !!";var message = "This is a test message";var ciphertext = des (key, message, 1, 0);document.writeln ("DES Test: " + stringToHex (ciphertext));当然发现这不是我们所需要的。我们服务端使用的是des-ede,java中好象叫triple des这儿有个小坑 des方法本身支持3des//how many iterations (1 for des, 3 for triple des)var iterations = key.length > 8 ? 3 : 1; //changed by Paul 16/6/2007 to use Triple DES for 9+ byte keys但是对于key的使用有个小小的错误如果是64位是des 正解,但是3des有可能是128位或192位3des的过程是 en(k3, de(k2, en(k1, P)))其中k1=k3的时候可以使用简化的128位密钥。key="k1k1k1k1k2k2k2k2k2" 其实与 k1k1k1k1k2k2k2k2k1k1k1k1应该是等价的。作者没有实现另外一个就是padding模式,简单的说就是块加密的时候,不足的空位应该怎么补起来 下面是源码if (padding == 2) message += " "; //pad the message with spaceselse if (padding == 1) {temp = 8-(len%8); message += String.fromCharCode (temp,temp,temp,temp,temp,temp,temp,temp); if (temp==8) len+=8;} //PKCS7 paddingelse if (!padding) message += "\0\0\0\0\0\0\0\0"; //pad the message out with null bytes现在一般使用的是PKCS5/7调用的注意一下这两点,其实des-ede也就实现了示例var key ="b964b7c58e99b59"+"b964b7c5";var message = "This is a test message";var ciphertext = des(key, message, 1, 0,0,1);document.writeln("<br/>DES3 Test: " + stringToHex (ciphertext));以上所述是小编给大家介绍的JavaScript中的3DES,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考,具体如下:MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行。MVC的核心思想是將数据的管理(Model)、业务逻辑控制(Controller)和数据的展示(View)分离开来,使程序的逻辑性和可维护性更强。对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是HTML页面。控制器(Controller)是一个用户自定义的JavaScript类。模型数据(Model)存储在对象的属性中。我们来看下面的代码:<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script> <title>tutorial03</title></head><body><div ng-controller="UserController"> 用户名:<input type="text" ng-model="name" placeholder="用户名"/> 密码:<input type="password" ng-model="pword" placeholder="密码"/> <button ng-click="login()">提交</button> <p>您输入的用户名:{{name}}</p> <p>您输入的密码:{{pword}}</p></div><script> function UserController ($scope,$log) { $scope.name="admin"; $scope.pword="123456"; $log.info( $scope.name); $log.info( $scope.pword); $scope.login = function() { alert("登录"); } }</script></body></html>我们在前面一篇《AngularJS入门教程之数据绑定用法示例》代码的基础上进行修改,我们通过ng-controller指令声明一个控制器,名称为UserController,它所在的div开始标签和结束标签之间的部分都由该控制器来管理。function UserController...为控制器定义部分,这里我们依靠AngularJs依赖注入系统以参数的形式向控制器中注入$scope和$log对象。$scope为模型数据对象,前面有提到过,ng-model的作用就是为$scope对象添加一个属性和表单元素绑定。$log对象用于在浏览器控制台中输出调试信息。在控制器中可以做一些初始化工作,例如这里我们將用户名和密码文本框中的内容初始化为”admin”,”123456”。还可用于事件处理,我们通过ng-click指令声明按钮的点击事件处理函数为login(),在控制器中通过$scope.login = function()...进行事件绑定。在浏览器中运行可以看到效果如下:页面加载时文本框中内容被初始化,点击提交弹出对话框。AngularJs的控制器的作用域仅限于ng-controller所在的元素开始标签和结束标签之间的部分,为了证明这个结论我们再增加一个控制器,代码如下:<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script> <title>tutorial03</title></head><body><div ng-controller="UserController" style="border:#ccc solid 1px;"> 用户名:<input type="text" ng-model="name" placeholder="用户名"/> 密码:<input type="password" ng-model="pword" placeholder="密码"/> <button ng-click="login()">提交</button> <p>您输入的用户名:{{name}}</p> <p>您输入的密码:{{pword}}</p></div><br/><div ng-controller="InfoContoller" style="border:#ccc solid 1px;"> 个人爱好:<input type="text" ng-model="love" placeholder="个人爱好"/> <p>您输入的个人爱好:{{love}}</p></div><script> function UserController($scope,$log) { $scope.name="admin"; $scope.pword="123456"; $scope.login = function() { alert("登录"); } } function InfoContoller($scope,$log) { $scope.love="足球"; $log.info($scope.name); $log.info($scope.pword); $log.info($scope.love); }</script></body></html>由于name和pword不是在InfoContoller控制器中定义的,我们在控制台中输出$scope.name和$scope.pword显示为undefined.AngularJS源码可点击此处本站下载。希望本文所述对大家AngularJS程序设计有所帮助。

先给大家展示下效果图:页面代码里面用户的uuid是写死的test<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE><html lang="en"><head><title>用户头像剪裁</title><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><link rel="stylesheet" href="resources/Jcrop/css/jquery.Jcrop.css"><link rel="stylesheet" href="resources/css/photo.css"><script src="resources/js/jquery.min.js"></script><script src="resources/Jcrop/js/jquery.Jcrop.js"></script><script src="resources/js/ajaxfileupload.js"></script></head><body><div class="container"><div class="row"><div class="span12"><div class="jc-demo-box"><div class="page-header"><h1>头像剪裁</h1></div><img src="resources/img/test.jpg" id="target" /><div id="preview-pane" ><div class="preview-container"><img src="resources/img/test.jpg" class="jcrop-preview"/></div ><div style='float:left;display:inline;'><a class='btn_addPic' href="javascript:void(0);"><span><EM>+</EM>添加图片</span> <input id="upload_image" type="file" name="upimage" accept="image/*" class = "filePrew"/></a></div><div style='float:right;display:inline;'><a class='btn_addPic' href="javascript:void(0);" onclick='submit()'><span>提交</span> </a></div></div></div></div></div></div></body><script type="text/javascript">var global_api = "";var boundx ="";//页面图片宽度var boundy ="";//页面图片高度var tag = false;$(function() {// Create variables (in this scope) to hold the API and image size//创建变量(在这个范围)的API和图像大小var jcrop_api,// Grab some information about the preview pane//获取一些信息预览窗格$preview = $('#preview-pane'),$pcnt = $('#preview-pane .preview-container'),$pimg = $('#preview-pane .preview-container img'),xsize = $pcnt.width(),ysize = $pcnt.height();$('#target').Jcrop({onChange: updatePreview,onSelect: updatePreview,aspectRatio: xsize / ysize},function(){// Use the API to get the real image size//使用API来获得真实的图像大小var bounds = this.getBounds();boundx = bounds[0];boundy = bounds[1];// Store the API in the jcrop_api variable//jcrop_api变量中存储APIjcrop_api = this;// Move the preview into the jcrop container for css positioning//预览进入jcrop容器css定位$preview.appendTo(jcrop_api.ui.holder);});function updatePreview(c){if (parseInt(c.w) > 0)global_api=c;{var rx = xsize / c.w;var ry = ysize / c.h;$pimg.css({width: Math.round(rx * boundx) + 'px',height: Math.round(ry * boundy) + 'px',marginLeft: '-' + Math.round(rx * c.x) + 'px',marginTop: '-' + Math.round(ry * c.y) + 'px'});}};//=======选择图片回显===============$('#upload_image').change(function(event) {// 根据这个 <input> 获取文件的 HTML5 js 对象var files = event.target.files, file; if (files && files.length > 0) {// 获取目前上传的文件file = files[0];// 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL// 获取 window 的 URL 工具var URL = window.URL || window.webkitURL;// 通过 file 生成目标 urlvar imgURL = URL.createObjectURL(file);// 用这个 URL 产生一个 <img> 将其显示出来$('.jcrop-holder img').attr('src', imgURL);$('.preview-container img').attr('src', imgURL);}});//=============是否选择了本地图片==================$("#upload_image").change(function(){tag=true;});});//========================================================//======图片保存===========function submit(){if(tag&&global_api != ""){ajaxFileUpload();}else{alert('你是不是什么事情都没干?');}}//ajax文件上传function ajaxFileUpload() {$.ajaxFileUpload({url: 'uploadphoto', //用于文件上传的服务器端请求地址secureuri: false, //一般设置为falsefileElementId: 'upload_image', //文件上传空间的id属性dataType: 'json', //返回值类型 一般设置为jsondata:{x:global_api.x,y:global_api.y,w:global_api.w,h:global_api.h,pw:boundx,ph:boundy,unid:'test'}, //一同上传的数据 success: function (data){ //服务器成功响应处理函数if(data.result){alert('成功');}else{alert('失败');}window.location.reload();//刷新当前页面}});}</script></html>后台代码@[email protected]("uploadphoto")public Map<String, Object> uploadPhoto(@RequestParam("upimage") MultipartFile imageFile, HttpServletRequest request,HttpServletResponse response) throws Exception {Map<String, Object> result = new HashMap<String, Object>();boolean tag =false;String unid = request.getParameter("unid");String x = request.getParameter("x");String y = request.getParameter("y");String h = request.getParameter("h");String w = request.getParameter("w");// 页面实际图片宽高String pheight = request.getParameter("ph");String pweight = request.getParameter("pw");// 切图参数int imageX = Integer.parseInt(x);int imageY = Integer.parseInt(y);int imageH = Integer.parseInt(h);int imageW = Integer.parseInt(w);int srcH = Integer.parseInt(pheight);int srcW = Integer.parseInt(pweight);String realPath = request.getSession().getServletContext().getRealPath("/");String resourcePath = "resources/uploadImages/";try {if (imageFile != null) {if (FileUploadUtil.allowUpload(imageFile.getContentType())) {// 这里开始截取操作byte[] b = ImageCut.imgCut(imageFile.getInputStream(), imageX, imageY, imageW, imageH, srcW, srcH);if (b != null) {// 存入数据库User user = userService.selectByPrimaryKey(unid);user.setPhoto(b);tag = (userService.updateByPrimaryKeySelective(user)==1)?tag=true:tag;result.put("result", tag);}}}} catch (Exception e) {e.printStackTrace();}result.put("result", tag);return result;}图像切割工具类package com.ssm.demo.utils;import java.awt.Graphics;import java.awt.Image;import java.awt.Toolkit;import java.awt.image.BufferedImage;import java.awt.image.CropImageFilter;import java.awt.image.FilteredImageSource;import java.awt.image.ImageFilter;import java.io.ByteArrayOutputStream;import java.io.InputStream;import javax.imageio.ImageIO;public class ImageCut {/*** 截取图片* * @param srcImageFile* 原图片地址* @param x* 截取时的x坐标* @param y* 截取时的y坐标* @param desWidth* 截取的宽度* @param desHeight* 截取的高度* @param srcWidth* 页面图片的宽度* @param srcHeight* 页面图片的高度* */public static byte[] imgCut(InputStream input, int x, int y, int desWidth, int desHeight, int srcWidth,int srcHeight) {try {Image img;ImageFilter cropFilter;BufferedImage bi = ImageIO.read(input);if (srcWidth >= desWidth && srcHeight >= desHeight) {Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);cropFilter = new CropImageFilter(x, y, desWidth, desHeight);img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));BufferedImage tag = new BufferedImage(desWidth, desHeight, BufferedImage.TYPE_INT_RGB);Graphics g = tag.getGraphics();g.drawImage(img, 0, 0, null);g.dispose();// 输出文件ByteArrayOutputStream out = new ByteArrayOutputStream();ImageIO.write(tag, "JPEG", out);return out.toByteArray();}} catch (Exception e) {e.printStackTrace();}return null;}}以上所述是小编给大家介绍的JCrop+ajaxUpload 图像切割上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

分类:腾博会官方网

时间:2016-07-15 07:14:16