javascript div 跳动 - python - ITeye博客

`

ipython

浏览: 294531 次
性别:
来自: 佛山

最近访客更多访客>>

yyn12345

304113037

sydtt

mengtjq

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

jacklin2015：挺好用的就是多音字有待改进比如重庆
python 汉字按拼音排序
Yunba云巴：我们（https://yunba.io/）是基于MQTT协议实 ...
mosquitto 基于MQTT消息推送
ycong2525：不行............................. ...
input file选择多个文件
huakaizizai623：对选择的文件个数是否有限制？
input file选择多个文件
xuliuliu： addEventListener方法找不到
input file选择多个文件

javascript div 跳动

博客分类：

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 向下滚动

2011-10-26 12:21
浏览 1706
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

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

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

表格数字随机跳动.zip: 以下是一个简单的例子，展示了如何用JavaScript让数字随机跳动： ```javascript let numberElement = document.getElementById('jumpingNumber'); let maxValue = 100; // 设置最大值 setInterval(() => { 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. **加载逻辑**：当元素进入视口时，我们需要执行实际的加载操作，这可能包括请求数据、渲染内容、添加样式...

弹出在网页中间跳动的窗口: 可以是一个`<div>`元素，通过设置其ID或类名方便后续的CSS和JavaScript操作。例如： ```html <div id="popup" class="popup"> 广告标题这里是广告内容 </div> ``` 二、CSS样式接下来，我们使用CSS来控制窗口的...

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

HTML粉色跳动爱心（追光者）.zip: 在这个项目中，HTML文件可能包含一个或多个`<div>`元素，这些元素将被用作爱心的容器，通过CSS进行样式设置，并通过JavaScript赋予它们动态行为。 CSS，即层叠样式表，负责定义网页的外观和布局。在这个特效中，CSS...

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

jQuery跳动遮罩背景 jQuery跳动遮罩背景网页特效.zip: 在实现这个特效时，可能需要用到如`<div>`元素来创建遮罩层，并通过`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元素，如`<div class="heart">...</div>`，这些元素会被CSS和JavaScript所操作，呈现动态效果。此外，为了使这个爱心更具互动性，开发者可能还利用了HTML5的事件...

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

跳动文字特效: 在创建跳动文字特效时，我们需要一个`<div>`标签来包裹我们的文字，这样我们可以通过CSS和JavaScript对其进行操作。例如： ```html <div id="bouncing-text">跳动的文字</div> ``` 接下来是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