2018年2月8日
摘要: 如图所示: 想要的效果: 1.鼠标移入时文字变化、图片变化 2.鼠标不做动作,也会有自动变化 布局如下: js代码如下: 实现思路: 鼠标动作时使用index()获取当前文字的位置,使用eq()定位到对应位置的图片 使用stop()清除动画队列 使用.eq(0).mouseover()初始化图片 使 阅读全文
posted @ 2018-02-08 15:39 鹿大大 阅读(114) 评论(0) 推荐(0) 编辑
摘要: 有的软件可以自定义皮肤,emmm废话不多说,直接说步骤吧: 0.总共三步效果,对应5中的js,分别是用户容器的变化、网页皮肤变化、保存cookie 1.引入jQuery.js和jQuery.cookie.js 2.写几个皮肤样式表,一个.css文件中一种颜色,比如: 3.页面中引入默认的皮肤样式表 阅读全文
posted @ 2018-02-08 11:27 鹿大大 阅读(233) 评论(0) 推荐(0) 编辑
摘要: transform:转换 对元素进行移动、缩放、转动、拉长或拉伸。 方法:translate(): 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数 有两个div,它们的css样式如下: 结果如下: rotate() 元素顺时针旋转给定的角度。允许负值,元素将 阅读全文
posted @ 2018-02-08 09:41 鹿大大 阅读(144) 评论(0) 推荐(0) 编辑
  2018年2月1日
摘要: 预期效果: 1.全选按钮checked——>所有items的状态变成checked 2.全选按钮unchecked——>所有items的状态变成unchecked 3.所有items都checked——>全选按钮的状态变成checked 4.有一个item是unchecked——>全选按钮的状态变成 阅读全文
posted @ 2018-02-01 10:47 鹿大大 阅读(315) 评论(0) 推荐(0) 编辑
  2018年1月19日
摘要: 1.实例一效果: 2.实例一代码:注意HTML结构和红框中的内容 3.实例二效果: 4.实例二代码:注意HTML结构和红框中的内容 ps:区别于选项卡 阅读全文
posted @ 2018-01-19 22:52 鹿大大 阅读(85) 评论(0) 推荐(0) 编辑
摘要: 过年在携程买票的时候,偶然间发现点击城市中间的图标可以将出发城市和到达城市互换,于是我去官网找了一下实现代码,具体如下: 1.效果:点击图标互换城市 2.HTML结构:给img设置一个ID,href="javascript:;"可以阻止a标签的默认行为 3.JavaScript: 4.js源代码: 阅读全文
posted @ 2018-01-19 16:39 鹿大大 阅读(159) 评论(0) 推荐(0) 编辑
摘要: 在webApp的复合页面中,如果主层或者遮罩层的高度大于屏幕高度,滑动遮罩层时就会引起联动,这就是滑动穿透事件,那么如何解决呢。 我在网上找了很久,有很多人提供了比较好的思路,可惜目前水平不足,看demo的时候一切顺利,改到自己项目中就总是出问题。 先马上两篇比较认可的文章,以后水平提高了再做尝试吧 阅读全文
posted @ 2018-01-19 15:40 鹿大大 阅读(194) 评论(0) 推荐(0) 编辑
  2018年1月18日
摘要: 当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如果需要更复杂的排版要求,可以考略使用其他方法,比如使用相对定位和绝对定位。 在这篇文章中,我们首先要讨论元 阅读全文
posted @ 2018-01-18 13:48 鹿大大 阅读(453) 评论(0) 推荐(0) 编辑
  2018年1月17日
摘要: 效果是酱婶的: HTML布局: css样式: 源代码-css: 1 .cityLineLeft { 2 vertical-align: middle; 3 text-align: left; 4 display: inline-block; 5 width: 100%; 6 border-top: 阅读全文
posted @ 2018-01-17 14:15 鹿大大 阅读(634) 评论(0) 推荐(0) 编辑
  2018年1月15日
摘要: 默认效果: 修改后的效果: 源代码: 1 ::-webkit-datetime-edit { padding: 0; background-color: #fff;} /*控制编辑区域*/ 2 ::-webkit-datetime-edit-fields-wrapper { background-c 阅读全文
posted @ 2018-01-15 15:44 鹿大大 阅读(253) 评论(0) 推荐(0) 编辑