html实现点击图片放大功能
话不多说，直接上代码
<html>
<head>
<style>
.over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="over"></div><!--背景层-->
<div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少-->
<img src="test.jpg"/><!-- 此处是引入图片的路径 -->
</div>
<script>
$(document).ready(function () {
var imgsObj = $('.amplifyImg img');//需要放大的图像
if(imgsObj){
$.each(imgsObj,function(){
$(this).click(function(){
var currImg = $(this);
coverLayer(1);
var tempContainer = $('<div class=tempContainer></div>');//图片容器
with(tempContainer){//width方法等同于$(this)
appendTo("body");
var windowWidth=$(window).width();
var windowHeight=$(window).height();
//获取图片原始宽度、高度
var orignImg = new Image();
orignImg.src =currImg.attr("src") ;
var currImgWidth= orignImg.width;
var currImgHeight = orignImg.height;
if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
if(currImgHeight<windowHeight){
var topHeight=(windowHeight-currImgHeight)/2;
if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('<img border=0 src=' + currImg.attr('src') + '>');
}else{
css('top',0);
html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
}
}else{
var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
if(currImgChangeHeight<windowHeight){
var topHeight=(windowHeight-currImgChangeHeight)/2;
if(topHeight>35){
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
}else{
css('top',0);
html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
}
}
}
tempContainer.click(function(){
$(this).remove();
coverLayer(0);
});
});
});
}
else{
return false;
}
//使用禁用蒙层效果
function coverLayer(tag){
with($('.over')){
if(tag==1){
css('height',$(document).height());
css('display','block');
css('opacity',1);
css("background-color","#FFFFFF");
css("background-color","rgba(0,0,0,0.7)" ); //蒙层透明度
}
else{
css('display','none');
}
}
}
});
</script>
</body>
</html>
over！over！over！
html实现点击图片放大功能的更多相关文章
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Typora配置双击图片放大功能
在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...
- jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
- 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格
查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- js+jquery+html实现在三种不通的情况下，点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- 图片放大功能如何做？jquery实现
花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
随机推荐
- JavaScript+Json写的二级联动
省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...
- linux的su和sudo（转载）
来源:http://www.jb51.net/LINUXjishu/12713.html 一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比 ...
- 多项式相乘快速算法原理及相应C代码实现---用到fft
最近认真研究了一下算法导论里面的多项式乘法的快速计算问题,主要是用到了FFT,自己也实现了一下,总结如下. 1.多项式乘法 两个多项式相乘即为多项式乘法,例如:3*x^7+4*x^5+1*x^2+5与 ...
- 嵌入式流媒体音视频服务器EasyIPCamera中live555发送性能优化点
EasyIPCamera流媒体服务器 今年EasyDarwin团队在给国内某最大的金融安防公司做技术咨询的时候,开发了一款适用于嵌入式IPCamera.NVR的RTSP流媒体服务器:EasyIPCam ...
- java之异常的捕获及处理
在java中程序的错误主要是语法错误和语义错误(也就是逻辑错误). java中异常处理语句的格式: try{ //有可能出现异常的语句 }catch(异常类 异常对象){ //编写异常的处理语句 }c ...
- linux jdk更换
有时候会发现,安装了新的jdk,而java -version 之后发现仍旧是旧的jdk,即使自己已经更新了JAVA_HOME的环境变量,解决方法如下: 具体如下: 1. 查看相应的jdk是否在 ubu ...
- Vue.js的动态组件模板
组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...
- "makefile:5: *** missing separator. Stop."【转】
本文转载自:http://blog.csdn.net/fireroll/article/details/8607903 写makefile时出现这个错误提示 是表示makefile中的命令前没有使用T ...
- 随机数生成程序代码（ 伪随机<stdlib.h> ）
#include <stdio.h> #include <string> #include <stdlib.h> #include <algorithm> ...
- Codeforces Round #105 (Div. 2) E. Porcelain —— DP（背包问题）
题目链接:http://codeforces.com/problemset/problem/148/E E. Porcelain time limit per test 1 second memory ...