前端效果集合
关注
分享
扫一扫
whh_lydia
这个作者很懒，什么都没留下…
展开
-
图片展示(手动左右切换)
1、html部分：2、css部分：3、js部分：注：要引入maquery.js插件原创 2015-07-07 15:53:41 · 858 阅读 · 0 评论 -
淘宝广告区点击切换图片、自动切换
1、html部分：2、css部分：3、js部分：注：1、引入jquery.js 2、 因为点击左右键，要轮到第一张和最后一张图，所以要再重新插入第一张和最后一张图 3、.pic ul的第一张图片位置是绝对定位的，而在第一张图前面又插入了一张图，所以要left:-520px，以致还是固定在第一张图 4、xiao原创 2015-07-10 09:26:27 · 1426 阅读 · 0 评论 -
自动延长的输入框
this.size)this.size=this.value.length+2'>注：onkeydown代表的是键盘输入的，判断当前输入的value的值得长度是否大于当前输入框的大小，如果则将当前长度+2 'if(this.value.length>this.size) this.size=this.size+2'原创 2015-07-10 10:59:34 · 677 阅读 · 0 评论 -
css3动画效果
1、html部分：2、css3部分：注：1、目前浏览器都不支持 @keyframes 规则。 Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和 Chrome 支持替代的 @-webkit-keyframes原创 2015-07-13 15:00:47 · 342 阅读 · 0 评论 -
css3手风琴效果
1、html部分：2、css3部分：注： box-shadow：阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影； X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；原创 2015-07-14 16:57:53 · 554 阅读 · 0 评论 -
向左无缝滚动
1、html部分：2、css部分：3、js部分：注：demo.scrollLeft指的是滚动的距离，demo1.offsetWidth取的是demo1的宽度，offsetWidth比width要更精确 x-=1 就是x=x-1。offsetWidth、scrollLeft等第二个字母要大写以及容器宽度要大，否则没有滚动效果。原创 2015-07-08 10:35:24 · 475 阅读 · 0 评论 -
瑞丽网手风琴效果
1、html部分：2、css部分：3、jquery部分：注： 1、siblings( ) 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。 2、nextAll( ) 方法返回被选元素的所有跟随的同胞元素。 3、end( ) 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。原创 2015-07-20 16:49:08 · 513 阅读 · 0 评论 -
图片点击放大左右切换
1、html部分：2、css部分：3、jquery部分：注：index() 方法返回指定元素相对于其他指定元素的 index 位置。 .eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。 attr() 方法设置或返回被选元素的属性值。原创 2015-07-22 17:08:06 · 1585 阅读 · 0 评论