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...
一提到文字上下滚动,我们就会想到用不同的程序去实现,而且页面中有文字滚动会增加这个网页的互动和可信度。1.Js最简单的方法是控制盒子的高度,使不断的重复添加<html><body><head>
/**scroll css**/
#scrolldiv{height: 400px;overflow: hidden;}
</head><div id="scrolldiv" class="scroll"><ul id="scroll1"><li>用户130****0834 刚刚 砸中<span class="yellow">500元京东卡</span> 正在兑换中</li><li>用户176****2746 ...
上文已经讲input[type=radio]的做法发布,在我做input[input=checkbox]时候,觉得会和radio做法差不多,结果是有相似之后,但也有很大不同。不同点有1)checkbox自带冒泡和捕获事件,结果就是点击一下包裹checkbox的label会发生两次事件,也就是checkbox选中了,然后又不选中了,所以在对label绑定事件时候,需要停止冒泡2)选中chekbox需要使用chekbox自带的checked属性,设置该属性的选中和被选中状态,这个与radio一致代码如下 ...
原文链接:http://www.jb51.net/article/79083.htm<html><head><meta charset="gb2312"><title>隐藏和显示</title><style type="text/css">
#thediv
{width:200px;height:100px;line-height:100px;text-align:center;background-color:green;}</style><script type="text/javascript">function Show_Hidden(obj)
{if(obj.style.display=="block"){obj.style.display=‘none‘;}else{obj.style.display=‘block‘;}
}
window.onload...
javaScript实现微博发布面板效果.采用的js知识有:正则表达式区分中英文字节、随机数生成等函数淡入淡出、缓冲运动。闪动等动画函数onfocus、onblur、oninput、onpropertychange等事件动态添加元素,获取设置动态属性基本思路:当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,...
JavaScript 30天每日效果图在Github上看到了wesbos的一个Javascript30天挑战的repo,旨在使用纯JS来进行练习,不允许使用任何其他的库和框架,该挑战共30天,我会在这里复现这30天遇到的挑战与问题,将其教程化、视频化分享给大家。day01-day03第01天第02天第03天650) this.width=650;" src="http://oslwafb71.bkt.clouddn.com/small0.jpg" />650) this.width=650;" src="http://oslwafb71.bkt.clouddn.com/small1.jpg" />650) t...
虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊!( 原创文章,转摘请注明:苏服:http://www.cnblogs.com/susufufu/p/5768402.html )今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-))动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到‘首页导航’,显示下面的分组菜单,分组菜单有子菜单,点击可缩...
前言:????????本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小生感激不尽。????????本篇文章为您分析一下原生JS的混合与克隆对象混合页面中如下需求var obj1 = {x: 1,y: "a"
}var obj2 = {x: "b",o: 6
}<div style="background-color: rgba(0,255,255,0.5)";>页面上有两个对象我们要把这两个对象混合成一个形成如下结构:
功能描述:自动无缝轮播图片,底部小圆点跟图片保持一致;手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹具体功能实现:1.定时器 自动轮播图片先声明一个index=0用来存图片索引;添加一个定时器,每隔两秒调用一次,每调用一次定时器(图片播放一次)index就加一;通过transform(变形)属性和transition(过渡)属性实现图片的轮播。1var index = 0;
2var timer = setInterval(function() {
3 ...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style> *{ margin:0; padding:0; } #box{ width:100px; height:100px; background: red; position: absolute; left:0; top:0; cursor: move; }</style><body> <div id="box"></div></body></html><script> var oBox=document.getElementById(‘box‘); oBox.onmousedown=function(e){ ...
感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈。要好好的纪念下这个东西,以后忘了再来这边看看!超赞,当自己做出这个效果的时候,很有成就感的(ノω<。)ノ))☆.。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 192px; height: 120px; border: 1px solid gray; margin: 0 auto; ov...
一、点击图片显示大图代码<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>D33_1_SwitchIcon</title><style>#box{border:1px solid #cccccc;width:360px;height:70px;padding-top:360px;margin:100px auto;background:url("img/img_05.png") no-repeat;}ul{display:flex;justify-content:center;align-items: center;cursor:pointer;list-style: none;}img{width: 250px;}</style>
</head>
<body><div id="b...
<!DOCTYPE html><html><head><meta charset="utf8"><title>js拖拽效果</title><style type="text/css">#div1 {width : 200px;height: 200px;position: absolute;background: #99dd33;cursor: move;}</style></head><body><div id="div1"></div></body><script type="text/javascript">window.onload =function() {var disX = disY =0; // 鼠标距离div的左距离和上距离var div1 = document.getElementById(...