精华内容
下载资源
问答
  • java实现图片滑动验证码

    万次阅读 多人点赞 2019-05-07 14:39:35
    java实现图片滑动验证码 首先感谢https://blog.csdn.net/jiabeis/article/details/86477706这篇文章的作者和https://download.csdn.net/download/lycapzy/10831028这个资源的作者,我在这个基础之上做的修改 ....

    java实现图片滑动验证码

    下载资源地址:https://download.csdn.net/download/shiqiangwen/11164170

    首先感谢
    https://blog.csdn.net/jiabeis/article/details/86477706、https://download.csdn.net/download/lycapzy/10831028 这两位作者,我是在这个基础之上做的修改。
    在文章开始和末尾,附源代码下载地址。

    最终的效果如下:
    在这里插入图片描述
    注:DataMap是自己封装的,extends自HashMap。凡是用到DataMap的可以替换成HashMap(没试过,感觉应该可以)。
    主要代码如下
    1.VerifyImageUtil.java 滑动验证码核心工具类

    /**
    * @description 图形验证码生成工具类
    * @author SQW
    * @date 2019年4月30日
    */
    public class VerifyImageUtil {
        private static int ORI_WIDTH = 280;  //源文件宽度
        private static int ORI_HEIGHT = 171;  //源文件高度
        
        private static int WIDTH;  //模板图宽度
        private static int HEIGHT;  //模板图高度
        
        /**
         * @description 根据模板切图
         * @author SQW
         * @date 2019年4月30日
         */
        public static Map<String, byte[]> pictureTemplatesCut(File templateFile, File targetFile, String templateType, String targetType,int X,int Y) throws Exception {
            Map<String, byte[]> pictureMap = new HashMap<>();
            // 文件类型
            String templateFiletype = templateType;
            String oriFiletype = targetType;
            if (StringUtils.isEmpty(templateFiletype) || StringUtils.isEmpty(oriFiletype)) {
                throw new RuntimeException("file type is empty");
            }
            // 源文件流
            File Orifile = targetFile;
            InputStream oriis = new FileInputStream(Orifile);
    
            // 模板图
            BufferedImage imageTemplate = ImageIO.read(templateFile);
            WIDTH = imageTemplate.getWidth();
            HEIGHT = imageTemplate.getHeight();
            //generateCutoutCoordinates();
            // 最终图像
            BufferedImage newImage = new BufferedImage(WIDTH, HEIGHT, imageTemplate.getType());
            Graphics2D graphics = newImage.createGraphics();
            graphics.setBackground(Color.white);
            //graphics.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, 0.3f));
    
            int bold = 5;
            // 获取感兴趣的目标区域
            BufferedImage targetImageNoDeal = getTargetArea(X, Y, WIDTH, HEIGHT, oriis, oriFiletype);
            
    
    
            // 根据模板图片抠图
            newImage = DealCutPictureByTemplate(targetImageNoDeal, imageTemplate, newImage);
    
            // 设置“抗锯齿”的属性
            graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            graphics.setStroke(new BasicStroke(bold, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL));
            graphics.drawImage(newImage, 0, 0, null);
            graphics.dispose();
    
            ByteArrayOutputStream os = new ByteArrayOutputStream();//新建流。
            ImageIO.write(newImage, "png", os);//利用ImageIO类提供的write方法,将bi以png图片的数据模式写入流。
            byte[] newImages = os.toByteArray();
            pictureMap.put("newImage", newImages);
    
            // 源图生成遮罩
            BufferedImage oriImage = ImageIO.read(Orifile);
            byte[] oriCopyImages = DealOriPictureByTemplate(oriImage, imageTemplate, X, Y);
            pictureMap.put("oriCopyImage", oriCopyImages);
            return pictureMap;
        }
    
        /**
         * 抠图后原图生成
         *
         * @param oriImage
         * @param templateImage
         * @param x
         * @param y
         * @return
         * @throws Exception
         */
        private static byte[] DealOriPictureByTemplate(BufferedImage oriImage, BufferedImage templateImage, int x,
                                                       int y) throws Exception {
        	
            // 源文件备份图像矩阵 支持alpha通道的rgb图像
            BufferedImage ori_copy_image = new BufferedImage(oriImage.getWidth(), oriImage.getHeight(), BufferedImage.TYPE_4BYTE_ABGR);
            // 源文件图像矩阵
            int[][] oriImageData = getData(oriImage);
            // 模板图像矩阵
            int[][] templateImageData = getData(templateImage);
    
            //copy 源图做不透明处理
            for (int i = 0; i < oriImageData.length; i++) {
                for (int j = 0; j < oriImageData[0].length; j++) {
                    int rgb = oriImage.getRGB(i, j);
                    int r = (0xff & rgb);
                    int g = (0xff & (rgb >> 8));
                    int b = (0xff & (rgb >> 16));
                    //无透明处理
                    rgb = r + (g << 8) + (b << 16) + (255 << 24);
                    ori_copy_image.setRGB(i, j, rgb);
                }
            }
    
            for (int i = 0; i < templateImageData.length; i++) {
                for (int j = 0; j < templateImageData[0].length - 5; j++) {
                    int rgb = templateImage.getRGB(i, j);
                    //对源文件备份图像(x+i,y+j)坐标点进行透明处理
                    if (rgb != 16777215 && rgb <= 0) {
                        int rgb_ori = ori_copy_image.getRGB(x + i, y + j);
                        int r = (0xff & rgb_ori);
                        int g = (0xff & (rgb_ori >> 8));
                        int b = (0xff & (rgb_ori >> 16));
                        rgb_ori = r + (g << 8) + (b << 16) + (150 << 24);
                        
                        
                        //源代码
                        //ori_copy_image.setRGB(x + i, y + j, rgb_ori);
                        
                        //修改后的值
                        ori_copy_image.setRGB(x + i, y + j, 65280);
                    } else {
                        //do nothing
                    }
                }
            }
            ByteArrayOutputStream os = new ByteArrayOutputStream();//新建流。
            ImageIO.write(ori_copy_image, "png", os);//利用ImageIO类提供的write方法,将bi以png图片的数据模式写入流。
            byte b[] = os.toByteArray();//从流中获取数据数组。
            return b;
        }
    
    
        /**
         * 根据模板图片抠图
         *
         * @param oriImage
         * @param templateImage
         * @return
         */
    
        private static BufferedImage DealCutPictureByTemplate(BufferedImage oriImage, BufferedImage templateImage,
                                                              BufferedImage targetImage) throws Exception {
            // 源文件图像矩阵
            int[][] oriImageData = getData(oriImage);
            // 模板图像矩阵
            int[][] templateImageData = getData(templateImage);
            // 模板图像宽度
    
            for (int i = 0; i < templateImageData.length; i++) {
                // 模板图片高度
                for (int j = 0; j < templateImageData[0].length; j++) {
                    // 如果模板图像当前像素点不是白色 copy源文件信息到目标图片中
                    int rgb = templateImageData[i][j];
                    if (rgb != 16777215 && rgb <= 0) {
                        targetImage.setRGB(i, j, oriImageData[i][j]);
                    }
                }
            }
            return targetImage;
        }
    
    
        /**
         * 获取目标区域
         *
         * @param x            随机切图坐标x轴位置
         * @param y            随机切图坐标y轴位置
         * @param targetWidth  切图后目标宽度
         * @param targetHeight 切图后目标高度
         * @param ois          源文件输入流
         * @return
         * @throws Exception
         */
        private static BufferedImage getTargetArea(int x, int y, int targetWidth, int targetHeight, InputStream ois,
                                                   String filetype) throws Exception {
            Iterator<ImageReader> imageReaderList = ImageIO.getImageReadersByFormatName(filetype);
            ImageReader imageReader = imageReaderList.next();
            // 获取图片流
            ImageInputStream iis = ImageIO.createImageInputStream(ois);
            // 输入源中的图像将只按顺序读取
            imageReader.setInput(iis, true);
    
            ImageReadParam param = imageReader.getDefaultReadParam();
            Rectangle rec = new Rectangle(x, y, targetWidth, targetHeight);
            param.setSourceRegion(rec);
            BufferedImage targetImage = imageReader.read(0, param);
            return targetImage;
        }
    
        /**
         * 生成图像矩阵
         *
         * @param
         * @return
         * @throws Exception
         */
        private static int[][] getData(BufferedImage bimg) throws Exception {
            int[][] data = new int[bimg.getWidth()][bimg.getHeight()];
            for (int i = 0; i < bimg.getWidth(); i++) {
                for (int j = 0; j < bimg.getHeight(); j++) {
                    data[i][j] = bimg.getRGB(i, j);
                }
            }
            return data;
        }
    
        /**
        * @description 随机生成抠图坐标
        * @author SQW
        * @date 2019年4月30日
        */
        public static DataMap generateCutoutCoordinates() {
            Random random = new Random();
            int widthDifference = ORI_WIDTH - WIDTH;
            int heightDifference = ORI_HEIGHT - HEIGHT;
            
            int X,Y;
            if (widthDifference <= 0) {
                X = 5;
    
            } else {
            	X = random.nextInt(ORI_WIDTH - WIDTH) + 5;
            }
    
            if (heightDifference <= 0) {
            	Y = 5;
            } else {
            	Y = random.nextInt(ORI_HEIGHT - HEIGHT) + 5;
            }
            NumberFormat numberFormat = NumberFormat.getInstance();
            numberFormat.setMaximumFractionDigits(2);
    
    //        float xPercent = Float.parseFloat(numberFormat.format((float) X / (float) ORI_WIDTH));
    //        float yPercent = Float.parseFloat(numberFormat.format((float) Y / (float) ORI_HEIGHT));
            
            DataMap map=new DataMap();
            map.put("X", X);
            map.put("Y", Y);
            return map;
            
        }
    }
    

    2.TestController.java 生成滑动验证码的方法和验证方法

    @Controller
    @RequestMapping("util/img")
    public class TestController {
        
        @RequestMapping("get_img_verify")
        @ResponseBody
        public DataMap testImg() throws Exception {
            Map<String, byte[]> pictureMap;
            File templateFile;  //模板图片
            File targetFile;  //
            Random random = new Random();
            int templateNo = random.nextInt(4) + 1;
            int targetNo = random.nextInt(20) + 1;
            
          
    
            InputStream stream = getClass().getClassLoader().getResourceAsStream("static/templates/" + templateNo + ".png");
            templateFile = new File(templateNo + ".png");
            FileUtils.copyInputStreamToFile(stream, templateFile);
    
            stream = getClass().getClassLoader().getResourceAsStream("static/targets/" + targetNo + ".jpg");
            targetFile = new File(targetNo + ".jpg");
            FileUtils.copyInputStreamToFile(stream, targetFile);
            
            
            
            //获取抠图坐标
            DataMap xyMap=VerifyImageUtil.generateCutoutCoordinates();
            DBHelper.getSession().setAttribute("imgXyMap", xyMap);
            
            pictureMap = VerifyImageUtil.pictureTemplatesCut(templateFile, targetFile, "png", "jpg",Integer.valueOf(xyMap.get("X").toString()),Integer.valueOf(xyMap.get("Y").toString()));
            byte[] oriCopyImages = pictureMap.get("oriCopyImage");
            byte[] newImages = pictureMap.get("newImage");
    
            
            
            String newImage = Base64Utils.encodeToString(newImages);
            String oriCopyImage = Base64Utils.encodeToString(oriCopyImages);
            
            System.out.println(newImage);
            
            DataMap resultMap=new DataMap();
            resultMap.put("newImage", newImage);
            resultMap.put("oriCopyImage", oriCopyImage);
            resultMap.put("Y", xyMap.get("Y"));
            
            return resultMap;
        }
        
        /**
    	 * @description 
    	 * @author SQW
    	 * @date 2019年5月5日
    	 */
    	@PostMapping("check")
    	@ResponseBody
    	public Boolean javaPost(String X,String Y) {
    		DataMap imgXyMap=(DataMap) DBHelper.getSession().getAttribute("imgXyMap");
    		if(imgXyMap!=null){
    			if(X.equals(imgXyMap.get("X").toString())&&Y.equals(imgXyMap.get("Y").toString())){
    				return true;
    			}else{
    				return false;
    			}
    		}else{
    			return false;
    		}
    	}
    

    3.前台freemark页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	
    	<script type="text/javascript" src="/manager/plug_in/jquery/jquery-1.8.3.min.js"></script>
    	
    	<style>
        .rightValidate { width: 280px; margin: 0px auto; position: relative; line-height: 33px; height: 33px; text-align: center; z-index: 99; }
        .v_rightBtn { position: absolute; left: 0; top: 0; height: 33px; width: 40px; background: #ddd; cursor: pointer; }
        .imgBtn{ width:44px; height: 171px; position: absolute; left: 0;  }
        .imgBtn img{ width:100%;z-index:99; }
        .imgBg{ position:absolute;bottom:35px;width: 280px; height: 171px; box-shadow: 0px 4px 8px #3C5476; display:none;z-index:9;}
        .hkinnerWrap{ border: 1px solid #eee; }
        .green{ border-color:#34C6C2 !important; }
        .green .v_rightBtn{ background: #34C6C2; color: #fff; }
        .red{ border-color:red !important; }
        .red .v_rightBtn{ background: red; color: #fff; }
        .refresh{ position: absolute; width: 30px; height: 30px; right: 4px; top: 4px; font-size: 12px; color: #fff; text-shadow: 0px 0px 9px #333; cursor: pointer; display: none; }
        .notSel{ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
    </style>
    	
    	
    	
    </head>
    <body>
    
          <div class="comImageValidate rightValidate">
    	    <div class="imgBg">
    	        <div class="imgBtn">
    	            <img />
    	        </div>
    	        <span class="refresh" >
    	        	<img alt="" src="shuaxin.png">
    	        </span>
    	    </div>
    	    <div class="hkinnerWrap" style="height: 33px;position: relative">
    	        <span  class="v_rightBtn "><em class="notSel">→</em></span>
    	        <span class="huakuai"  style="font-size: 12px;line-height: 33px;color: #A9A9A9;">向右滑动滑块填充拼图完成验证</span>
    	        <input type = "hidden" name="validX"/>
    	    </div>
    	    
    	</div>
    			        
    
    
    
    <script>
        var tokenId = "";
        var y = "";
        var x = "";
        $(".comImageValidate").ready(function () {
            validateImageInit();
            $(".refresh").click(function () {
                validateImageInit();
            })
            $(".hkinnerWrap").mouseover(function(){
            	$(".imgBg").css("display","block");   
            	$(".refresh").css("display","block");
            }).mouseleave(function () {
            	$(".imgBg").css("display","none"); 
            	$(".refresh").css("display","none");
            });
            
            $(".imgBg").mouseover(function(){
            	$(".imgBg").css("display","block");  
            	$(".refresh").css("display","block");
            }).mouseleave(function () {
            	$(".imgBg").css("display","none"); 
            	$(".refresh").css("display","none");
            });
          
    
            $('.v_rightBtn').on({
                mousedown: function(e) {
                    $(".huakuai").html("");
                    $(".hkinnerWrap").removeClass("red green")
                    var el = $(this);
                    var os = el.offset();
                    dx = e.pageX - os.left;
                    //$(document)
                    $(this).parents(".hkinnerWrap").off('mousemove');
                    $(this).parents(".hkinnerWrap").on('mousemove', function(e) {
                        var newLeft=e.pageX - dx;
                        el.offset({
                            left: newLeft
                        });
                        var newL=parseInt($(".v_rightBtn").css("left"));
                        if(newL<=0){
                            newL=0;
                        }else if (newL>=298){
                            newL=306;
                        }
                        $(".v_rightBtn").css("left",newL+"px");
                        $(".imgBtn").offset({
                            left: newLeft
                        });
                        $(".imgBtn").css("left",newL+"px")
                    }).on('mouseup', function(e) {
                        //$(document)
                        $(this).off('mousemove');
                    })
                }
            }).on("mouseup",function () {
                $(this).parents(".hkinnerWrap").off('mousemove');
                var l=$(this).css("left");
                if(l.indexOf("px")!=-1){
                    l=l.substring(0,l.length-2);
                }
                x = l;
                
                
                submitDate(l,y,tokenId)
            })
    
        });
        /*图形验证*/
        function submitDate(x,y,tokenId) {
        	console.log(x);
        	console.log(y);
        	console.log(tokenId);
        	
        	
             $.ajax({
                 url:"/util/img/check?X="+x+"&Y="+y,
                 dataType:'json',
                 type: "POST",
                 success:function (data) {
                     if(data==true){
                        $(".hkinnerWrap").addClass("green").removeClass("red");
                        $(".hkinnerWrap input[name='validX']").val(x); 
                        $("#X").val(x);
                    	$("#Y").val(y);
                    	layer.msg("验证成功", {time:1000,icon:1})
                     } else {
                        $(".hkinnerWrap").addClass("red").removeClass("green");
                         setTimeout(function(){
                             $(".hkinnerWrap").removeClass("red green");
                             $(".v_rightBtn").css("left",0);
                             $(".imgBtn").css("left",0);
                         },280)
                        validateImageInit();
                    } 
                }
            })
        }
    
        /*初始化图形验证码*/
        function validateImageInit() {
            $.ajax({
                url:"/util/img/get_img_verify",
                dataType:'json',
                cache:false,
                type: "get",
                success:function (data) {
                    $(".huakuai").html("向右滑动滑块填充拼图");
                    $(".imgBg").css("background",'#fff url("data:image/jpg;base64,'+data.oriCopyImage+'")');
                    $(".imgBtn").css('top','5px');
                    $(".imgBtn").find("img").attr("src","data:image/png;base64,"+data.newImage)
    //                 tokenId=data.token;
                    y=data.y;
                    $(".hkinnerWrap").removeClass("red green");
                    $(".v_rightBtn").css("left",0);
                    $(".imgBtn").css("left",0);
                },error:function(err){
                	validateImageInit();
                }
            })
        }
        
    </script>
    
    </body>
    </html>
    

    上面就是全部代码,我将在下载资源中加入生成滑动验证码,所需的图片文件夹以及模板文件夹。
    下载资源地址:https://download.csdn.net/download/shiqiangwen/11164170

    展开全文
  • ![图片说明]...如图所示,左右两边图片与中间图片滑动换位,初始化的时候只有中间的“添加”图片,点击添加后动态的添加左右两边图片出来,有点着急,找不到好的解决方法,求大神指点
  • 图片滑动验证码js插件

    万次阅读 热门讨论 2017-10-25 14:07:30
    图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标。 先上代码吧,做个备份记录 jquery.lgymove.js   /** * ...

    图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标。

    先上代码吧,做个备份记录

    jquery.lgymove.js

     

    /**
     * Created by lgy on 2017/10/21.
     * 图片验证码
     */
    (function ($) {
        $.fn.imgcode = function (options) {
            //初始化参数
            var defaults = {
                callback:""  //回调函数
            };
            var opts = $.extend(defaults, options);
            return this.each(function () {
                var $this = $(this);//获取当前对象
                var html = '<div class="code-k-div">' +
                    '<div class="code_bg"></div>' +
                    '<div class="code-con">' +
                    '<div class="code-img">' +
                    '<div class="code-img-con">' +
                    '<div class="code-mask"><img src="../img/front(1).png"></div>' +
                    '<img src="../img/back(1).png"></div>' +
                    '<div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>' +
                    '</div>' +
                    '<div class="code-btn">' +
                    '<div class="code-btn-img code-btn-m"></div>' +
                    '<span>按住滑块,拖动完成上方拼图</span>' +
                    '</div></div></div>';
                $this.html(html);
    
                //定义拖动参数
                var $divMove = $(this).find(".code-btn-img"); //拖动按钮
                var $divWrap = $(this).find(".code-btn");//鼠标可拖拽区域
                var mX = 0, mY = 0;//定义鼠标X轴Y轴
                var dX = 0, dY = 0;//定义滑动区域左、上位置
                var isDown = false;//mousedown标记
                if(document.attachEvent) {//ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
                    $divMove[0].attachEvent('onselectstart', function() {
                        return false;
                    });
                }
                //按钮拖动事件
                $divMove.on({
                    mousedown: function (e) {
                        //清除提示信息
                        $this.find(".code-tip").html("");
                        var event = e || window.event;
                        mX = event.pageX;
                        dX = $divWrap.offset().left;
                        dY = $divWrap.offset().top;
                        isDown = true;//鼠标拖拽启
                        $(this).addClass("active");
                        //修改按钮阴影
                        $divMove.css({"box-shadow":"0 0 8px #666"});
                    }
                });
                //鼠标点击松手事件
                $(document).mouseup(function (e) {
                    var lastX = $this.find(".code-mask").offset().left - dX - 1;
                    isDown = false;//鼠标拖拽启
                    $divMove.removeClass("active");
                    //还原按钮阴影
                    $divMove.css({"box-shadow":"0 0 3px #ccc"});
                    checkcode(lastX);
                });
                //滑动事件
                $divWrap.mousemove(function (event) {
                    var event = event || window.event;
                    var x = event.pageX;//鼠标滑动时的X轴
                    if (isDown) {
                        if(x>(dX+30) && x<dX+$(this).width()-20){
                            $divMove.css({"left": (x - dX - 20) + "px"});//div动态位置赋值
                            $this.find(".code-mask").css({"left": (x - dX-30) + "px"});
                        }
                    }
                });
                //验证数据
                function checkcode(code){
                    var iscur=false;
                    //模拟ajax
                    setTimeout(function(){
                        if(iscur){
                            checkcoderesult(1,"验证通过");
                            $this.find(".code-k-div").hide();
                            opts.callback({code:1000,msg:"验证通过",msgcode:"23dfdf123"});
                        }else{
                            $divMove.addClass("error");
                            checkcoderesult(0,"验证不通过");
                            opts.callback({code:1001,msg:"验证不通过"});
                            setTimeout(function() {
                                $divMove.removeClass("error");
                                $this.find(".code-mask").animate({"left":"0px"},200);
                                $divMove.animate({"left": "10px"},200);
                            },400);
                        }
                    },500)
                }
                //验证结果
                function checkcoderesult(i,txt){
                    if(i==0){
                        $this.find(".code-tip").addClass("code-tip-red");
                    }else{
                        $this.find(".code-tip").addClass("code-tip-green");
                    }
                    $this.find(".code-tip").html(txt);
                }
            })
        }
    })(jQuery);

    css部分:

     

    .code_bg{
        position: fixed;
        top:0;
        left: 0;
        right:0;
        bottom:0;
        background-color: rgba(0,0,0,.5);
        z-index: 99;
    }
    .icon-login-bg{
        background-image: url(../img/icon/loginicon.png);
        background-repeat: no-repeat;
    }
    .code-con{
        position: absolute;
        top:100px;
        width: 320px;
        left: 50%;
        margin-left: -160px;
        background-color: #fff;
        z-index: 100;
        -moz-user-select: none;
        -webkit-user-select: none;
    }
    .code-img{
        margin: 5px 5px;
        padding: 5px 5px;
        background-color: #f5f6f7;
    }
    .code-img img{
        display: block;
    }
    .icon-w-25{
        display: inline-block;
        width: 25px;
        height: 25px;
        text-indent: -9999px;
    }
    .icon-push{
        cursor: pointer;
        background-position: -149px -95px;
    }
    .code-push{
        height: 25px;
    }
    .code-btn{
        position: relative;
        height: 30px;
        text-align: center;
        color: #999;
        margin: 10px 10px;
        box-sizing: border-box;
        background-color: #f5f6f7;
        border-radius: 15px;
        border: 1px solid #e1e1e1;
    }
    .code-btn-m{
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f5f6f7;
        border: 1px solid #e1e1e1;
        z-index: 5;
        top:-8px;
        left: 10px;
        box-shadow: 0 0 3px #ccc;
        cursor: pointer;
        background-position: -63px 10px;
    }
    .code-btn-img{
        background-image:url(../img/icon/codejt.png);
        background-repeat: no-repeat;
    }
    .code-btn-img.active{
        background-position: -134px 10px;
    }
    .code-btn-img.error{
        background-position: 8px 10px;
    }
    .code-img-con{
        position: relative;
    }
    .code-mask{
        position: absolute;
        top:0;
        left: 0;
        z-index: 10;
    }
    .code-tip{
        padding-left: 10px;
        font-size: 12px;
        color: #999;
    }
    .code-tip-red{
        color: red;
    }
    .code-tip-green{
        color: green;
    }

     

    html部分:

     

     

    <div id="imgscode"></div>
    <script>
    $("#imgscode").imgcode();
    </script>

     

    下载地址: https://download.csdn.net/download/jylonger/10771662

    实例展示: http://www.xiuler.com        (可输入32位字符测试,例:OtgsFq6d4mv7sEox4b2wBTdRtIBCSug8)
     

     

     

    效果图:

     

    展开全文
  • 实现图片滑动解锁

    2018-03-01 14:46:32
    图片滑动解锁 介绍 滑动解锁作为一种较新的验证方式,以其方便快捷简单的特点,迅速成为目前较为流行的验证方式;而图片滑动解锁比滑动解锁更加高效安全,成为现代最为流行的用户验证方式 本组件基于 ArronYR / ...
        

    图片滑动解锁

    介绍

    图片描述

    滑动解锁作为一种较新的验证方式,以其方便快捷简单的特点,迅速成为目前较为流行的验证方式;而图片滑动解锁比滑动解锁更加高效安全,成为现代最为流行的用户验证方式

    图片描述

    本组件基于 ArronYR / slideunlock-plugin (github) 滑动解锁组件;进行升级开发,实现了图片滑动解锁的核心功能

    图片描述

    主要技术点

    1. 图片的绘制(code.php)
    2. 小滑块的滑动,停止报送滑块位置(slideunlock.js)
    3. 滑动位置检测,登录状态记录(verify.php)

    图片描述

    文件地址

    github

    演示地址

    点击

    展开全文
  • js图片滑动切换效果

    千次阅读 2015-09-02 11:34:23
    最近遇到需要图片滑动切换的效果纠结了好久,终于弄出了一个简单的效果。 图片切换的原理一般来说可以分为两种,一种是利用position:absolute;top或left来显示需要的图片,其他图片隐藏。 另一种是通过opacity来...

    最近遇到需要图片滑动切换的效果纠结了好久,终于弄出了一个简单的效果。

    图片切换的原理一般来说可以分为两种,一种是利用position:absolute;top或left来显示需要的图片,其他图片隐藏。

    另一种是通过opacity来调节透明度,让需要的图片不透明,其他图片透明。

    下面来看看我的实现吧!

    HTML代码:

    <div class="col-md-3">
    	<ul class="person-ul" id="personImg">
    		<li><a href="#"><img class="img" src="../image/img1.jpg"></a></li>
    		<li><a href="#"><img class="img" src="../image/img2.jpg"></a></li>
    		<li><a href="#"><img class="img" src="../image/img3.jpg"></a></li>
    		<li><a href="#"><img class="img" src="../image/img4.jpg"></a></li>
    	</ul>
    	<ul class="person-num" id="imgNum"></ul>
    </div>

    CSS样式:

    #person .col-md-3{
    	height:270px;
    	overflow:hidden;
    	padding:0;
    }
    
    .person-ul{
    	list-style-type:none;
    	margin:0;
    	padding:0;
    	float:left;
    	position: absolute;
    	top:0;
    	left:0;
    }
    .person-ul>li{
    	height:270px;
    	width:100%;
    	
    }
    #imgNum .on{
    	width:20px;
    	height:20px;
    	line-height:20px!important;
    	font-weight:bold;
    	background-color: #BCC029;
    }
    .person-num{
    	position: absolute;
    	right:25px;
    	height:22px;
    	margin:0;
    	top:225px;
    }
    .person-num>li{
    	float: left;
    	list-style: none;
    	color: #fff;
    	text-align: center;
    	line-height: 16px;
    	width: 16px;
    	height: 16px;
    	font-family: Arial;
    	font-size: 12px;
    	cursor: pointer;
    	margin: 1px;
    	border: 1px solid #707070;
    	background-color: #995B5B;
    }
    

    JS实现:

    $(function(){
    	//图片切换
    	var imgList = $("#personImg li"); //获取图片对象
    	var liNum = imgList.length;//获取图片数
    	if(liNum>0){
    		for(var i=0;i<liNum;i++){//添加数字选择栏
    			if(i==0){
    				$("#imgNum").append('<li class="on">'+(i+1)+'</li>');
    			}else{
    				$("#imgNum").append("<li>"+(i+1)+"</li>");
    			}
    		}
    	}
    	//定时器
    	var interval = setInterval(function(){
    		var current = $("#imgNum .on");//获取当前被选中的数字对象
    		var index = parseInt(current.text());//获取选中的图片的数字
    		var numList =  $("#imgNum li");	//获取数字数组对象,是一个dom数组
    		current.removeClass("on");//移除已选择的数字样式
    		if(index<liNum){//设置新数字的选择样式
    			numList[index].className="on";
    			changImg(index,liNum);
    		}else{
    			numList[0].className="on";
    			changImg(0,liNum);
    		}
    	},5000);
    	
    	//图片切换操作
    	$("#imgNum li").click(function(){
    		$(".on").removeClass("on");
    		this.className="on";
    		changImg(this.innerText-1,liNum);
    		clearInterval(interval);
    	});
    	
    });
    
    //图片切换定位
    function changImg(index,liNum){
    	var maxTop = liNum*270;
    	$("#personImg")[0].style.position = "absolute";
    	if(index*270<=maxTop){
    		$("#personImg")[0].style.top = index*(-270) + "px";
    	}else{
    		$("#personImg")[0].style.top = "0";
    	}	
    }
    

    效果图:



    展开全文
  • Vue实现图片滑动验证

    千次阅读 2020-07-28 15:48:28
    Vue实现图片滑动验证使用vue完成 使用vue完成 实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖 附上:https://www.npmjs.com/package/vue-monoplasty-slide-verify/v/1.1.2 npm install --save vue-...
  • 手机端图片滑动切换效果

    千次阅读 2018-07-21 14:09:27
    最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下。 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换、循环
  • Android仿今日头条图片滑动退出效果

    千次阅读 热门讨论 2019-02-20 15:14:02
    逛CSDN的时候,看到几篇写仿今日头条图片滑动退出效果的文章,闲着无聊便想着也给自己项目加上,实现的思路有很多种,本着就近原则选了一篇与自己思路相近的文章结合自己的实践总结一下。 下载原文的Demo用了一下,...
  • ViewPager加载图片滑动卡顿的问题

    千次阅读 2016-12-02 11:01:27
    在做引导图,app首次进入的时候,viewpager的图片滑动出现了卡顿的问题,手机配置稍微低一点,就有明显的滑动卡顿问题,但其他界面就没事, 最后经过研究,发现是 引导页,viewpager加载的图片过大,出现了滑动卡顿...
  • 如何实现APP左右滑动DIV切换或图片滑动CSS 作者:张国军_Suger 开发工具与关键技术:HBuilderX C#、HTML         由于之前没有接触过APP之类的项目,今年才开始接触,...
  • 关于探探图片滑动操作

    千次阅读 2017-06-15 20:33:19
    之前一段时间,在朋友的推荐下,玩了探探这一款软件,初玩的时候,就发现,这款软件与一般的社交软件如陌陌之类的大相径庭,让我耳目一新,特别是探探里关于图片滑动操作让人觉得非常新鲜。所以在下通过网上之前的...
  • 2、先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同;内容相同我就不多说了,毕竟能解决问题就行,然而恰恰...
  • 多尺度图片滑动窗口输出裁剪

    千次阅读 2017-08-20 15:09:58
    简介上一篇介绍了多尺度图片滑动窗口输出,如果要在新win窗口下显示当前的滑动窗口图片,那么怎么设置呢?或者将滑动窗口的图片裁剪下来,发现使用 region = (10,0,300,100)#box = (left, top, left+width, top+...
  • android 悬浮图片滑动

    千次阅读 2016-07-20 15:22:24
    1. 前言类似iphone的AssistiveTouch,可以跟随手指,全屏随意滑动。 通过这篇文章后,http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/51967260,应该做一个这种效果非常简单。2.选用何种方式1....
  • 这是我简单做出的效果图,处理300X150px的校验图,并把...2.前端获取图片,用户滑动小图到阴影的位置,获取小图滑动的距离,返回给java后台进行校验; 3.校验通过,返回校验通过编号; 4.前端调登录接口,把账号...
  • 15优秀免费JQuery 图片 滑动效果

    千次阅读 2015-03-26 11:25:36
    15优秀免费JQuery 图片 滑动效果
  • JS做图片滑动

    千次阅读 2018-06-25 17:23:38
    在界面中做一个关于图片左右滑动的效果。循环切换,可从最后一张右滑到第一张,从第一张左滑到最后一张设置两个按钮&lt;a id="prev" href="javascript:;"&gt;&lt;&lt;/a&gt...
  • 图片滑动验证码

    千次阅读 2017-03-03 15:05:02
    1 体验滑动效果 http://www.geetest.com/exp_popup 2 原理:http://www.ifanr.com/603368 3 举例:http://www.thinkphp.cn/topic/45662.html
  • 即一个布局里有两个部分是放图片进行滑动的。比如上面一个放广告的图片滑动,下面的放商品图片的滑动。
  • Glide网络图片滑动查看,可缩放(PhotoView example)
  • html怎么让图片滑动起来呢? 假如一个这个图片 就是让图片从左上角,滑到右下角,再往上滑到右上角,再滑到左下角。 没一点思路…… 求朋友帮我指点迷津。 新人没分,万分感谢
  • js图片滑动验证码

    千次阅读 2018-11-02 14:34:37
    text.innerHTML = '向右滑动滑块填充拼图' text.className = 'sliderText' const el = this.el el.appendChild(canvas) el.appendChild(refreshIcon) el.appendChild(block) slider.appendChild(sliderIcon)...
  • Android实现局部图片滑动指引效果

    千次阅读 2012-12-06 15:03:13
    本文介绍在Android中实现局部的图片滑动指引效果。    其实关于Android滑动指引效果,我曾经发布过一篇文章,里面实现的整个页面的指引滑动,有兴趣的朋友可以查看:...
  • android 做一个每个item都类似viewpager可以多张图片滑动的列表。业务需要,还没有看到有可以借鉴的例子,谁能提供帮助吗?
  • Unity ScrollView图片滑动翻页效果

    千次阅读 2017-11-04 09:44:22
    这个效果就类似安卓手机翻相册里面图片时左右翻的效果,做出这个效果有很多种方式,比如移动端的话你可以直接判断手势,然后去让图片往相应方向滑动,我这里的方法是直接根据ScrollBar(用的NGUI)的值来判定,适用...
  • swiper.js 图片滑动

    2016-09-20 09:35:50
    后面发现,存在swiper不支持IE浏览器,它主要是一个移动端的插件   new Swiper('#mainPage_banner', { ... autoplay:3000,//自动滑动的间隔 loop: true, autoplayDisableOnInteraction...
  • uniapp中使用scroll-view实现图片滑动效果(含点击预览以及长按下载操作)一、效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/20200815113843330.gif#pic_center)二、注意要点三、代码 一、效果图 二、...
  • 图片滑动验证Demo

    千次阅读 2016-12-27 17:39:51
    首先说一下思路,首先绘制一个闭合路径来作为可移动的图片块的形状,在对应的背景图片位置绘制该路径并填充为灰色,接着在新建一个同样大小的图片,背景设为透明,以及一个对应新的Canvas,利用该路径切割Canvas,并...
  • APP 多张图片滑动显示

    千次阅读 2019-08-11 13:17:18
    用 Delphi FireMonkey 做一个简单的 APP,效果是多张图片滑动显示。一次显示一张图片,手指触摸屏幕左边,向左滑动显示下一张图片;手指触摸屏幕右边,向右滑动显示上一张图片图片切换过程,有滑动过去的动画...
  • 原因:我在布局中 ImgView宽高给的是wrap_content,在滑动过程中图片会放大 解决:给ImgView一个固定大小即可。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 144,171
精华内容 57,668
关键字:

图片滑动