js限制图片大小、点击放大图片、点击在新开页面显示
缩放图片到合适大小
function ResizeImages() {
var myimg, oldwidth, oldheight;
var maxwidth = 400;
var maxheight = 400
var imgs = document.getElementsByTagName('img'); //获取页面图片 这里使用document过去
for (i = 0; i < imgs.length; i++) {
myimg = imgs[i];
if (myimg.width > myimg.height) {
if (myimg.width > maxwidth) {
oldwidth = myimg.width;
myimg.height = myimg.height * (maxwidth / oldwidth);
myimg.width = maxwidth;
}
} else {
if (myimg.height > maxheight) {
oldheight = myimg.height;
myimg.width = myimg.width * (maxheight / oldheight);
myimg.height = maxheight;
}
}
}
}
点击放大、再点击恢复
点击放大两倍 再点击恢复正常大小
var flag = true;//状态true为正常的状态,false为放大的状态
$("#img").click(function () {
var imgH,//图片的高度
imgW,//图片的宽度
img = document.getElementsByTagName('img')[0];//图片元素
//图片点击事件
imgH = img.height; //获取图片的高度
imgW = img.width; //获取图片的宽度
if (flag) {
//图片为正常状态,设置图片宽高为现在宽高的2倍
flag = false;//把状态设为放大状态
img.height = imgH * 2;
img.width = imgW * 2;
} else {
//图片为放大状态,设置图片宽高为现在宽高的二分之一
flag = true;//把状态设为正常状态
img.height = imgH / 2;
img.width = imgW / 2;
}
});
点击在新页面打开浏览原图
//在新页面打开浏览
$("#img").click(function () {
var src = $("#img").attr("src");
window.open(src);
});
js限制图片大小、点击放大图片、点击在新开页面显示的更多相关文章
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- 实现图片大小的自动控制( 图片大小控制CSS代码)
图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...
- jquery点击放大图片
参考地址:https://blog.csdn.net/qq_42249896/article/details/86569636 一.应用场景:点击图片可以对图片进行放大显示. 二.实现代码: 说明:我 ...
- ios 点击放大图片,保存至手机相册
直接贴.m文件代码 #import "UIImageView+Scale.h" static CGRect oldframe; @implementation UIImageVie ...
- JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用
业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...
- html图片上传阅览并且点击放大
关闭 qq_31540195的博客 目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典 程序员9月书讯 每周荐书: ...
- ios开发图片点击放大
图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...
- img点击放大的js实现
业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...
- iOS 使用系统的UITabBarController 修改展示的图片大小
1. 设置TabBarItem图片的大小 1 - (void)configurationAppTabBarAndNavigationBar { // 选中的item普通状态图片的大小 UIImage ...
随机推荐
- 手把手教你实现 Google 拓展插件(转自实验楼)
一.课程简介 1.1 实验介绍 本课程的实验环境由实验楼提供,Google 浏览器拓展的运行环境为 Google 浏览器.在本实验中,你将了解如何制作一个属于你自己的 Google 拓展插件. 课程实 ...
- C++类中this指针的理解
先要理解class的意思.class应该理解为一种类型,象int,char一样,是用户自定义的类型.用这个类型可以来声明一个变量,比如int x, myclass my等等.这样就像变量x具有int类 ...
- 关于rtsp的时间戳问题
这里主要关注的rtp包的时间戳,在rtsp中,播放器的1S钟的定义是和媒体的采样率有关的. 例如视频的采样率是90K,那么最小时间粒度(单位)是1/90000秒,再转换成ms就是 1/90毫秒,这个就 ...
- 京东返利渠道,自己拿返利,无需A推B操作
京东返利渠道,自己拿返利,无需A推B操作,简单快捷方便 1.在微信小程序中搜索 “京东饭粒” 2.进入京东饭粒,进购物车下单(只能在购物车内下单返利) 3.收货后26天返京豆到你的京东账号中,”佛系返 ...
- bzoj5047: 空间传送装置
Description 太空中一共有n座星球,它们之间可以通过空间传送装置进行转移.空间传送装置分为m种,第i种装置可以用4个参 数a_i,b_i,c_i,d_i来描述.因为时空抖动的问题,在非整数时 ...
- reids高可用(灾难备份-持久化)
java缓存存放到内存之中,当服务器重启以后,内存的数据将丢失,而reids作为缓存,重启reids以后 数据是不是也会丢失,redis服务器重启以后数据也不会丢失,这个是redis提供了持久化的功能 ...
- [UE4]从零开始构建VR角色
一个工程是不是VR,并没有什么特别的地方,原则上任何工程都可以在VR设备下展示 一.新建一个名为“VRPawnBase”的Pawn. 二.在VRPawnBase中添加组件“Steam VRChaper ...
- ef中文文档
https://entityframework.net/zh-CN/home 在使用ef进行对数据库操作时 数据库迁移 https://www.dotnettricks.com/learn/entit ...
- 涂抹mysql笔记-InnoDB/MyISAM及其它各种存储引擎
存储引擎:一种设计的存取和处理方式.为不同访问特点的表对象指定不同的存储引擎,可以获取更高的性能和处理数据的灵活性.通常是.so文件,可以用mysql命令加载它. 查看当前mysql数据库支持的存储引 ...
- Java笔试面试题整理第四波
转载至:http://blog.csdn.net/shakespeare001/article/details/51274685 作者:山代王(开心阳) 本系列整理Java相关的笔试面试知识点,其他几 ...