通过html5的range属性动态改变图片的大小
range属性已经是很成熟的属性了,我们可以使用这个属性进行动态调整图片的宽度,其中原理在于通过不断获取range的值,并赋予给所需要的图片,进而达到动态改变图片的效果。下面贴出具体的代码,主要参照了别人的风格,加以改装。
1.这部分主要是整个页面的css代码,这一部分没有什么需要说明的,直接引用过来。
.dialog_container {
display: none;
width: 100%;
width: 100vw;
height: 100%;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog_container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog_box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
} .dialog_title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
} .dialog_close {
position: absolute;
top: 5px;
right: 5px;
} .dialog_body {
background-color: #fff;
} .demo_image {
-webkit-transition: width .5s;
-moz-transition: width .5s;
transition: width .5s;
}
接下来就是主要的html代码了,这里进行了一些小的修改
<p>图片宽度 :<span class="img-width"></span></p>
<p style="position: relative;z-index: 666">200<input type="range" name="range" min="200" max="1000" step="1" value="300"/>1000</p>
<button>点击弹出图片</button> <div id="dialogContainer" class="dialog_container">
<div id="dialogBox" class="dialog_box">
<div id="dialogTitle" class="dialog_title">尺寸动态可变图片</div>
<a href="javascript:" id="dialogClose" class="dialog_close">[关闭]</a>
<div id="dialogBody" class="dialog_body">
<img src="../img/new.png" class="demo_image" />
</div>
</div>
</div>
最后是经过改装的js代码,重要的一点不能忘记了,一定要记得引入jquery的库。
(function() { var eleW= $(".img-width"), eleR = $("input[type='range']"), eleB = $("button"),w= $("input[type='range']").val();
eleDialog = $("#dialogContainer"); eleB.on("click", function() {
$("#dialogBody img").css({
width:w
});
eleDialog.show();
}); eleR.on("click", function() {
eleW.html(this.value);
$("#dialogBody img").css({
width:this.value
})
}); $("#dialogClose").on("click", function() {
eleDialog.hide();
return false;
});
})();
以上就是整个动态实现图片宽度弹窗的实现,其中的原理就在于动态获取到range的值,并赋值给元素的宽,再加上一个平滑的国度使得该效果更加的逼真。其主要目的在于学习和使用range的功能用法。
通过html5的range属性动态改变图片的大小的更多相关文章
- 使用jQuery动态改变图片显示大小
当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...
- img超出div width时, jQuery动态改变图片显示大小
参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...
- 分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小
原文:分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小 /** * Reallocates an array with a new size, and copies the co ...
- 使用thumbnailator不按照比例,改变图片的大小
我们在平时的开发中,偶尔也会遇到图片处理的问题,比如图片的压缩,按比例改变图片的大小,不按比例改变图片的大小等等. 如果要自己去开发这样一套工具,我觉得大多数人都是做不到的,所以还是学会站在巨人的肩膀 ...
- 由一次动态改变font-size的大小引申的一系列困惑补录
以下结论如有错误,欢迎指正 在切入正题之前,先了解下window 和document这两个大对象 我们熟知 JavaScript的组成如下图所示: window对象和document对象分别属于哪个分 ...
- Android代码中动态设置图片的大小(自动缩放),位置
项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...
- c# 改变图片的大小(w,h)
本文介绍获取网络上的图片将其大小尺寸改成自己想要的 /// <summary> /// 图片大小裁剪 /// </summary> /// <param name=&qu ...
- js动态改变图片热区坐标,手机端图片热区自适应
<img id='banner1' src="images/banner.jpg" usemap="#banner" border="0&quo ...
- 使用第三方工具Thumbnailator动态改变图片尺寸
Thumbnailator项目git地址:https://github.com/coobird/thumbnailator 使用步骤 1.添加依赖 <!-- Thumbnailator图片处理 ...
随机推荐
- AKKA初体验
关于thread和actor下面这段话讲的很好Experienced developers have learned to be very careful with unrestricted thre ...
- datatables配置及数据传输
var merchant_url = "index.php?op=merchant"; var table_merchant_setting ={ "ajax" ...
- 编译Hadoop源码
背景: 在阅读hadoop源代码过程中会发现部分类或者函数无法找到,这是由于Hadoop2.0使用了Protocol Buffers定义了RPC协议, 而这些Protocol Buffers文件在Ma ...
- pow(x,n) leecode
https://oj.leetcode.com/problems/powx-n/ 提交地址 快速幂的使用,可以研究一下 public class Solution { public double po ...
- vijosP1388 二叉树数
vijosP1388 二叉树数 链接:https://vijos.org/p/1388 [思路] Catalan数.根据公式h=C(2n,n)/(n+1)计算.首先化简为 (n+i)/i的积(1< ...
- 18. 4Sum
#include <string>#include <stack>#include <vector>#include <map>#include < ...
- 30分钟Git命令入门到放弃
git 现在的火爆程度非同一般,它被广泛地用在大型开源项目,团队开发,以及独立开发者,甚至学生之中. 初学者非常容易被各种命令,参数吓哭.但实际上刚上手你并不需要了解所有命令的用途.你可以从掌握一些简 ...
- 【转】漫谈ANN(2):BP神经网络
上一次我们讲了M-P模型,它实际上就是对单个神经元的一种建模,还不足以模拟人脑神经系统的功能.由这些人工神经元构建出来的网络,才能够具有学习.联想.记忆和模式识别的能力.BP网络就是一种简单的人工神经 ...
- 了解mongodb
本文大纲 基础了解mongodb(mongodb介绍,跟其他nosql区别,跟内存服务器区别等,使用场景) 在使用前,强力建议看哈http://wenku.baidu.com /link?url=lu ...
- 341. Flatten Nested List Iterator
List里可以有int或者List,然后里面的List里面可以再有List. 用Stack来做比较直观 Iterator无非是next()或者hasNext()这2个方程 一开始我想的是hasNext ...