html 图片在一个div中放大缩小效果

图片放大，缩小也是前端中经常遇到得问题，以下就根据这个需求，做如下示范：

<!DOCTYPE html>
<html>
<head><title>图片放大</title>
</head>
<style type="text/css">.main_div{margin: 20px auto;text-align: center;}.pic_div{position: relative;background-color: pink;border: 1px dotted red;margin: 10px auto;width: 800px;height: 600px;}img{width: 600px;height: 400px;}</style>
<script type="text/javascript">function bigit(){var image=document.getElementsByClassName("pic")[0];image.style.height=image.height*1.1+'px';image.style.width=image.width*1.1+'px';}function littleit(){var image=document.getElementsByClassName("pic")[0];image.style.height=image.height/1.1+'px';image.style.width=image.width/1.1+'px';}
</script>
<body><div  style="" class="main_div"><p>图片在一个区域里放大缩小</p><button onclick="bigit()">图片放大</button>&nbsp;&nbsp;<button onclick="littleit()">图片缩小</button><div class="pic_div"><img src="bgcc.jpg" class="pic"></div></div></body>
</html>

效果展示：

html 图片在一个div中放大缩小效果相关推荐

【Axure交互教程】滑块控制图片放大缩小效果
作品名称:滑块控制图片放大缩小效果作品编号:Case007 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...
图片放大缩小效果，支持鼠标滑轮
图片放大缩小效果效果在附件里,麻烦下载来看吧 <html> <head><title>Simple jsp page</title><link ...
v-viewer预览图的使用（图片预览旋转/放大缩小/上下切换等）
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...
uni-app图片如何设置双指放大缩小
图片设置双指放大缩小这个功能相对来说比较简单的,是用于官方文档的路径(组件->视图容器->movable-area),movable-area可以做双指放大缩小,并且放大的同时可以左右移动 ...
html中div设置图片居中显示,图片在DIV中居中显示的方法
问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景) 关于该问题的解决方法如下: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的 ...
php图片居中在div,css如何实现图片在div中垂直居中
本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种 ...
css3旋转带放大缩小效果
下载地址 css3旋转带放大缩小效果,鼠标悬停的时候触发放大或缩小并旋转的动画. dd:
CSS3实现图片在DIV中上下左右居中
CSS3实现图片在DIV中上下左右居中 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
android 自定义ImageView实现图片手势滑动多点触摸放大缩小效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转自:h ...

html 图片在一个div中放大缩小效果

html 图片在一个div中放大缩小效果相关推荐

最新文章

热门文章