基于javascript实现窗口抖动效果_javascript技巧

本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下

效果图:

鼠标点击,窗口实现抖动。

具体代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<title>窗口登陆效果</title>
<style type="text/css">
#win
{
 position:relative;
 width:100px;
 height:100px;
 background-color:#666;
}
</style>
<script type="text/javascript">
var a=['top','left'];
var b=0;
var u;
function fudu()
{
 win.style[a[b%2]]=(b++)%4<2?"0px":"4px";
 if(b>15)
 {
  clearInterval(u);
  b=0
 }
}
function zd()
{
 clearInterval(u);
 u=setInterval(fudu,32)
}
window.onload=function()
{
 var bt=document.getElementById("bt");
 var win=document.getElementById("win");
 bt.onclick=zd;
}
</script>
</head>
<body >
<button id="bt">点击振动</button>
<div id="win"></div>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助,帮助大家实现窗口抖动效果。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
窗口抖动
qq窗口抖动、窗口抖动、qq抖动窗口无限弹、css3实现抖动效果、qq窗口抖动不自动弹出,以便于您获取更多的相关知识。

时间: 2016-01-03

基于javascript实现窗口抖动效果_javascript技巧的相关文章

JavaScript实现窗口抖动效果_javascript技巧

原理介绍 抖动其实是往复运动的一种特殊形式,只不过往复运动是一种无摩擦力的无限运动,且以速度为参照依据:而抖动以位置作为参照依据,最终停在起始点 在网页中最常见的一种抖动效果应该是窗口抖动提示了 抖动元素从起始点开始,先向右移动最大距离len,然后移动到对称的左边位置:然后再向右移动稍微小一点的距离,再移动到对称的左边位置:以此循环,最终元素停止在起始点 代码实现 抖动在代码实现上,无非就是通过定时器,每隔一段时间让left或top值进行变化 在运动实现中,有两种距离变化的思路 思路一 div.

基于javascript实现图片滑动效果_javascript技巧

今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进. ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap--panel使用了绝对定位,就将translate平移改为了left.改动后,各个浏览器运行的效果不错. 具体代码如下 html代码(没写注释) <div class="container">

基于JavaScript实现TAB标签效果_javascript技巧

 js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下 废话不多说了,直接给大家贴代码了: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content=

基于javascript实现图片切换效果_javascript技巧

本文实例为大家分享了js实现图片切换效果,供大家参考,具体内容如下 用js实现点击按钮,图片切换的效果: <div class="box" id="box"> <div class="img_box" id="img_box"> <img src="../raw/b1.jpg" class="image" > <img src="../

原生js实现类似弹窗抖动效果_javascript技巧

先在之前做的抖动窗口上做了点动作 无限变色 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{text-align: center;line-height: 150px;font-weight: bold;} #dv{width: 300

基于JavaScript实现随机颜色输入框_javascript技巧

废话不多说了额,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width:500px;height:400px;} table td{width:100px;height:50px;} </style> <script> window.onl

js模拟QQ窗口的抖动效果_javascript技巧

基于Javascript实现返回顶部按钮_javascript技巧

一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部. 那现在我们就来实现这么一个功能. 这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top. <a href="#" class="top"&

基于JavaScript实现瀑布流布局(二)_javascript技巧

本文实例讲解了JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 1.建立Html模版 想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head