JavaScript
Annaluo
加油呀~ 前端er 冲~
展开
-
用JS简单实现一个折叠手风琴效果
效果如图所示,此时鼠标所在的位置背景色是黑色,第三个标签没有展开。全部代码如下所示:(直接复制运行)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt..原创 2022-02-19 19:29:43 · 1279 阅读 · 0 评论 -
用CSS3写的一个简单分页样式(兼容ie9及以上)
html> charset="utf-8"> 分页样式 rel="stylesheet" href="css/score_board.css"> /*2017/11/21分页样式*/ ul.pagination { display: inline-block;原创 2017-11-22 16:27:08 · 887 阅读 · 0 评论 -
IE8兼容canvas和一些CSS3属性
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> lang="en"> charset="UTF-8"> IE8支持HTML5+CSS3 type="text/css"> body { /*原创 2017-11-20 17:12:43 · 748 阅读 · 0 评论 -
html5中的canvas属性一些简单例子
html>lang="en"> charset="UTF-8"> canvasid="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 canvas 标签。 /*//画一个矩形 var c=document.getElem原创 2017-11-07 16:34:39 · 614 阅读 · 0 评论 -
如何让body背景图自适应浏览器窗口大小
这两天真的被背景图问题弄的头大,一会是浏览器窗口大小改变,背景图就重复,或者是浏览器有滚动条,或者加上no-repeat之后,重复的部分就变成空白!!!真的是一个头,两个大!!!!!现在终于找到解决方法了,不仅不重复,还没有滚动条,简直整个人都解放了,哈哈哈!下面附上代码,其实是特别简单的问题,但某些时候,我们就是会被一些很小的问题困扰很久......html{原创 2017-10-19 09:19:31 · 34020 阅读 · 14 评论 -
纯CSS仿京东导航
实现效果如下:(ps:右边图片是随便放的=_=)具体代码如下: 分类导航一级菜单制作(CSS版) body{ padding:0; font-size: 10px; } .topmenu{ display: bloc原创 2017-09-12 18:27:22 · 1247 阅读 · 0 评论 -
JS-商场限时抢倒计时效果
效果描述:结束时间设置为2017/12/512:20:12具体代码如下: 限时抢 window.onload = function () { showTime(); } function showTime() { var curtime = new原创 2017-09-12 16:32:38 · 621 阅读 · 0 评论 -
JS-实现类似于高考倒计时的倒计时时差
效果描述:设置的结束时间为2017/12/5,其中用了Math.ceil函数把得到的结果向上取整。具体代码如下: 倒计时 window.onload = function () { var curtime = new Date();//获取当前时间 var endtime = n原创 2017-09-12 16:22:23 · 2924 阅读 · 0 评论 -
JS-纯JavaScript代码显示系统当前时间
浏览器效果如下:具体代码如下: 当前系统时间 window.onload = function () { showTime(); } function checkTime(i) { if(i<10){ i = "0"原创 2017-09-12 16:14:26 · 1223 阅读 · 0 评论 -
JS-表格隔行变色效果
效果描述:使特定的表格隔行变色。代码如下: 表格隔行变色 第一行第一行 第二行第二行 第三行第三行 第四行第四行 第五行第五行 第六行第六行 var item = document.getElementById("tb"); //获取I原创 2017-09-15 09:19:29 · 2076 阅读 · 0 评论 -
JS-多物体运动2(不同物体做不同的运动)
效果描述:当鼠标放在第一个Li上时,高度由200Px变成400PX,当鼠标移开高度恢复成之前的;当鼠标放在第二个LI上时,宽度由100PX变成400PX,当鼠标移开宽度恢复成之前的。代码如下: JS多物体动画 body{ margin: 0; padding: 0;原创 2017-08-29 17:29:48 · 425 阅读 · 0 评论 -
JS-多物体运动(所有物体做相同的运动)
效果描述:当鼠标放上去li的高度由200PX变成400PX,(所有的li变化相同,都是高度的变化)代码如下: JS多物体动画2 body{ margin: 0; padding: 0; } ul,li{ list-s原创 2017-08-29 17:25:38 · 422 阅读 · 0 评论 -
JS-仿京东导航(JS版)
效果描述:相比前面的CSS版本,此版本做了很多优化和其他效果,比如文字悬浮和图片悬浮具体代码如下: 分类导航一级菜单制作(JS版) body{ padding:0; font-size: 10px; } .topmenu{原创 2017-09-13 11:31:19 · 2355 阅读 · 0 评论 -
JS获取HTML样式
有些时候我们需要给页面添加动态效果,那么久需要获取一些HTML元素,但是很多时候都会遇到一些bug,得不到我们想要的结果,那么这个时候就需要用JS函数来解决了。效果说明:随着页面打开的时间,DIV会越变越小,直到最后只有边框。文字“font-size”会以1PX为单位,不断增大。效果图如下:具体代码如下: 获取样式 #原创 2017-08-23 16:56:14 · 1945 阅读 · 0 评论 -
JS实现简单的多物体运动动画
描述:用JS实现简单的多物体运动动画,当鼠标放在不同li上时,li会由宽200PX慢慢变成400PX,当鼠标移开之后li恢复原状。效果图如下所示:具体代码如下: JS多物体动画 body{ margin: 0; padding: 0; } ul,li{原创 2017-08-23 16:45:19 · 1158 阅读 · 0 评论