<!DOCTYPE html>

<html>

<head>

<style>

.anim{

    width: 100px;

    height: 100px;

    background-color: red;

}

.anim-show

{

    transition: 0.7s;

    transform:translate(100px,100px) scale(1.5);

}

.anim-show1

{

    transition: 0.7s;

    transform:translate(100px,100px) scale(1);

}

</style>

</head>

<body>

    <div id="a" class="anim anim-show1"></div>

    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>

    <script>

        var i = 0;

        var int=self.setInterval("clock()",700);

        function clock(){

            i++;

            if(parseInt(i/2) == i/2){

                $("#a").addClass("anim-show");

                $("#a").removeClass("anim-show1");

            }else{

                $("#a").removeClass("anim-show");

                $("#a").addClass("anim-show1");

            }

        }

    </script>

</body>

</html>

div定时放大缩小的更多相关文章

  1. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery实现点击图标div循环放大缩小功能

    很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者 ...

  4. ThreeJs 导入外部三维模型，并实现鼠标滚动放大缩小旋转效果

    let i = ; function init() { // create a scene, that will hold all our elements such as objects, came ...

  5. HTML5 canvas处理图片的各种效果，包括放大缩小涂鸦等

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...

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

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

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

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

  8. [jQuery]地图浏览：如何实现图片的放大缩小和点击之后的位置居中

    HTML代码: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis. ...

  9. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

随机推荐

  1. 【应用服务 App Service】App Service 中部署Java应用中文乱码现象

    问题情形 有时候部署在 Azure  App Service的 Java应用会出现乱码 详细日志 无 问题原因 因为 App Service默认的编码为gbk,所以在显示页面或传递中文字符时就会出现乱 ...

  2. influxdb集群部署

    环境准备 influxdb enterprise运行条件最低需要三个meta nodes节点以及两个data nodes Meta nodes之间使用TCP和Raft一致性协议通信,默认端口为8089 ...

  3. 联赛模拟测试22 B. 分组配对 倍增+二分

    题目描述 分析 首先,容易发现一个小组内的最优配对方式(能得到最大综合实力的方式) 一定是实力值最大的男生和最大的女生配对,次大的和次大的配对,以此类推. 但是每次新插入一个值时,需要用 \(nlog ...

  4. Linux下更新JDK版本

    date: 2018-11-18 11:04:13 updated: 2018-11-18 11:04:13 1.输入 su 进入管理员权限 2.输入 rpm -qa | grep jdk 查看当前系 ...

  5. matplotlib中plt用法实例

    import torch from models.models import Model import cv2 from PIL import Image import numpy as np fro ...

  6. Pytorch加载并可视化FashionMNIST指定层(Udacity)

    加载并可视化FashionMNIST 在这个notebook中,我们要加载并查看 Fashion-MNIST 数据库中的图像. 任何分类问题的第一步,都是查看你正在使用的数据集.这样你可以了解有关图像 ...

  7. 从原生web组件到框架组件源码(一)

    温馨提醒,当你觉得看我写的很乱的时候,就对了,那是因为我查阅了大量的资料提取出来的,因为有点东西不太理解,所以你会感觉有的部分重复了,也不是重复,只是后面对前面的内容进行梳理了一些,需要耐心的看到最后 ...

  8. SpringBoot原理发现（一）

    说明: 本系列基于SpringBoot 2.2.9.RELEASE 版本,对SpringBoot的原理进行分析,一共分为四节: SpringBoot原理发现(一):创建Hello World,对pom ...

  9. 云服务器部署scrapyd爬虫

    Scrapyd部署爬虫项目 GitHub:https://github.com/scrapy/scrapyd API 文档:http://scrapyd.readthedocs.io/en/stabl ...

  10. Flask简介与启动服务器

    Flask 一.简介 官方文档:http://flask.pocoo.org/ http://www.pythondoc.com/flask/index.html(中文) 1.概述 flask是一个非 ...