小案例之手风琴和多图片中心点放大

手风琴:

html:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{list-style-type: none;margin: 0;padding: 0;}        #box{position: relative;margin: 50px auto;border: 1px solid black;        width:700px;height: 300px;overflow: hidden;        }        #box li{width:500px;height: 300px;position: absolute;}    </style>    <script src="move.js"></script>    <script>        window.onload=function(){            var oBox=document.getElementById(‘box‘);            var aLi=oBox.children;            var w=50;            for(var i=1;i<aLi.length;i++){                aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+‘px‘;            }            for(var i=0;i<aLi.length;i++){                aLi[i].index=i;                aLi[i].onmouseover=function(){                    for(var i=0;i<aLi.length;i++){                        if(i<=this.index){                            move(aLi[i],{left:w*i});                            //aLi[i].style.left=w*i+‘px‘;                        }else{                            //aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+‘px‘;                            move(aLi[i],{left:oBox.offsetWidth-w*(aLi.length-i)}) ;                        }                    }                };            }        }    </script></head><body><ul id="box">    <li><img src="img/1.png"></li>    <li><img src="img/2.png"></li>    <li><img src="img/3.png"></li>    <li><img src="img/4.png"></li>    <li><img src="img/5.png"></li></ul></body></html>引进的move.js为:
/** * Created by 潘泽慧 on 2016/11/7. */function getStyle(obj, name) {    if (obj.currentStyle) {        return obj.currentStyle[name];    } else {        return getComputedStyle(obj, false)[name];    }}

function move(obj, json, options) {    clearInterval(obj.timer);    options = options || {};    options.time = options.time || 500;    options.easeing = options.easeing || ‘ease-out‘;    var dis = {};    var start = {};    for (var name in json) {        start[name] = parseFloat(getStyle(obj, name));        dis[name] = json[name] - start[name];    }    var count = Math.floor(options.time / 30);    var n = 0;    obj.timer = setInterval(function () {        n++;        for (var name in json) {            switch (options.easeing) {                case ‘linear‘:                    var a = n / count;                    var cur = start[name] + dis[name] * a;                    break;                case ‘ease-in‘:                    var a = n / count;                    var cur = start[name] + dis[name] * a * a * a;                    break;                case ‘ease-out‘:                    var a = 1 - n / count;                    var cur = start[name] + dis[name] * (1 - a * a * a);            }            if (name == ‘opacity‘) {                obj.style.opacity = cur;                obj.style.filter = ‘alpha(opacity:‘ + cur * 100 + ‘)‘;            } else {                obj.style[name] = cur + ‘px‘;            }        }        if (n == count) {            clearInterval(obj.timer);            options.fn && options.fn();        }    }, 30);}
多图片中心点放大:html:
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{list-style-type: none;margin: 0;padding: 0;}        #box ul li{width:100px;height:100px;float: left;margin:10px;background: #ececec;}        #box{width:366px;height: 366px;margin: 100px auto;border: 1px solid black;}    </style>    <script src="move.js"></script>    <script>        window.onload=function(){            var oBox=document.getElementById(‘box‘);            var aLi=document.getElementsByTagName(‘li‘);            var arr=[];            for(var i=0;i<aLi.length;i++){                arr[i]={                    left:aLi[i].offsetLeft,                    top:aLi[i].offsetTop                }            }            for(var i=0;i<aLi.length;i++){                aLi[i].style.position=‘absolute‘;                aLi[i].style.left=arr[i].left+‘px‘;                aLi[i].style.top=arr[i].top+‘px‘;                aLi[i].style.margin="0px";            }            for(var i=0;i<aLi.length;i++){                aLi[i].onmouseover=function(){//                    this.style.width=‘200px‘;//                    this.style.marginLeft=‘-50px‘;//                    this.style.marginTop=‘-50px‘;//                    this.style.height=‘200px‘;                    move(this,{width:200,marginLeft:-50,marginTop:-50,height:200},{time:2000,easeing:‘ease-in‘});                    this.style.index=999;                };                aLi[i].onmouseout=function(){                    move(this,{width:100,margin:0,height:100});                    this.style.index=0;                }            }        }    </script></head><body>    <div id="box">        <ul id="ul">            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div></body></html>
 
