学习
关注
分享
扫一扫
蔡大毛
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css中用hover实现二级菜单
css中用hover实现二级菜单在我们日常生活中，通常会看到下拉菜单会有一些二级菜单，下面就为大家讲解一下如何生成二级菜单。第一步首先进行一个页面的主要布局，我这里主要用的是ul+li进行嵌套布局，内容如下：第二部就要给它进行一个格式的编写，让它实现效果：以上就是一个简单的二级菜单的制作方法，如果大家在做样式的时候感觉选择器用的比较多麻烦，可以起个class类名。下面在附上一张效果图...原创 2018-12-05 22:11:02 · 4377 阅读 · 1 评论 -
鼠标放到图片上，图片缓慢变大，离开时，图片缓慢恢复
给大家介绍一个小的动态效果，当鼠标放到图片上时，图片会变大，鼠标离开时，图片恢复，如果想简单一点，直接给图片加一个hover就可以了，但是这样效果不是很美观，我想让它有一个过度的实现效果，移除的时候也有，那我们就需要用到js了：先放入一张图片，或者任意一个块标签，设置宽高<div class="harley"> <img src="img/muotuo1.png" />...原创 2019-02-18 14:25:52 · 3552 阅读 · 0 评论 -
如何实现网页从底部滚动到顶部
许多网站底部中都会有一个回到顶部的功能，今天做网站的时候添加了一个，用新学习的jQuery去完成以下，代码如下：&lt;div class="scroll"&gt;&lt;/div&gt;&lt;script&gt; $('.scroll').click(function(){ //点击事件 $('html,body').animate({ //在body原创 2019-02-18 14:10:02 · 1188 阅读 · 0 评论 -
window.open跳转新页面
通常网站都有一个新闻中心，里面没一个新闻都是一个页面，我们在做的时候不可能去把他们都写一个页面，那样太麻烦了，下面给大家介绍一个简单的方法，只要两个页面就可以了：第一个页面index.html:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title><..原创 2019-01-08 16:25:28 · 5489 阅读 · 1 评论 -
页面从底部跳转到顶部
在我们平常浏览网页的时候，会发现有些网页的底部会有按钮可以跳转到顶部，下面用js给大家介绍一个方法：css样式，把div高度设大，就会出现滚动条&lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } div{ position: relative; width: 500px; ...原创 2019-01-08 13:46:25 · 944 阅读 · 0 评论 -
offsetHeight、offsetWidth、clientWidth、 scrollWidth等方法的理解
A.1.window.innerWidth;返回窗口的文档显示区的宽度window.innerHeight;返回窗口的文档显示区的高度window.outerWidth;设置或返回一个窗口的外部宽度，包括所有界面元素（如工具栏/滚动条）。window.outerHeight;设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。2. body.clientWidth;...原创 2019-01-08 12:04:47 · 255 阅读 · 0 评论 -
平移轮播图
这里有两种方法，一种是前后各加一张图片，一种是不添加图片，先做不添加图片的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type=&quo原创 2019-01-08 11:34:32 · 980 阅读 · 0 评论 -
js调用json里面的数据，以及购物车的全选
json数据如下：var json=[ // 两个店铺 { "shopname": "京东自营", "shopID": 101, // 商品 "goods": [ { "checked": f原创 2018-12-28 14:20:24 · 916 阅读 · 1 评论 -
js实现点击按钮出现div，点击空白又消失
主要就是两个点击按钮，一个是点击让 div出现，一个是点击空白地方让它消失，在做的时候先给div添加display：none;进行隐藏，第一次去点击按钮，让它变成block，不过要加一个stopPropagation()进行阻止冒泡，然后在写另一个点击消失的事件，变成none就解决了。div的内容自行添加，我这里就添加了一个背景颜色以便于效果实现。&lt;!DOCTYPE html&gt;&l...原创 2018-12-28 12:09:53 · 9271 阅读 · 5 评论 -
animation动画--跳动
给大家分享一个小案例，让静态的一行字与一个球变为动态跳动第一个文字动画<title></title> <style> .box{ width: 600px; height: 150px; margin: auto; margin-top: 300px; background-color: deepskyblu...原创 2018-12-07 12:19:26 · 2392 阅读 · 0 评论 -
JS九宫格抽奖
注：此篇文章的图片及样式参考https://www.cnblogs.com/starof/p/4933907.html网站，js内容主要是根据自己所学去写的<!DOCTYPE html><html><head> <title></title> <style type="text/css"> ul{ m原创 2018-12-13 17:18:02 · 4336 阅读 · 0 评论 -
JS如何用switch循环判断
要求: 90&lt;=成绩&lt;=100为优秀 70&lt;=成绩&lt;90为良好 60&lt;=成绩&lt;70为一般 成绩&lt;60为重修 &lt;script&gt; a=prompt("成绩","请输入"); var range=a/原创 2018-12-13 10:39:01 · 5335 阅读 · 0 评论 -
JS去除重复数列
在一个数组中，如果出现重复数字，可以用下面的方法进行去除<script> var arr=[2,4,2,1,5,3,5,7,9,2,4]; var s=[]; for(var i=0;i<arr.length;i++){ for(var j=0;j<s.length;j++){ if (s[j] == arr[i]) { ...原创 2018-12-13 10:32:31 · 314 阅读 · 0 评论 -
JS数组一到一百随机数
用js方法实现一到一百随机生成15个数，并检测是否存在某一个数 <script> var arr=new Array(15); //定义随机生成15个数 for( i=0;i<15;i++){ arr[i]=(parseInt(Math.random() * 100) +1)//范围是一百以内,因为从0开始所以+1 } ...原创 2018-12-13 10:26:41 · 1635 阅读 · 0 评论 -
如何用transition实现翻书动画效果
下面给大家介绍一个小案例，可以实现翻书的效果，以打开音乐盒为例。这个案例主要是运用了一个transition的坐标轴，在动画效果中，要求以第二张图片的边缘进行翻页。代码如下：先放入两张图片在body中&lt;body&gt; &lt;div&gt; &lt;img src="img/musicb.jpg" /&gt; &原创 2018-12-06 11:52:48 · 1370 阅读 · 0 评论 -
JavaScript斐波那契数列兔子问题
题目：古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，*小兔子长到第三个月每个月又生一对兔子，假如兔子都不死，问每个月的兔子总数为多少？*1.程序分析： 兔子的规律为数列1,1,2,3,5,8,13,21…1 1 2 3 5 8 13 21 <script> a=prompt("请输入月数","请输入"); funct...原创 2018-12-13 10:00:38 · 1263 阅读 · 0 评论 -
IE 6 BUG解决方法
1.双边距BUG float引起的 解决：使用display：inline;2.像素问题，使用float引起的 解决：使用display：inline-3px；3.超链接hover点击后失效 解决：使用正确的书写顺序 line visited hover active;4.le z-index 问题 解决：给父级添加position：relative；5.Png 透明 解决：使用j...原创 2019-02-18 14:40:02 · 175 阅读 · 0 评论