利用js实现图片展开与收缩
1、元素居中放大：
1>除了要改变元素的宽高以外，还要改变元素的定位（left,top）,如果图片放大一倍，那么位移放大宽高的一半。
2>元素必须是定位的。所以，在css中设置为浮动布局，需要使用js来转换布局，相对用户眼睛的位置保持不变
注意：在用js去设置css样式的时候，在同一个代码块中，有些css样式的设置的权限要高于其他样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
li{
width: 100px;
height: 100px;
background-color: red;
float: left;
list-style: none;
margin:10px 0 0 10px ;
}
#ul1{
margin: 0;
padding: 0px;
width: 330px;
margin: 100px auto 0;
position: relative;
}
</style>
</head>
<script src="startMove.js"></script>
<script>
window.onload=function () {
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var zIndex=1; for(var i=0;i<aLi.length;i++){
aLi[i].style.left=aLi[i].offsetLeft+'px';
aLi[i].style.top=aLi[i].offsetTop+'px';
aLi[i].pos={left:aLi[i].offsetLeft,top:aLi[i].offsetTop};
}
for (var i=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.margin='0px';
aLi[i].onmouseover=function () {
this.style.backgroundColor='blue';
this.style.zIndex=zIndex++;
startMove(this,{
width:200,
height:200,
left:this.pos.left-50,
top:this.pos.top-50
});
}
aLi[i].onmouseout=function () {
this.style.backgroundColor='red';
startMove(this,{
width:100,
height:100,
left:this.pos.left,
top:this.pos.top
});
}
} }
</script>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
利用js实现图片展开与收缩的更多相关文章
- 利用js将图片地址进行转义
利用js将图片地址进行转义 在业务中经常需要将图片从后台获取,然后在前台显示.其中后台存取图片主要分为两种,一种是数据库中获取图片的地址,第二种是存取图片内容的信息.这次主要是前台代码处理第一种情况. ...
- 利用JS实现图片的缓存
web页面使用HTML的<img>元素来嵌入图片,和所有HTML元素一样,<img>元素也是可以通过脚本来操控的(设置元素的src属性,将其指向一个新的URL会导致浏览器载入并 ...
- 利用js使图片外层盒子的高等于适应图片的高
JS代码如下:<script> $(window).load(function(){ var width=$(window).width(); var img_1=$(".hot ...
- js 实现内容的展开和收缩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- DataGridView之行的展开与收缩
很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...
- JS实现图片''推拉门''效果
JS实现图片''推拉门''效果 ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...
- 一款由jQuery实现的手风琴式相册图片展开效果
之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...
- 利用Photoshop修改图片以达到投稿要求
摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 091 Decode Ways 解码方法
包含 A-Z 的字母的消息通过以下规则编码:'A' -> 1'B' -> 2...'Z' -> 26给定一个包含数字的编码消息,请确定解码方法的总数.例如,给定消息为 "1 ...
- CSS浮动float父div没有高度的问题
如下所示,子元素 div2 本身具有高度和宽度,但由于其具有float:left:属性后.其父元素 div1 不具有高度. <html> <head> </h ...
- 174. 删除链表中倒数第n个节点
描述 笔记 数据 评测 给定一个链表,删除链表中倒数第n个节点,返回链表的头节点. 注意事项 链表中的节点个数大于等于n 您在真实的面试中是否遇到过这个题? Yes 样例 给出链表1->2-&g ...
- 修改php默认的FastCGI模式为ISAPI模式的方法
一.到www.php.net中下载PHP的ZIP文件包.注意版本要对应. 二.将sapi目录中的:php4isapi.dll复制到c:\php目录中. 三.进入虚拟主机管理平台的"网站管理& ...
- AJPFX关于延迟加载的单例模式的安全问题解决
请写一个延迟加载的单例模式?写懒汉式:当出现多线程访问时怎么解决?加同步,解决安全问题:效率高吗?不高:怎样解决?通过双重判断的形式解决.懒汉式:延迟加载方式.当多线程访问懒汉式时,因为懒汉式的方法内 ...
- oracle 换行回车符
工作中碰到这样一种情况,做一个data patch,将表中的某个字段的内容copy到另一个字段,添加时若目标字段有值,需要换行处理. 首先,oracle中的回车符是chr(13),换行符是chr(10 ...
- IE和火狐下的iframe刷新
前面使用了前端上传插件plupload,在谷歌浏览器中运行完全没问题,但是在IE和火狐下就出现当文档加载完成之后,该文件上传的iframe插件的上传按钮点击无效,当对上传的文件进行一次删除之后,按钮就 ...
- url post 请求方法
最近的项目是给手机app 提供方法. 因此 此方法可以进行接口测试 static class HttpClient { static CookieContainer cookies = new Coo ...
- 【Web应用-Kudu】Kudu 管理和诊断 azure web 应用
Azure Kudu是 GitHub 上的一个开源项目,Kudu 站点 (也称为网站控制管理 SCM) 提供了一系列的在线工具,可以帮助用户查看 web 应用的设置,诊断 web 应用,以及安装 w ...
- c++的const和static区别
const定义的常量在超出其作用域之后其空间会被释放,而static定义的静态常量在函数执行后不会释放其存储空间. static表示的是静态的.类的静态成员函数.静态成员变量是和类相关的,而不是和类的 ...