html 图片在一个div中放大缩小效果
<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>
<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中放大缩小效果的更多相关文章
- 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
- PhotoView实现图片随手势的放大缩小的效果
项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...
- 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.) 搜狐客户端 ...
- 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...
- Ionic实战三:Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览
这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能 点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...
- JS微信网页使用图片预览(放大缩小)
前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...
- 纯CSS实现内容放大缩小效果
先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...
- iOS图片预览、放大缩小
思路 图片预览,优先考虑基础控件UIImageView.UIButton 图片预览中可能需设置不同的mode,优先考虑UIImageView typedef NS_ENUM(NSInteger, UI ...
- 尺寸不固定的图片在div中垂直居中并完全显示
前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...
随机推荐
- jQuery实现倒计时效果-杨秀徐
本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...
- Fibre Channel address weaknesses
http://searchitchannel.techtarget.com/feature/Fibre-Channel-address-weaknesses Figure 2.1 Five layer ...
- 世纪互联提供的关于Powershell中将虚拟机加入备份保管库的方法
请您参考以下步骤进行操作,如有问题请与我们联系: 对一台ARM虚拟机(虚拟机名称:paularm08r21)进行备份(参考:https://www.azure.cn/documentation/art ...
- spring-boot 实现文件上传下载
@Controller public class FileUploadCtrl { @Value("${file.upload.dir}") private String path ...
- python object对象
动态语言的对象属性 既然都是动态语言,自然python和熟知的JavaScript很像,建一个空对象用来存放所有的数据,看看js: var data = {}; data.name = 'CooMar ...
- Read from socket failed: Connection reset by peer.
复制密钥另一台主机时,出现了错误: Read from socket failed: Connection reset by peer. 到被登录主机的/var/log/auth.log查看日志: M ...
- ReactNative踩坑日志——fetch如何向服务器传递参数
一:简单参数 简单的参数,我们可以使用手动拼接的方式传递. 格式为: fetch(url?key1=val1&key2=val2&...).then((response) => ...
- OpenERP7测试手记之 - EMail配置 转
转自http://blog.sina.com.cn/s/blog_6d5929a00101b74y.html 在OpenERP中进行Email配置要注意以下几点: 1.如下面两个图,公司的“电子邮件” ...
- 使用fuel6.0自己主动安装openstack-juno版本号(2)
上篇中fuel_master已经安装完毕.接下来我们介绍怎样新建一个openstack环境. 1,在web界面中新建openstack环境: 点击主界面的加入button,新建openstack环境. ...
- javascript 如何打印、输出数组内容(将数组内容以字符串的形式展示出来)
1.情景展示 在实际开发过程中,为了调试,有时我们需要看数组中具体包含了哪些数据,但是, 如果我们直接打印该数组对象,显示的结果却不是我们想要的. 如何才能将数组内容打印出来呢?(将数组内容以 ...