jquery 实现图片放大

文章目录

一、html、Jquery代码如下
二、效果
- 2.1、初始化加载的页面
- 2.2、鼠标放到图片上时（即 `hover` 事件），图片放大为1.4倍
- 2.3、鼠标点击（即 `click` 事件）后，图片放大：
- 2.4、鼠标再次点击（ `click` 事件）后，放大的图片消失，恢复初始状态：

一、html、Jquery代码如下

<!DOCTYPE html>
<html>
<head>
<title>enlarge-img</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script><style>
#enlarge-div {position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.7);z-index: 2;width: 100%;height: 100%;display: none;
}#enlarge-div:hover {cursor: zoom-out;
}#enlarge-div #inner-div {width: 80%;height: 85%;margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);
}#enlarge-div #inner-div #big-img {max-width: 100%;max-height: 100%;position: absolute;left: 50%;top: 50%;transform: translateY(-50%) translateX(-50%);
}.enlarge-img {  cursor: zoom-in;  transition: all 0.6s;
}.enlarge-img:hover {  transform: scale(1.4);
}</style>
</head>
<body><h1>jquery 图片放大</h1><img class="enlarge-img" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb"    style="height:80px; max-width:80px;"><img class="enlarge-img" src="https://images.pexels.com/photos/620337/pexels-photo-620337.jpeg?auto=compress&cs=tinysrgb"    style="height:80px; max-width:80px;"><img class="enlarge-img" src="https://images.pexels.com/photos/2088167/pexels-photo-2088167.jpeg?auto=compress&cs=tinysrgb"  style="height:80px; max-width:80px;"><img class="enlarge-img" src="https://images.pexels.com/photos/1658967/pexels-photo-1658967.jpeg?auto=compress&cs=tinysrgb"  style="height:80px; max-width:80px;" ><div id="enlarge-div"><div id="inner-div"><img id="big-img" src=""/></div></div><script type="text/javascript">$(function () {$(".enlarge-img").click(function () {$("#big-img").attr("src", $(this).attr("src"));//设置#big-img元素的src属性$("#enlarge-div").fadeIn("fast");//显示弹出层$("#enlarge-div").click(function () {//关闭弹出层$(this).fadeOut("fast");});});
});
</script>
</body>
</html>

二、效果

2.1、初始化加载的页面

2.2、鼠标放到图片上时（即 `hover` 事件），图片放大为1.4倍

2.3、鼠标点击（即 `click` 事件）后，图片放大：

2.4、鼠标再次点击（ `click` 事件）后，放大的图片消失，恢复初始状态：

jquery 实现图片放大相关推荐

jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
php中图片放大,jquery实现图片放大缩小特效
和大家分享一个最近用到的jquery实现图片的放大缩小的特效.具体效果是鼠标移动到图片上,图片自动缩到左上角,右下角出现文字说明,鼠标移走后图片恢复,文字被图片遮挡.非常不错的一个图片特效功能.贴一下 ...
jquery实现图片放大效果
好久没更新了,先来一发关于jquery图片放大缩小的代码直接上代码前端页面: <tr><td height="30" align="right&qu ...
实现jquery双击图片放大
第一步准备一个放大的div容器 <div id="outerdiv" style="position: fixed; top: 0; left: 0; backg ...
html5 点击图片预览放大,jQuery超实用图片放大预览特效插件
大自然的自述过去,我这儿有新鲜的空气,清澈的河流,雄伟的高山,一望无际的草原,郁郁葱葱的森林.天空中,小鸟在自由自在的飞翔:水里,小鱼在快活的游来游去:森林里,动物们快乐地嬉戏,人类辛勤的种植.一切 ...
图片放大显示的jQuery插件
从网上下载了一个jquery的图片放大显示插件,效果如下前台代码调用: 先引入js <script type="text/javascript" src="../ ...
JQuery，图片的放大和缩小
JQuery支持图片放大.缩小: 一.JQuery支持图片放大.缩小: 今天在"懒人之家"看到JQuery支持图片放大和缩小这个效果,顿时觉得非常神奇,就学习一下的. 二.下载源码 ...
推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序 ...
jQuery Zoom 图片聚焦或者点击放大A plugin to enlarge images on touch, click, or mouseover
下载: zoom-master 项目地址: https://github.com/jackmoore/zoom Compatible with: jQuery 1.7+ in Chrome, Fire ...

jquery 实现图片放大

文章目录

一、html、Jquery代码如下

二、效果

2.1、初始化加载的页面

2.2、鼠标放到图片上时（即 `hover` 事件），图片放大为1.4倍

2.3、鼠标点击（即 `click` 事件）后，图片放大：

2.4、鼠标再次点击（ `click` 事件）后，放大的图片消失，恢复初始状态：

jquery 实现图片放大相关推荐

最新文章

热门文章

jquery 实现 图片放大

文章目录

一、html、Jquery代码如下

二、效果

2.1、初始化加载的页面

2.2、鼠标放到图片上时（即 hover 事件 ）， 图片放大为1.4倍

2.3、鼠标点击（即 click 事件）后，图片放大：

2.4、鼠标再次点击（ click 事件）后，放大的图片消失，恢复初始状态：

jquery 实现 图片放大相关推荐

最新文章

热门文章

jquery 实现图片放大

2.2、鼠标放到图片上时（即 `hover` 事件），图片放大为1.4倍

2.3、鼠标点击（即 `click` 事件）后，图片放大：

2.4、鼠标再次点击（ `click` 事件）后，放大的图片消失，恢复初始状态：

jquery 实现图片放大相关推荐