一提到文字上下滚动,我们就会想到用不同的程序去实现,而且页面中有文字滚动会增加这个网页的互动和可信度。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(...
转自《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...