javascript 广告移动特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
.box2{width: 200px; height: 200px; background:red; border-radius:50%; position: relative;}
</style>
</head>
<body>
<button type="" id="start">开始</button>
<button type="" id=stop>停止</button>
<div id="box" class="box2"> </div>
<script type="text/javascript">
//声明页面的宽高和投票、left
var lr=800;
var tb=300;
var i=0;
var j=0;
//获取id
var box=document.getElementById("box");
var start=document.getElementById("start");
var stop=document.getElementById("stop");
//点击开始按钮消失,停止按钮显示
start.onclick=function(){
start.style.display='none';
stop.style.display='inline';
//setInterval循环函数
var time=setInterval(function(){
//赋值left、top
box.style.left=i+'px';
box.style.top=j+'px';
//当left大于宽度时 left--
if(i>lr){
lr=0;
i--;
}
//当left小于等于宽度时 left++
if(i<=lr){
lr=800;
i++;
}
//当top大于宽度时 top--
if(j>tb){
tb=0;
j--;
}
//当left小于等于宽度时 left++
if(j<=tb){
tb=300;
j++;
}
//停止按钮函数
stop.onclick=function(){
//clearInterval停止setInterval循环
clearInterval(time);
//修改按钮显示隐藏
stop.style.display='none';
start.style.display='inline';
}
},5);//1000毫秒=1秒 内容运动一次时间
}
</script>
</body>
</html>
javascript 广告移动特效的更多相关文章
- JavaScript实战-菜单特效
以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...
- javascript学习-原生javascript的小特效(原生javascript实现链式运动)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效(多个运动效果整理)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 《JavaScript网页经典特效300例》
<JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇
- Javascript 广告浮动效果在浏览器中间N秒后移动到右下角
Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript
- javascript图片展示墙特效
查看效果:http://hovertree.com/code/javascript/pwl4bhoi.htm 代码如下: <!DOCTYPE html> <html> < ...
- javascript学习-原生javascript的小特效(多物体运动效果)
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul> <li> ...
- javascript学习-原生javascript的小特效(改变透明度效果)
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时 ...
- javascript学习-原生javascript的小特效(简单的运动效果)
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...
随机推荐
- The underlying provider failed on Open. EF
本地测试是可以的:但是放到服务器上就不行了: 报错:"The underlying provider failed on Open." 这一情况和我以前遇上的一次错误有点相似啊:都 ...
- Git之路——Git的使用
centos6.6安装git2.4 第一安装编译环境: yum -y install zlib-devel openssl-devel perl cpio expat-devel gettext-de ...
- Java I/O编程思路
我们在开发过程中不可避免遇到字符编码问题.遇到乱码问题的时候一定要保持清晰,网上很多关于字符编码集,这里我也就不介绍各种编码,这里我介绍自己编程中遇到字符编码问题时的思路. 乱码问题 无非就是 字节 ...
- How to solve “sudo: /etc/sudoers.d is world writable”
Run pkexec chmod 0440 /etc/sudoers
- android手机游戏开发Cocos2d-x开发分享
我想现在应该没有人没有玩过手机游戏了吧,当然所有人都玩过,但不是所有人都知道怎么去开发手机游戏,因为许多人都感觉做开发是一件很困难的事儿,身边的朋友也对此感觉难度很大.但是,现在我可以告诉你,手机游戏 ...
- Java---练习(面试题) :字符串截取(2-最终版)
在java中,字符串"abcd"与字符串"ab你好"的长度是一样,都是四个字符. 但对应的字节数不同,一个汉字占两个字节. 定义一个方法,按照指定的字节数来取子 ...
- 创建一个Android工程
Creating an Android Project 原文演示了怎么通过Android Studio和命令行两种方式来创建一个Android工程. 原文链接:http://developer.and ...
- Flume源码-LoggerSink
package org.apache.flume.sink; import com.google.common.base.Strings; import org.apache.flume.Channe ...
- MD5方法代码(生成小写的md5) C#版本
public string GetMD5Str(string input) { // Use input string to calculate MD5 hash MD5 md5 = System.S ...
- Linux动态库的编译与使用
转载: http://hi.baidu.com/linuxlife/blog/item/0d3e302ae2384d3a5343c1b1.html Linux下的动态库以.so为后缀,我也是初次在Li ...