XiaoXiongV-CSDN博客

轮播图下方小按钮，鼠标悬停后变大显示外圈。<style> li { list-style: none; } a { text-decoration: none; } .wrap { height: 300px; } .wrap div { border: 1px solid red; } .wrap>div&gt...

2019-11-03 16:07:27 293

原创 hover一个元素的样式时需要是父子关系，隐藏盒子css不需要隐藏样式写法，比较麻烦，不知道有没有优点

默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式，被改变的元素必须是被hover元素的子元素，但你现在container和wrap不是父子关系，而是兄弟关系，那么你必须要这样设置了。.container:hover +.wrap{ background: red;}...

2019-10-30 23:33:50 1345

原创改变li中a的字体颜色，不能使用li:hover

<li> <a>111</a></li>a { color: #fff;}li:hover { /* 这样是无效的，因为权重不够*/ color: yellow; }li a:hover { color:yellow;}

2019-10-27 00:23:51 2612 3

原创两边盒子固定宽度，中间盒子自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两边固定中间自适应布局</title></head><body>  <!-- <style> ...

2019-10-22 23:31:49 693

原创纯css小黄人

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小黄人</title> <link rel="stylesheet" href="css/xhr.css"></head><body> &l...

2019-10-22 23:24:36 1887

原创使用animation实现匀速无缝循环滚动动画，鼠标悬停停止运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝轮播</title>  <!-- voison：0.1 1 2 3 4 5 6 1 1走到6再到1，这时如果没有1这张图就有一...

2019-10-20 13:20:42 6509 1

转载 icon图标制作

<!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

2019-03-02 04:21:39 578

转载自定义滚动条

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/com.js">&

2019-01-17 00:54:19 244

转载图片跟着鼠标飞封装鼠标xy轴的获取

2019-01-16 22:07:48 521

转载多个属性样式同时变化

/** * 例子：getStyle(my$("box"),"height") * 获取一个元素的任意样式属性返回一个字符串类型 * @param {Object} ele 元素 * @param {Object} attr 样式属性 */function getStyle(ele, attr) { return window.getComputedStyle ? window.g...

2019-01-16 00:01:19 234

转载滑动滚动条固定一个div到顶部

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/com.js"><

2019-01-15 03:09:21 1756

原创轮播图

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/com.js"><

2019-01-14 22:42:03 76

转载简单移动动画

<body> <input type="button" id="btn" value="移动400px"/> <input type="button" id="btn_" value="移动800px" /> <div id="dv"> &

2019-01-13 19:48:32 112

转载利用定时器写一个协议按钮禁用，渐变

&lt;textarea rows="50" cols="50"&gt;我是通过cols和rows定的大小，我的cols是20，rows是10&lt;/textarea&gt; &lt;input type="button" id="btn" value="请仔

2019-01-13 16:57:24 91

转载星星一闪一闪

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> #dv{ position: relative; height: 600px; width: 500px;

2019-01-13 01:16:13 581

转载定时器写图片抖动

图片抖动<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> img{ height: 150px; width: 250px; } #dv{ positio

2019-01-13 00:53:46 197

转载定时器和BOM

定时器和BOM&lt;body&gt;&lt;input type="button" id="btn" value="按钮"/&gt;&lt;input type="button" id="btn_" value="停止定

2019-01-13 00:21:58 201

转载模拟百度搜索框

模拟百度搜索 <body> <div id="box"> <input type="text" id="txt" class="txt"/> <input type="button" value="搜索" /> <script>

2019-01-12 14:59:58 359

转载绑定多个事件不冲突

<body>  <input type="button" value="按钮" id="btn"/> <script> function addEventListener(ele,type,fn){ if(ele.addEventListener){ ele.addEventListener(type

2019-01-07 03:59:51 310

转载节点隔行变色 body图片替换

<body> <div class="box" id="box"> <div id="divSpan" class="divSpan"> <span>娱乐</span> <span id="sp">新闻</spa

2019-01-07 02:05:48 1187 3

原创练习1

列表突出显示<body> <ul id="ul_"> <li><p>2112</p></li> <li><p>2112</p></li> <li><p

2018-12-26 20:15:46 104

原创点击小图，显示大图（后续需要修改）

2018-12-25 03:41:12 138

转载阻止链接跳转，可以用来获取href中的值

<body> <!--<a href="http://www.baidu.com" id="ak">百度</a> <script> function my$(id){ return document.getElementById(id); } my$("ak").onclick=function(){

2018-12-25 02:57:20 207

转载开关灯

<html><head> <meta charset="utf-8" /> <title></title> <style> .cls{ background-color: black; } </style> </head>&lt

2018-12-24 02:32:47 251

原创点击图片显示另外一张图片

<body> <img src="img/im1.jpg" id="im" alt="我的世界1" /> <script> // 将document.getElementById(id)封装精简代码 function my$(id){ return document.getElementById(id); } my$("im

2018-12-24 02:22:26 3229

原创按钮排他功能

<html> <head> <meta charset="utf-8" /> <title></title> <script> /** * 可以用来写轮播图的按钮和导航按钮 */ </script> &

2018-12-24 01:36:58 221

原创 day7

<html> <head> <meta charset="utf-8" /> <title></title> <script> /** * xml 侧重存储数据 * html 侧重展示数据，信息 html文件可以看成一个文档，这个文档就是一个对象 * 文档中的舍友标签都

2018-12-24 01:20:50 120

转载 Array

/** * .isArray(对象) 判断对象是否为数组 * .concat(数组) 拼接数组 * .every(函数) 返回值为布尔类型，函数作为参数使用，函数中有三个参数，第一个为元素的值 * 第二个为索引，第三个是原来的数组（一般不使用） * 如果这个数组中的每个元素都符合条件则返回true * .filter(函数) 返回符合条件的数组...

2018-12-23 01:38:12 83

原创 String

/** String 是一个对象字符串可以看成是字符组成的数组,但js中没有字符类型字符是一个一个的,在别的语言中字符用一队单引号括起来在js中字符串可以使用单引号也可以使用双引号因为字符串可以看成是数组,所以可以使用for循环遍历字符串特性: 字符串的值不可改变,当给字符串重新赋值时,括起来值改变了,其实是指向改变了,原来的值...

2018-12-23 00:36:11 83

原创利用随机数产生随机颜色和计算日期

&lt;script&gt; //随机16进制的颜色 function getCor(){ var str="#"; var arr=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e",&amp

2018-12-22 02:56:43 164

原创 day5

2018-12-22 02:12:29 75

转载关于typeof和instanceof的区别

https://www.cnblogs.com/double405/p/5326311.html

2018-12-22 00:48:36 73

利用transfromes属性制作css小黄人

空空如也