运动框架:先要清除定时器,防止多次点击或者移入移出时,开启多个定时器,元素的运动会是所有定时器中运动的总和当达到目的时,要清除定时器(使用if/else 实现)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>New Web Project</tit...
加载中,请等待div: <div id="load" class="center-in-center" style="display:none;"> <img src="../resources/images/loader.gif" />加载中,请等待... </div>确定重置按钮:<div class="form-group row"><div class="conf" style="float: left" onclick="conf()" id="conf">确定</div><div class="reset" style="float: left" onclick="reset()" id="reset">重置</div></div>加载中,请等待效果图的CSS样式,设置其至页面中央:...
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test</title><script src="jquery.1.11.0.min.js"></script><script type="text/javascript">$(function () {settime_show();$(‘#btn‘).click(function () {});});function settime_show() {setTimeout(show, 2000);}function show() {$(‘.bg‘).show();$(‘.show‘).fadeIn(‘slow‘)//$(‘.show‘).show(‘slow‘); setTimeout(hide, 4000);//$(‘.show...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Untitled 1</title><style type="text/css"> .style1 { font-size: x-small;}</style><script type="text/javascript">/**画点 */function makedot(x, y){ pointDi...
鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小。关键代码:咸宁市中心小学view source print?1varspeed = 0;2if(target>obj.alpha){3 speed = 5;4}else{5 speed = -5;6}根据目标值和当时值的对比,来决定是正向还是负向速度。view source print?01for(i=0; i < runs_li.length; i++){02 runs_li[i].timer = null;03 runs_li[i].alpha = 30;04 runs_li[i].onmouseover = function(){05 startrun(this,...
注意:图片的路径和图片的名字要改成1.jpg/2.jpg/3.jpg等格式,根据数组下标进行查询,亲测有效<html> <head> <meta charset="utf-8"> <style type="text/css"> body,div,ul,li,img{ margin: 0px; padding: 0px; } #menu{ width: 496px; margin: auto; } #head{ border: 1px solid blue; } #head img{ width: 100%; height: 300px; } #footer li{ list-style-type: none; float: l...
// 返回顶部function goTop(){// 无动画效果document.body.scrollTop = 0;document.documentElement.scrollTop = 0;// 简单动画效果$("html,body").animate({scrollTop:0},500);// 由快到慢的效果scrollToptimer = setInterval(function () {console.log("定时循环回到顶部")var top = document.body.scrollTop || document.documentElement.scrollTop;var speed = top / 4;if (document.body.scrollTop!=0) {document.body.scroll...
百叶窗大家都见过吧!如图:原理:如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden;黑块为li子元素,高度为li的2倍,设置absolute属性,我们正是要改变它的top值从而获得变化!(右上角多余块与本图无关)布局分析:注意top值得变化!默认top=0时候,显示的“一楼上铺”,当top=-40px时候,li的子元素 上移40px,这时候显示的内容就为“一楼下铺”注意p元素的包裹层div ...
项目开发中若需要做系统公告,可在此Demo的基础上稍加修改实现一个简单的系统公告效果<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文字跑马灯</title><style>#race_notice_p{position:relative;margin:20px auto;width:800px;overflow:hidden;height:50px;}#race_notice_s{position:absolute;left:0;top:0;}#race_notice_s p span{margin:0 20px;line-height: 50px;}</style> </head> <body><div id=‘r...
1. 仿站效果今天看到学步园网站右边有个文章推荐的滚动栏目,觉得挺有意思,效果如下:2. 原理猜想如此小动画的效果,首先想到的可能是一个长数据列表,不断变化列表的长度,利用外部边框的遮罩裁剪效果,从而做出就像是文章标题在滚动的效果。原理如下: 图中,黑色边框代表显示区域,灰色边框代表 ul>li 列表项目 ,Time1~Time3 分别代表不同时刻的列表项运行高度。 双倍内容的列表项目整体上移动,利用显示区域的遮罩效果,达到...
效果图: 刚开始: 点击按钮“选择更多后”,可以添加很多选择文件:点击按钮“删除”后:实现代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选择文件</title> <style type="text/css"> *{ margin:0px; padding:0px; } div{ margin:10px; } </style> <script> //当点击添加更多时,增加一个DIV //先增加两个input function addFile(){ var fragment=document.creat...
Javascript动画效果(四)前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果。我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢?首先我们我们完成该效果的html和css代码,代码如下:html部分代码: <div id="move"><a href="#"><i><img src="images/1.jpg"/></i><p>彩票</p></a><a href="#"><i><img src="images/2.jpg...
1<head> 2<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3<title>无标题文档</title> 4<style type="text/css"> 5*{margin:0px auto; padding:0px;} 6#tou{width:100%; height:200px; background-color:#06C;} 7#menu{width:100%; height:80px; background-color:#666;} 8#neirong{width:100%; height:2000px;} 9</style>10</head>1112<body>13<div id="tou"></div>14<div id="menu"></div>15<div id="ne...
之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试</title></head><body><div class="main"><div class="scroll"><div class="info"><ul id="scro"><li><a href=""><span>1</span><span></span><span></span><span></span></a></li></ul></div></div><...
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName("li"); var oBox=oDiv.getElementsByTagName("div"); for(var i=0;i<oBtn.length;i++){ (function(index){ oBtn[i].addEventListener(event,function(){ for...