<html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <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">

         if (!document.getElementsByClassName) {

             document.getElementsByClassName = function (className, element) {

                 var children = (element || document).getElementsByTagName('*');

                 var elements = new Array();

                 for (var i = ; i < children.length; i++) {

                     var child = children[i];

                     var classNames = child.className.split(' ');

                     for (var j = ; j < classNames.length; j++) {

                         if (classNames[j] == className) {

                             elements.push(child);

                             break;

                         }

                     }

                 }

                 return elements;

             };

         }

         function bigit() {

             var image = document.getElementsByClassName("pic")[];

             // var image = $("#tt");

             image.style.height = image.height * 1.1 + 'px';

             image.style.width = image.width * 1.1 + 'px';

         }

         function littleit() {

             var image = document.getElementsByClassName("pic")[];

             // var image = $("#tt");

             image.style.height = image.height / 1.1 + 'px';

             image.style.width = image.width / 1.1 + 'px';

         }

 </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div style="" class="main_div">

         <p>

             图片在一个区域里放大缩小</p>

         <button onclick="bigit()">

             图片放大</button>&nbsp;&nbsp;

         <button onclick="littleit()">

             图片缩小</button>

         <div class="pic_div">

             <img src="Image/2.png" class="pic" alt="" id="tt">

         </div>

     </div>

     </form>

 </body>

 </html>

html 图片在一个div中放大缩小效果的更多相关文章

  1. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

  2. PhotoView实现图片随手势的放大缩小的效果

    项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...

  3. 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  4. 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...

  5. Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览

    这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能 点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...

  6. JS微信网页使用图片预览（放大缩小）

    前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...

  7. 纯CSS实现内容放大缩小效果

    先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...

  8. iOS图片预览、放大缩小

    思路 图片预览,优先考虑基础控件UIImageView.UIButton 图片预览中可能需设置不同的mode,优先考虑UIImageView typedef NS_ENUM(NSInteger, UI ...

  9. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

随机推荐

  1. Android 之 assets目录和raw目录

    Android 中存在assets目录和raw目录,它们既有相似之处又有所不同.一.共同点: 目录下的资源会被原封不动的拷贝到APK中,而不会像其它资源文件那样被编译成二进制的形式. 二.区别 1.最 ...

  2. C++ 第五课：C/C++ 数据类型

    C语言包含5个基本数据类型: void, integer, float, double, 和 char. 类型 描述 void 空类型 int 整型 float 浮点类型 double 双精度浮点类型 ...

  3. vs 15 key

    vs 15 Key :HM6NR-QXX7C-DFW2Y-8B82K-WTYJV vs 15 Key :2XNFG-KFHR8-QV3CP-3W6HT-683CH

  4. linux2.6.30.4内核移植（4）——完善串口驱动

    在内核里支持两个串口,也就是芯片的UART0和UART1,而UART2的驱动是针对红外接口的,而不是串口驱动,这里将其修改为串口驱动. 一.修改内核源码arch/arm/mach-s3c2440/ma ...

  5. shell alias添加别名使用

    大家一定知道SHELL的基本用法,那么著名的命令:`ll`是代表`ls -l`,那么是怎么实现的哪?其实是添加了一个别名alias ll="ls -l" 我使用alias最多的地方 ...

  6. Emacs 使用graphviz-dot-mode创建架构图

    安装 首先要安装graphviz-dot-mode模块,假设list-packages的网站国内无法訪问,改为手动下载graphviz-dot-model.el.放到~/.emacs.d/文件夹下. ...

  7. 图像检索：RGBHistogram+欧几里得距离|卡方距离

    RGBHistogram: 分别计算把彩色图像的三个通道R.G.B的一维直方图,然后把这三个通道的颜色直方图结合起来,就是颜色的描写叙述子RGBHistogram. 以下给出计算RGBHistogra ...

  8. SSM框架中，配置数据库连接的问题

    MySQL数据库版本是8.0.11. 要用驱动:com.mysql.cj.jdbc.Driver 最主要的是数据库的连接url. 搞了半天才把问题搞明白: 数据库url后面要加上参数: jdbc:my ...

  9. code vs 1013 求先序排列

    2001年NOIP全国联赛普及组 题目描述 Description 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度<=8). 输入描述 Input De ...

  10. C# 向指定的进程发送消息

    public static class ProcessExtensions { // Messages const int WM_KEYDOWN = 0x100; const int WM_KEYUP ...