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)这两个函数看起来功能似乎是相同的,但实际上...