zoukankan      html  css  js  c++  java
  • jq随手写图片放大

    html:
    <img id="img1" src="<?php echo $info->business_licence_img; ?>" style="cursor: pointer" width="200" height="200" />  //原图
    <style typpe="text/css">
    #large{position:absolute;display:none;z-index:999; background: #c6c6c6;}
    </style>

    js代码:

    $(function(){
    var ei = $("#large"); //获取图片放大储存框
    ei.hide(); //放大储存框默认隐藏
    var img = new Image(); //实例化图片方法
    $("#img1, img").click(function(){ //点击原图进入放大流程
    img.src =$(this).attr("src");//获取原图路径
    x=document.body.offsetWidth/2-img.width/2; //计算相对显示屏宽度实际图片位置
    y=document.body.scrollTop+$(window).height()/2-img.height/2; //计算相对显示器高度实际图片位置
    ei.css({top:y,left:x,cursor: 'pointer'}).html('<img onclick="hide_img()" style="border:1px solid gray;" src="' + this.src + '" />').show(); //订单并展示原图片
    });
    $(window).scroll(function(){ //为保证原图滚动时也存在于屏幕中间
    if($("#large").is(':visible')){ //若图片是展示状态下
    x=document.body.offsetWidth/2-img.width/2; //重新计算宽度
    y=document.body.scrollTop+$(window).height()/2-img.height/2; //重新计算高度
    ei.css({top:y,left:x,cursor: 'pointer'}); //改变css
    }
    });
    //根据鼠标放大图片,原理相同
    $("#img1, img").mousemove(function(e){
    ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
    }).mouseout( function(){
    ei.hide();
    })
    });
    function hide_img(){ //当点击放大图片时,关闭图片展示
    var ei = $("#large");
    ei.hide();
    }
  • 相关阅读:
    bzoj3507: [Cqoi2014]通配符匹配
    bzoj2120: 数颜色
    bzoj2038: [2009国家集训队]小Z的袜子(hose)
    laravel表单图片上传
    laravel使用$errors提取错误信息
    laravel中的old()函数
    laravel的函数asset()、url()
    laravel表单提交
    laravel中if
    laravel的foreach
  • 原文地址:https://www.cnblogs.com/xiamibk/p/5821934.html
Copyright © 2011-2022 走看看