bonly-ge

2017年5月18日

摘要：轮播就是通过定时器控制图片的盒子的边距进行变化，从而达到看上去轮播的现象。常用来网站首页轮播图，商品展示等很多种情况。无缝轮播就是看起来是一个方向不停地轮换展示，实现该效果有两个思路，一个就是在本身图片的后面追加一组一样的图片，避免出现空白，从而达到无缝的假象；另一种思路就是每次都把第一张图片放到最后，边距清零，或者定位清零，每执行一次就清空一次，从而达到效果的假象。下面我们一一介绍。如果布局... 阅读全文

posted @ 2017-05-18 21:50 bonly-ge 阅读(1491) 评论(0) 推荐(0)

jQuery放大镜的原理

摘要：放大镜就是等比放大图片，显示细节，常用在京东、淘宝等商品网站，增加顾客体验。效果如下：用到的知识点：轮播、获取图片src并赋值、比例尺、pageX 、pageY 、offset().left 、offset().top。先简单介绍一下event.pageX、event.pageY 属性是返回鼠标指针的位置，相对于文档的左边缘。offset() 方法设置或返回被选元素相对于文档的偏移坐... 阅读全文

posted @ 2017-05-18 11:05 bonly-ge 阅读(300) 评论(0) 推荐(0)

2017年5月17日

下拉列表的两种实现方式

摘要：写过下拉列表一般都会遇到一个问题就是，鼠标覆盖的时候下拉列表显示，但是当鼠标离开的时候下拉列表也跟着消失了。思路：两种办法解决以上问题；一种是通过css样式控制，布局要求下拉列表box需要被覆盖的标签包起来，假如你使用 ul li 做的导航栏，用ol li做的下拉列表，那么布局就得如下：其中ul为导航项的盒子，li标签就是每一个导航项，ol就是对... 阅读全文

posted @ 2017-05-17 10:27 bonly-ge 阅读(237) 评论(0) 推荐(0)

Html css图片文本对齐问题

摘要：最近一直在写项目，今天总结一个常见的问题，就是在一个box里如何使图片按照我们的效果与文字对齐。首先我们给图片和文字同时放到一个box里， <ul> <li><a><img src="img/xiaotu_1.jpg" alt=""/>科比</a></li> </ul> <ul> <li><a>< 阅读全文

posted @ 2017-05-17 10:19 bonly-ge 阅读(1008) 评论(0) 推荐(0)

2017年5月4日

一键换肤原理

摘要：效果：通过按键弹出备选皮肤，点击选择样式后，更换成功。思路：先是布局上我们需要定位，所以为了避免背景把换肤按钮给盖住，需要把按钮的标签放到大背景div的下面，并列结构。假如倒置了可以加层级让其显示。代码如下： <!DOCTYPE html> <html> <head> <title>换肤</ti 阅读全文

posted @ 2017-05-04 21:57 bonly-ge 阅读(208) 评论(0) 推荐(0)

2017年5月3日

setInterval与clearInterval用法

摘要：定义和用法： setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 var time=0；用法1： function ... 阅读全文

posted @ 2017-05-03 20:06 bonly-ge 阅读(8546) 评论(0) 推荐(0)

2017年5月2日

jQuery课堂测验

摘要：获取ul li 第一个元素的方法有哪些？ $("ul li:first") 2. $("ul li").first() 3. $("ul li: eq(0)") 4. $("ul li").eq(0) 5.给第一个li加id或者类都可以实现，用$("id")或者$(".class")进行选择。6. $("ul li:first-child") 说出十种常见的事件？ click//单击事件... 阅读全文

posted @ 2017-05-02 16:56 bonly-ge 阅读(208) 评论(0) 推荐(0)

2017年4月28日

Css画圣诞树

摘要：今天看到一道有趣的css题，要求用html和css实现一个圣诞树（上面一个小三角，下面一个大三角，最下面是一个矩形）？你看到后脑子中的印象是什么呢，三角形的做法，还是什么，接下来看看我的制作过程。 TODO supply a title 圣诞树制作 ... 阅读全文

posted @ 2017-04-28 14:54 bonly-ge 阅读(1200) 评论(0) 推荐(0)

Float与position区别

摘要：名词解释 float：浮动，脱离文档流，但是会占据文档位置，浮动元素下方不能放置文档，但是可以放置其他块状元素（块状元素里面的文档不会被盖住而是被挤下来了），位于它的底层；顾名思义就是飘起来直到碰到块状元素的时候会停在当前位置，也可以给浮动元素添加左右外边距，但是边距内是不能放置其他元素。假如设置左浮动，我们在写文档的时候会首先在左浮动元素的右边写，宽度不够的情况下回换行。 position: 定... 阅读全文

posted @ 2017-04-28 14:23 bonly-ge 阅读(244) 评论(0) 推荐(0)

2017年4月26日

页内导航跳楼事件

摘要：目的：使用侧边栏实现业内导航。思路：一种是通过a标签链接的方式，一种是通过jQuery通过控制滚动条的scrollTop值来进行控制。这里重点介绍JQuery的方式，先写静态页面，然后在通过规律写出jQuery语句。布局如下（在这之前引用了清除列表样式文件和重置文件）： 1号车库 ... 阅读全文

posted @ 2017-04-26 22:32 bonly-ge 阅读(159) 评论(0) 推荐(0)

态度决定高度，细节决定成败

公告