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(...
转自《JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)》：http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下 本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下：这是一款漂亮的JS窗口拖拽...
1.显示当前时间<body onload="showtime()"><div>当前时间：
<span id="clock"></span ></div><script type="application/javascript">function showtime()//创建函数{var nowTime =new Date();//创建时间对象实例var hours = nowTime.getHours();//获取当前小时数var minutes = nowTime.getMinutes();//获取当前分钟数var seconds = nowTime.getSeconds();//获取当前秒数var timer =""+((hours>12)?hours-12:hours);//将小时数质赋...
JS瀑布流效果-布局<!DOCTYPE html><html><head><meta charset="utf-8"/><title>JS瀑布流效果-布局</title><style>* {margin: 0px;padding: 0px;}#container {position: relative;}.box {padding: 5px;float: left;}.box_img {padding: 5px;border: 1px solid #cccccc;box-shadow: 0 0 5px #ccc;border-radius: 5px;}.box_img img {width: 150px;height: auto;}</style></head><body><div id="container"><div class="box"><div cla...
项目应用-布局钟表支架和页面图片在前面实现两种时钟的效果，将前面用到的知识整合于一小项目中用到的素材： 由于这张截取的素材太大，我就不放在该位置了项目页面初始布局效果： 初始布局代码： 1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style>7 *{8 margin:0px ;9 padding: 0px;
10 }
11 ...
需求是传过来一个图片，根据外层div的大小自动进行缩放效果。function ShowSecondImg(v) {var rate, newX, newY,newW, newH = 0; //表示图片相对窗口的缩放比例var imgW, imgH;var centerW = $(window).width() - $("#alarmQueue").width() - $("#presInfo").width() - 40;var centerH = $(window).height() - $("#detailedInfor").height()-148;$("#imgBoxs").find("#second").remove();var img = $(‘<img/>‘, { src: v.First...
说到JavaScript实现动画效果，不得不想到两个函数，setTimeout和setInterval。 setTimeout的常用的使用方法为 setTimeout(callback, delay)，setInterval常用的使用方法为setInterval(callback, delay) 两者的区别setTimeout(function repeat(){/* Some Long block of code... */setTimeout(repeat, 10)
}, 10)
setInterval(function(){/* Some Long block of code... */
}, 10)这两个函数看起来功能似乎是相同的，但实际上...
PS:显示效果图，大家可以根据自己的需求调整图片的样式哦