`
ipython
  • 浏览: 293414 次
  • 性别: Icon_minigender_1
  • 来自: 佛山
社区版块
存档分类
最新评论

javascript div 跳动

    博客分类:
  • web
web 
阅读更多

当QQ 好友有消息时,头像是跳动,我想实现这个小功能。

以下是代码,要注意的是 div 的 position 要是 absolute 或 relative

 

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>跳动</title>
    <style type="text/css" media="screen">
        #id1,#id2,#id3 {width:200px; height:100px; background-color:#E5E5E5; margin:20px; position:relative;}
    </style>
    
</head>
<body>
    <div id="id1">
       hello, div 1 
    </div>
    <div id="id2">
       hello, div 2 
    </div>
    <div id="id3">
       hello, div 3 
    </div>

    <script type="text/javascript" charset="utf-8">
        var $ = function (name) { return document.getElementById(name) } ;
        function icon_jump (elem,color) {
            var i = 0;
            function jump (elem,i) {
                var offset = (i % 2 ==0 ) ? -1 : 1;
                elem.style.top = elem.clientTop + offset;
            }
            function flash(elem,i) {
                var color  = (i % 2 ==0 ) ? 'white': '#E5E5E5';
                elem.style.background = color;
            }
            setInterval (function () { 
                jump (elem, i); 
                if ( color==1 ) 
                    flash (elem,i); 
                i++;
            }, 300); 
        }

        icon_jump ($('id1'),0);
        icon_jump ($('id2'),1);
    </script>
</body>
</html>
 
分享到:
评论

相关推荐

    javascript经典特效---时间跳动器.rar

    因此,这个文件可能包含HTML元素(如一个div用于显示时间),CSS样式(如时间的字体、颜色、布局等),以及JavaScript代码来实现时间跳动器的功能。 综上所述,“时间跳动器”这个经典特效是JavaScript技术的一个...

    网页博客底部跳动的小鱼原代码

    在网页设计中,为了增加互动性和趣味性,有时会在...以上就是使用HTML和JavaScript在网页博客底部实现跳动小鱼的基本步骤。通过不断的优化和调整,你可以创造出更加生动有趣的动画效果,为用户提供更加愉快的浏览体验。

    javascript经典特效---小球上下跳动.rar

    在JavaScript的世界里,小球上下跳动的动画效果是一种常见的动态视觉表现,它涉及到JavaScript的基础语法、CSS样式控制以及HTML结构构建。这个压缩包文件"javascript经典特效---小球上下跳动.rar"包含了一个名为...

    javaScript编写的在页面上显示很多跳动的气泡

    在这个场景中,"javaScript编写的在页面上显示很多跳动的气泡"是利用JavaScript来创建一种视觉效果,让网页上的多个气泡元素以动画形式跳动,为用户带来生动有趣的体验。这些气泡可能有不同的分布方式,比如随机分布...

    表格数字随机跳动.zip

    以下是一个简单的例子,展示了如何用JavaScript让数字随机跳动: ```javascript let numberElement = document.getElementById('jumpingNumber'); let maxValue = 100; // 设置最大值 setInterval(() =&gt; { let ...

    动感商品列表跳动图片

    "动感商品列表跳动图片"就是一个典型的案例,它利用jQuery、JavaScript和HTML技术,实现了鼠标悬停时图片动态跳动的效果,同时保证了良好的浏览器兼容性。下面将详细阐述这个知识点。 首先,jQuery是一个基于...

    45.(leaflet篇)leaflet图标跳动.zip

    4. **创建Marker并添加动画**:创建一个Marker对象,然后使用JavaScript定时器改变其CSS样式来实现跳动效果: ```javascript var marker = L.marker([51.5, -0.09]).addTo(map); function bounce() { marker....

    DIV懒加载demo

    这通常通过JavaScript的getBoundingClientRect()方法实现,该方法返回元素的大小及其相对于视口的位置。 3. **加载逻辑**:当元素进入视口时,我们需要执行实际的加载操作,这可能包括请求数据、渲染内容、添加样式...

    弹出在网页中间跳动的窗口

    可以是一个`&lt;div&gt;`元素,通过设置其ID或类名方便后续的CSS和JavaScript操作。例如: ```html &lt;div id="popup" class="popup"&gt; 广告标题 这里是广告内容 &lt;/div&gt; ``` 二、CSS样式 接下来,我们使用CSS来控制窗口的...

    爱心源码 html-css 动态跳动的爱心和动态的在一起时间跳动

    为了实现“一起跳动”的效果,可以使用JavaScript的setInterval函数定期更新时间,并配合CSS动画,让数字在改变时带有动态效果,比如淡入淡出或者平滑过渡。 3. **飘落的雪花效果**:这也是CSS3动画的一种应用,...

    HTML粉色跳动爱心(追光者).zip

    在这个项目中,HTML文件可能包含一个或多个`&lt;div&gt;`元素,这些元素将被用作爱心的容器,通过CSS进行样式设置,并通过JavaScript赋予它们动态行为。 CSS,即层叠样式表,负责定义网页的外观和布局。在这个特效中,CSS...

    跳动爱心.docx

    本资源是一个使用HTML、CSS和JavaScript实现的跳动爱心动画效果。下面是对该资源中涉及到的知识点的详细解释: HTML结构 首先,HTML结构非常简单,只有一个 `&lt;canvas&gt;` 元素和一个容器 `&lt;div&gt;` 元素。canvas ...

    jQuery跳动遮罩背景 jQuery跳动遮罩背景网页特效.zip

    在实现这个特效时,可能需要用到如`&lt;div&gt;`元素来创建遮罩层,并通过`class`或`id`属性与JavaScript和CSS进行关联。 至于JavaScript,它是实现动态效果的主要手段。在这个特效中,jQuery的动画方法,如`.animate()`...

    纯CSS3模拟跳动的音乐音符效果.zip

    标题中的“纯CSS3模拟跳动的音乐音符效果”是指使用CSS3这门前端技术,不依赖JavaScript,实现一种动态的视觉效果,即音符随着音乐节奏上下跳动。这种效果常见于音乐播放器或者与音乐相关的网页设计中,为用户带来更...

    程序天下:JavaScript实例自学手册

    3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 ...

    圆满的520之跳动的爱心

    3. HTML结构:可能包含一个或多个表示爱心的HTML元素,如`&lt;div class="heart"&gt;...&lt;/div&gt;`,这些元素会被CSS和JavaScript所操作,呈现动态效果。 此外,为了使这个爱心更具互动性,开发者可能还利用了HTML5的事件...

    CSS3模拟音符跳动效果.zip

    总的来说,"CSS3模拟音符跳动效果.zip"是一个利用现代Web技术创造动态视觉体验的实例,它展示了CSS3的强大和灵活性,以及与JavaScript结合的可能性。这种效果可以应用于音乐播放器界面,增加互动性和娱乐性,提升...

    跳动文字特效

    在创建跳动文字特效时,我们需要一个`&lt;div&gt;`标签来包裹我们的文字,这样我们可以通过CSS和JavaScript对其进行操作。例如: ```html &lt;div id="bouncing-text"&gt;跳动的文字&lt;/div&gt; ``` 接下来是CSS,它是用来控制网页...

    纯CSS3弹性卡通怪物动画特效.zip

    开发者通过精心设计的CSS3关键帧动画,使卡通怪物能够以弹性的方式上下跳动,同时利用JavaScript增强了用户与动画的互动。这样的技术组合在网页设计和开发中非常常见,能为用户带来生动有趣的视觉享受。学习和理解...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 ...

Global site tag (gtag.js) - Google Analytics