在响应式布局逐渐成为主流的今天,网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关,如何让你的网页实现完美的缩放?
我们可以很快速的写出一个响应式布局的页面,首先看一下效果图。
网页布局
其中html部分的代码如下:
html部分代码
css中的item代码为:
css代码
通过以上代码,完成上述的流式布局后,在我们改变浏览器窗口大小时,div也会随之进行缩放。
But,你以为这就是我们想要的结果吗?
当然不是!在改变浏览器窗口大小时,我们发现虽然div的宽度是进行了缩放,但是高度却没变,因此div的宽高比并未保持原始比例,我们可以看下以下的效果。
缩放后宽高比
从上图中可以很容易看出,缩放后的div宽高比比之前小很多,这并不是我们想要的结果。
我们需要达到的效果是在改变浏览器窗口大小时,div也会随之进行等比例的缩放。
首先,可以使用Javascript代码去实现,这是没有问题的。但是绑定Javascript的onresize事件,在拖拽时可能会出卡顿现象,体验不是很好。
接下来我们通过CSS来实现以上的效果。
使用的核心属性是我们平时并不太注意的padding-bottom。
padding-bottom有一个很容易让人忽略的特性是,当取值为百分比形式时,其百分比的基数是父元素的宽度,而不是高度。
因此我们可以在不用给父元素设置高度的时候,就可以通过padding-bottom属性确定当前元素的高度。我们的做法如下。
将元素的height属性设为0,通过padding-bottom属性确定元素高度。
设置合理的padding-bottom值,例如上述的例子中,在宽度为21%时,如果需要高度是宽度的1.62倍,我们可以将padding-bottom取值为34%
修改后的CSS代码如下。
修改后的CSS
修改后,我们再次调整浏览器窗口的大小,就会发现div是等比例的进行缩放,完美达到了我们的要求。
修改后等比例缩放
在这里,可能会有人有疑问如果设置overflow:hidden;那么里面的文字会不会因为超过height,就会被隐藏了?
答案是不会的,根据CSS2.1的规范,overflow只会对处于padding外面的内容生效,即只有超出了 padding区域的内容才会被overflow属性隐藏掉。而在设置padding-bottom后,实际已经决定了元素的height属性,因此overflow:hidden;不会生效。
今天这篇文章主要讲解了利用CSS完成页面等比例缩放的最简单方式,你学会了吗?
html页面制作中,可以利用 CSS 中的 transform 属性对图片进行旋转,缩放,移动或倾斜的操作。而今天我们只说说 transform 属性对图片进行等比例的缩放操作。
transform:该属性向元素应用 2D 或 3D 转换。它允许我们对元素进行旋转、缩放、移动或倾斜的操作。
缩放使用值:
scaleY(n):对高度进行缩n倍的缩放
scaleX(n):对宽度进行缩放,n指的是缩放比例
scale(n):对整体高度和宽度进行缩放,n为缩放的比例,为数字
示例代码:
transform: scale(2)
scaleX():可以对元素(图片)的宽度进行缩放,以下代码是将原来的图片的宽度放大了2倍。
示列代码:
<div class="divimg"> <img src="biao.png" > <br/> <!--宽度缩放--> <img src="biao.png" style="transform:scaleX(2);"> </div>
运行结果:
了点时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。(因为代码文字呈现没有格式,难以阅读,以后小编提供的代码都以截图方式呈现,底部有源码链接)。
到底多简单,先来看代码
基于jQuery
基于jQuery
拖拽实例图:
拖拽实例图
将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:
调用方式
放大、缩小
我们给拖拽增加点功能,支持放大、缩小,先看实例图:
放大、缩小
将代码剥离,原先的代码保留不变,增加一个绑定事件:
放大、缩小
这样来实现放大、缩小、拖拽是不是很简单,还能实现很多其他效果,大家慢慢领悟。
原理分析:
放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是 document 的 mousemove,当鼠标在网页上移动的时候,无时无刻不在触发 mousemove 事件,当鼠标触发事件时,什么时候需要执行我们特定的操作,这就是我们要做的了。我在 mousemove 中增加了几个对象来判定是否进行操作:
move:是否执行触发操作
move_target:操作的元素对象
move_target.posix:操作对象的坐标
call_down:mousemove的时候的回调函数,传回来的this指向document
call_up:当鼠标弹起的时候执行的回调函数,传回来的this指向document
小提示:
简单的操作,只需要设定 move_target 对象,设置 move_target 的时候不要忘记了 move_target.posix 哦;
复杂的操作可以通过call_down、call_up进行回调操作,这个时候是可以不用设置 move_target 对象的
深入研究
拖拽和放大、缩小实现了,但是有个问题,当我们鼠标点击并滑动的时候,是会选中文本的,为了避免这个问题,大家可以自行百度
css 阻止文本选中
css 阻止文本选中
网页的放大、缩小、拖拽事件就研究到这里了,小编不再对如何拓展进行深入讲解,一切靠大家自行研究,权当课后作业了。~~
源码链接地址:
http://orzcss.com/posts/d554a392/
本文内容均属个人原创作品,转载此文章须附上出处及原文链接。
加关注,定时推送,互动精彩多,若你有更好的见解,欢迎留言探讨!
*请认真填写需求信息,我们会在24小时内与您取得联系。