时间: 11-14

小案例之手风琴和多图片中心点放大的相关文章

爬虫小案例 爬取(妹子图片)

import requests #请求库 from bs4 import BeautifulSoup #网页解析库 def get_girl(url): #伪造请求头信息 header = { #用户代理 'User-Agent':"Mozilla/5.0(Windows NT 6.1;WOW64) AppleWebKit/537.1(KHTML,like Gecko) Chrome/22.0.1207.1 Safari/537.1", #上个页面的url 'referer‘:'htt

网易新闻小案例

抓取网易新闻的接口,用代理服务器解决跨域,在前端页面上展示. 需要的文件有: index.html,app.js, headLine.html,headlineController.js, detail.html,detailController.js, 引入js文件:angular.js和angular-route.js, 服务器:nodePost.js. index.html内容,主界面显示,引入需要的文件 <!DOCTYPE html> <html ng-app="myA

css小案例:导航栏特效

css小案例:导航栏特效,实现如下图所示效果: 首先可以将html代码写出: 1 <nav class="cl-effect-1"> 2 <a href="#">Umbrella</a> 3 <a href="#">Ineffable</a> 4 <a href="#">Lilt</a> 5 <a href="#"&g

机械表小案例之transform的应用

这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取当前时间,通过date.getSeconds(),date.getMinutes(),date.getHours()获得秒,分,时,之所以按这个顺序,是因为下面的变量会有对上面的计算,如果按时,分,秒的顺序,则会报错. 其次,另外一个点,为保证平稳的从一个时间段调到另一个时间段,在设置时间时,如小时

【JavaScript】for循环-小案例:选项卡、伸缩导航

这两天学习js的for循环,做了一些小案例,总结来说: 用设置class来改变元素的样式以及是否显示; 用for循环给多个元素添加注册事件; 注意自定义属性的使用:O[i].index = i; 以及用变量num来记录当前状态或者序号. 案例1:选项卡 效果: 代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="Key

javascript常用小案例

常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往下变大,在input框中加入这两个属性,然后就可以控制文本输入框的大小尺寸随着内容而变 onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.sc

小案例带你揭秘JS事件

小案例带你揭秘JS事件 ### 什么是事件? 在js中一个事件的组成由那些呢? 谁触发事件:事件源 触发什么事件: 事件的类型 触发事件干什么事:事件处理函数 事件传播的过程 捕获阶段 就是从window事件处理函数开始,依次向内,只要事件目标的事件处理函数都会执行 执行顺序是从上到下的函数执行顺序 目标阶段 你触发在哪个元素上那么这个事件的目标源就是谁 冒泡阶段 从事件目标的时间处理函数开始,依次向外,知道window的事件处理函数触发 执行顺序是从内到外的 事件委托 就是我们把要做的事情委托

Windows Server之浅谈SMB以及SMB小案例分享

SMB由来 服务器消息区块(英语:Server Message Block,缩写为SMB,服务器消息区块),又称网络文件共享系统(英语:Common Internet File System,缩写为CIFS),一种应用层网络传输协议,由微软开发,主要功能是使网络上的机器能够计算机文件.打印机.串行端口和通讯等资源.它也提供经认证的进程间通信机能.它主要用在装有Microsoft Windows的机器上,在这样的机器上被称为Microsoft Windows Network. SMB版本 OS W

Thinkphp 生成订单号小案例

Thinkphp 生成订单号小案例小伙伴们在日常的商城项目开发中,都会遇到订单号生成的问题,今天呢思梦PHP就带领大家去解读一下生成订单号的问题!首先,订单号我们要明确它有有3个性质:1.唯一性 2.不可推测性 3.效率性,唯一性和不可推测性不用说了,效率性是指不能频繁的去数据库查询以避免重复.况且满足这些条件的同时订单号还要足够的短.不知道小伙伴们在日常的项目中是否也和我一样去思考过生成订单的一些小问题,可能你也会说,这些东西不用想的那么复杂,其实呢,小编也是同意大家的看法,但是殊不知我们做程