1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7.     html,body,ul{margin:0;padding:0;}
  8.     ul{width:366px;position:relative;background:#666;height:500px;margin:0 auto;}
  9.     li{width:100px;height:100px;border:1px solid #000;background:#CCC;float:left;margin:10px;display:inline;list-style:none;z-index:1;}
  10. </style>
  11. <script src='perfectMove.js'></script>
  12. <script>
  13.     window.onload = function(){
  14.         var ul = document.getElementsByTagName('ul')[0];
  15.         var arrLi = ul.getElementsByTagName('li');
  16.         /*布局转换*/
  17.         var minZindex = 2;
  18.         for(var i=0;i<arrLi.length;i++){
  19.             arrLi[i].style.left = arrLi[i].offsetLeft+'px';
  20.             arrLi[i].style.top = arrLi[i].offsetTop+'px';
  21.         }
  22.         //这个不能偷懒，和上面不能合成一个循环
  23.         for(var i=0;i<arrLi.length;i++){
  24.             arrLi[i].style.position = 'absolute';
  25.             arrLi[i].style.margin = 0;/*offset的时候已经赋值过margin*/
  26.         }
  27.  
  28.         /*图片的缩放*/
  29.  
  30.         for(var i=0;i<arrLi.length;i++){
  31.             arrLi[i].onmouseover = function(){
  32.                 this.style.zIndex = minZindex++;
  33.                 perfectStartMove(this,{width:200,height:200,marginLeft:-50,marginTop:-50});/*margin = （变大的宽-原来的）/2*/
  34.             };
  35.  
  36.             arrLi[i].onmouseout = function(){
  37.                 perfectStartMove(this,{width:100,height:100,marginLeft:0,marginTop:0});
  38.             };
  39.         }
  40.     };
  41. </script>
  42. </head>
  43.  
  44. <body>
  45. <ul>
  46.     <li></li>
  47.     <li></li>
  48.     <li></li>
  49.     <li></li>
  50.     <li></li>
  51.     <li></li>
  52.     <li></li>
  53.     <li></li>
  54.     <li></li>
  55.     <li></li>
  56. </ul>
  57. </body>
  58. </html>

js 实现图片的放大和缩小的更多相关文章

  1. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  2. Android------实现图片双击放大，缩小，左右滑动的多种方式

    项目中常常有图片浏览功能.像微信朋友圈图片浏览,QQ空间照片浏览 的功能. 实现图片双击放大,缩小,左右滑动等效果. 来看看我的效果图,希望能满足你的要求   前三个button按钮是参考网上的多种实 ...

  3. 实例讲解如何利用jQuery设置图片居中放大或者缩小

    大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...

  4. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  5. C#和Halcon交互实现图片的放大和缩小

    [转载] C#和halcon实现图片的放大和缩小 e.Delta>0表示鼠标向上滚动,e.Delta<0表示向下滚动 要拖动的图像为Measure.currentImageL,可以更换. ...

  6. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  7. JS图片的放大与缩小

    <!doctype html><head><meta charset=utf-8" /><title>javascript控制图片缩小或者放大 ...

  8. 通过Java代码实现图片的放大和缩小

    本文介绍的例子在Android安卓手机上测试通过. 先看看效果吧.可以看到这个开发好的安卓应用有三个按钮:Zoom In缩小图片,Zoom Out放大图片和Save保存. 初始页面: 可以在左边边框自 ...

  9. JavaScript特效之图片特效放大，缩小，旋转

    效果图如下: 效果代码如下: <!doctype html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. GUI-猜字游戏

    # 设计思想先定义输入,输入,然后设计逻辑 # GUI from tkinter # 逻辑层 # 设计GUI(用户界面) from tkinter import * import tkinter.si ...

  2. 吴裕雄--天生自然python编程：turtle模块绘图（2）

    #彩色螺旋线 import turtle import time turtle.pensize(2) turtle.bgcolor("black") colors = [" ...

  3. 将java project打包成jar包，web project 打包成war包的几种演示

    将java项目打包成jar 第一种:MyEclipse将java项目打包成jar. 1,右击项目,选择export . 2,点击Java,选择JAR file . 3,在JAR file文本中浏览打包 ...

  4. android中SeekBar拖动进度条的使用及事件监听

    下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...

  5. Android--MediaPlayer(实现列表选歌，上一首，下一首，清空播放列表，搜索本地音乐文件)

    Android--MediaPlayer(实现列表选歌,上一首,下一首,清空播放列表,搜索本地音乐文件) 下载链接:http://download.csdn.net/detail/zlqqhs/507 ...

  6. angular知识点（2）

    angular知识点(2) 1.为了代码规范,对于需要自动加载的依赖,需要在前面加上注释,注释为://@ngInject 或者是/*@ngInject*/ 2.ngSwitch的应用 在需要用到选择出 ...

  7. 苹果会放弃iPhone吗？

    ​苹果会放弃iPhone吗?一般来讲,这是一个相当白痴的问题,苹果放弃iPhone的概率比唐僧放弃取经的概率要低20倍.前段时间回老家,正在学习英语的小侄子问我:"叔叔,苹果用英语怎么说呀? ...

  8. 浅谈了解JDBC

    目录 前言 作用 JDBC的架构 步骤 JDBC常见的关键字解释 前言 Java数据库连接,是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口,提供了诸如查询和更新数据库中数据的方法.J ...

  9. tomcat&servlet初记

    tomcat&servlet初记 1. web相关概念 2. web服务器软件的学习:tomcat 3. servlet入门学习 web相关概念 1,软件架构 1,cs架构:客户端/服务器端 ...

  10. ubuntu 18.04 添加快快捷方式

    1. 创建启动软件的快捷方式的文件 # cd ~/桌面 # vim pycharm18.1.desktop # 注意文件的后缀是 .desktop [Desktop Entry] Version=1. ...