一、HTML代码如下:

<img class="comment_pics" width="50px" height="50px" src="img/01.jpg"/>

<div class="bg">
<img class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" src="">
</div>

二、CSS代码如下:

.fillbg { background-color: rgba(0, 0, 0, 0.6); bottom:; height: 100%; left:; opacity:; position: fixed; right:; top:; width: 100%; z-index:; display:none; }
.fillbg-active { opacity:; display:block; }

三、jQuery代码如下:

<script>
var newImg;
var clientH=$(window).height();
var clientW=$(window).width();
var w = '250';
var h = '250';
$(document).ready(function(){
$(".comment_pics").bind("click", function(){
newImg = $(this)[0].src;
$("body").append('<div class="fillbg"></div>');
$(".fillbg").addClass("fillbg-active");
$('.bgImg').css({'width': w+"px",'height': h+"px",'top':(clientH-h)/2+"px",'left':(clientW-w)/2+"px",'z-index':1101});
$('.bgImg').attr("src",newImg);
}); $(".bgImg").bind("click", function(){
$(".fill-input").removeClass("fill-input-active");
setTimeout(function(){
$(".fillbg-active").removeClass("fillbg-active");
$(".fillbg").remove();
},300);
$('.bgImg').css({'width': '0px','height': '0px'});
$('.bgImg').attr("src",'');
});
});
</script>

jQuery实现点击图片简单放大效果的更多相关文章

  1. jquery 实现点击图片居住放大缩小

    该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...

  2. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  3. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  4. js实现图片点击弹出放大效果

    点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...

  5. 基于Jquery的商城商品图片的放大镜效果(非组件)

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  6. 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

    <img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...

  7. 用CSS3实现对图片的放大效果

    用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -moz-tra ...

  8. CSS实现鼠标移入时图片的放大效果以及缓慢过渡

    transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...

  9. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. JS实现统一社会信用代码的效验(组织机构代码效验)

    参考原文https://blog.csdn.net/hdhxby/article/details/56015370 部分错误,修改整合了下 想查询数据的,请点击:统一信用代码查询地址 查看效验规则点击 ...

  2. 阻止Bootstrap 模态框点击背景空白处自动关闭

    问题描述 模态框点击空白处,会自动关闭,怎么阻止关闭事件呢? 解决方法 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdrop=”st ...

  3. LiveCD 修复Grub引导

    /usr/sbin/grub-probe: error: failed to get canonical path of /cow 如果你是从这句报错search过来的,恭喜您!看来你也是一个调皮的孩 ...

  4. 解决pytesseract.pytesseract.TesseractNotFoundError: tesseract is not installed or it's not in your path问题

    解决方案: 找到python的安装路径下的pytesseract:   例如我的是  C:\develop\Python\Lib\site-packages\pytesseract .用文本编辑器打开 ...

  5. RabbitMQ使用及与spring boot整合

    1.MQ 消息队列(Message Queue,简称MQ)——应用程序和应用程序之间的通信方法 应用:不同进程Process/线程Thread之间通信 比较流行的中间件: ActiveMQ Rabbi ...

  6. spark sc.textFile() 指定换行符

    直接上代码 package com.jason.spark23 import org.apache.spark.sql.SparkSession import org.apache.spark.Spa ...

  7. 1 RAID技术入门

    序   RAID一页通整理所有RAID技术.原理并配合相应RAID图解,给所有存储新人提供一个迅速学习.理解RAID技术的网上资源库,本文将持续更新,欢迎大家补充及投稿.中国存储网一如既往为广大存储界 ...

  8. c#中特性Attribute

    接上篇: 特性介绍: 特性是一个类,需要间接或者直接继承Attribute父类,在标记特性时以中括号包裹,可以标记在元素之前.AttributeTargets.Class设置标记的元素,需要明确指定标 ...

  9. 对decimal 类型的数据进行获取调整

    Decimal为SQL Server.MySql等数据库的一种数据类型,不属于浮点数类型,可以在定义时划定整数部分以及小数部分的位数. 好处:使用精确小数类型不仅能够保证数据计算更为精确,还可以节省储 ...

  10. [转帖]SSD和内存数据库技术

    SSD和内存数据库技术 自己的理解还是不是很对 SSD 提升的是 随机读 并没有对顺序写有多大的提升, 因为数据库采用的是redo的模式. 理论上写入 时是顺序写 所以 写并发的提升不会很大 但是会很 ...