js点击按钮，放大对应图片代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<img name="a" src="imgs/index-banner.png">
<img name="b" src="imgs/MORE.png">
<script>
var flag = true,//状态true为正常的状态,false为放大的状态
imgH,//图片的高度
imgW,//图片的宽度
imga = document.getElementsByName("a")[0];//图片元素
imgb = document.getElementsByName("b")[0];//图片元素
b.onclick = function(){
//图片点击事件
imgH = imga.height; //获取图片的高度
imgW = imga.width; //获取图片的宽度
if(flag){
//图片为正常状态,设置图片宽高为现在宽高的2倍
flag = false;//把状态设为放大状态
imga.height = imgH*2;
imga.width = imgW*2;
}else{
//图片为放大状态,设置图片宽高为现在宽高的二分之一
flag = true;//把状态设为正常状态
imga.height = imgH/2;
imga.width = imgW/2;
} } </script>
</body>
</html>
js点击按钮，放大对应图片代码的更多相关文章
- jquery点击按钮弹出图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- JS点击按钮弹出窗口
由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...
- JS点击按钮打开新的独立页面
工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...
- js点击按钮为元素随机字体颜色和背景色
文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...
- 原生js点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 点击按钮下载图片，另存为
js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...
- JS 点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 点击按钮，缩放图片（img.width、img.style.width、img.offsetWidth）
前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http ...
随机推荐
- 从sockaddr中取得Ip地址和端口号
在socket编程中,服务器端accept()等待一个客户端的连接,当连接成功后,accept拷贝客户端的地址信息到sin_addr里面,我们如何从sin_addr取得此客户端的Ip地址和端口号呢? ...
- Android面试，与Service交互方式
五种交互方式,分别是:通过广播交互.通过共享文件交互.通过Messenger(信使)交互.通过自定义接口交互.通过AIDL交互.(可能更多) Service与Thread的区别 Thread:Thre ...
- Java基础知识强化之集合框架笔记02：集合的继承体系图解
1. 集合的继承体系图解:
- 初识web01
Tomcat 服务器 B/S 浏览器/服务器 C/S 客户端/服务器 URI:统一资源标识符 大 广 /项目名 URL:统一资源定位符 ...
- Asp 图形化报表
1 图形化的报表的优点 分析.统计业务数据 表现直观,漂亮,有震撼效果的图形化的方式展现业务数据 复杂的业务数据简单化 2 常用的报表组件 HighCharts:是纯js编写的图形化报表 水晶报表 ...
- nginx添加缓存
nginx的具体逻辑是什么样的? 分布式session spring session redis过滤器 有4种方案: 一直访问一台 //如果这台机器垮掉了,怎么办? session同步 序列化传输 / ...
- iOS判断当前控制器是否正在显示
+(BOOL)isCurrentViewControllerVisible:(UIViewController *)viewController { return (viewController.is ...
- 解决Windows服务1053错误方法
WCF使用MSMQ绑定寄宿在Windows服务上,但启动服务时出现1053错误 在网上搜索了N多解决方案,都是比较高深的扯到原理和系统bug等问题 看了看到最后也没有解决,最终我决定使用一个比较山寨的 ...
- 1.2 Coin 项目
自2009年起,Coin便是Java 7(和Java 8)中一个开源的子项目.创建Coin项目是为了反映Java语言中的微小变动: 修改Java语言,按不同的修改方式及其复杂度依次分为:类库.工具提供 ...
- phpcms v9开源开发框架基础mvc解读
根据对mvc的了解 简要写个mvc框架 也谈不上框架 希望对新手有帮助 简单的解析下mvc 你可以这样了解 m模型也就是数据库操作 v视图 c控制器 通过url来判断调用m和v来完成请求,本身没数 ...