xjwolaile
- 浏览: 343518 次
- 性别:
- 来自: 杭州
-
最新评论
-
幻紫1992：
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992：
就是没有返回顶部的按钮，这个页面、、
[JS代码库] -
幻紫1992：
很受用，O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco：
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520：
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
文章列表
今天在做需求的时候遇到一个这样的问题
就是在img外面的a标签在ie6里面会出现移动的情况，从而把外围的容器给撑大来，但是样式的在ie6下的走形，以前是从来没有过的事情，开始的时候找了很久都没有发现后来在自己的摸索下发现
<div>
<a><img src="xxx" /></a>
</div>
在这个情况下以前都是可以正常显示的但是，不知道在哪样的情况下a标签的大小会变的更图片一样大从而让原本在外面的容器因为a标签的变大而扩大，在外面定义外容器的样式也没办法定义回来。
后来解决的办法就是只能把a标 ...
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
margin:10px 5px 15px 20px;
最基础的用法 用来调节上下左右的间距
margin:10px 5px 15px;
这个是调节上10px 下15px 左右个5px
margin:10px 5px;
这个是上下10px 左右5px
margin:10px;
上下左右都是 10px
浏览器支持：所有浏览器都支持 margin 属性。
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
...
1、效果及功能说明
在输入框内限定了数字数量后每写一个字符减少一个字符的位置并显示出还能写多少个字
2、实现原理
是首先判断输入的格式是否是UTF-8的格式格式正确下才能有效的进行计算，但后是定义一个限定的值后加进输入框内，后安装减法输入一个字符就少一个字符的位置并显示下面
3、主要的方法
//判断J_AucTitle里面的有多少个字 J_LimiterWrapper里面的显示出来多少个字
S.use('gallery/limiter/1.4/index', function (S, Limiter) {
var textLimiter ...
1、效果及功能说明
在输入框内输入字符后点击按钮键就可以添加到下面的输入框里
2、实现原理
是通过页面直接写入的方法来实现的非常的简介
3、主要的方法
S.use('gallery/textDiff/1.0/index, node, event', function(S, TextDiff, Node, Event){
//定义参数
var textDiff = new TextDiff();
//定义点击按钮的效果
Node.one('#diff').on('click', function(){
//当点击完按钮后可以获得#text1和#text2的 ...
1、效果及功能说明
当鼠标点击小图片的时候可以切换到大图片上来放大图片，后小图片的也会更新到大图片上
2、实现原理
在这边进行了修改就是上一个版本显示出html5的图片但是在线图片没有效果现在这个版本是直接取得 src里面的地址大小图片也只有一个地址，这样就简化了很多，只是在做图片的上面有一些要求就是所有的图片都是以大图片为准，小图片的坑也是填入大图片，因为都是一个地址当小图片放到大图片上就会失真所以小图片其实也是 大图片的尺寸只是在小图片上定义了大小所以显示出来的是 小图片当点击后被大图片获取到了路径那么就变成了图片原来的尺寸就不会失真了，而且还加入的循环在后台通过tms循环的时候 ...
1、效果及功能说明
当鼠标点击小图片的时候可以切换到大图片上来放大图片，后小图片的也会更新到大图片上
2、实现原理
首先定义一个大图片的默认路径是什么图片这是为了当一开打的时候就有图片在上面，然后定义获得小图片的路径，小图片定义个默认路径就是一直显示哪张图片后定义一个可以给大图片获得的路径通过往小图片添加data-href="11111"属性来让大图片获得链接路径这样就实现了链接地址的互换
主要的方法
//这里告诉大图片要从哪里获得小图片
Event.on("#imgList img", 'click', function () { ...
1.在浮动模型中，一个框首先根据常规流向布局，再将它从流中取出并尽可能地向左或右偏移。浮动元素与其它元素框的垂直边距不会重叠，重叠是指边距产生交集，包括与其父元素、后代元素之间。浮动元素会产生一个块框， ...
这里向大家描述一下HTML DOM display属性的定义和用法，HTML DOM display属性主要用来设置元素如何显示，比如当此属性值为none时，表示此元素不会被显示，而block则表示此元素将显示为块级元素，这个元素前后会带有换行符。
HTML DOM ...
一、就是切图片的技巧
1、切图片的时候经常会因为插入页面后颜色的不协调而苦恼不如说在一个头部的中间是图片两边是背景的情况下经常会和下面的整体的背景颜色不相同，虽然是同一个效果图切出来，同一个颜色但是当插入到页面上的时候还是会有偏差，所以我们在切图片的时候尽量把头部的图片往下切一点，切到了内容也没事，到时候把中间的内容扣掉就好了，然后在也身体的背景的时候尽量的往上切点，争取能让颜色相容看不出有分界线的存在
2、就是当同一个效果图切出来的图片当放到页面中还是会有差距的这个时候我们就需要使用一个背景图的属性功能还调节这个缺点
//center对其所包括的文本进行水平居中top就是居上的意思n ...
1、大家都知道页面要求快速的加载进入让用户清楚的看到首先就是要图片要小，图片的品质低载入和显示的速度就会快但是，往往就是因为这个而导致一张图片用户根本看不出清是什么东西，所以在这里一般切图的话，新手都是直接切一张图片后放进html里面显示出来这样展示的慢还拖时间。
所以我们可以把一样大的图片比如 600*800的图片我们可以切成4张 600*200的图片给用户展示出来这样还可以节省用户的载入时间和提升图片的显示速度，一般内容都是居中的所以在一般头部的头片也是切的和内容的宽度相符后多余的长度都用背景方式插入到css里面，这样就大大的提升了页面的整体速度和用户的体验感觉。
2、图片质量的大小是可 ...
ie游览器下的透明度调正
//后面的Opacity=0的0，是数字越小透明度越高 100不透明 0是完全透明
filter: Alpha(Opacity=0);
//然后是在页面上直接加载视频
//这里设置的是最外围的容器的大小，下面是定义了最大化后的大小，最后面视频播放过程中的大小
//object标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
//param 元素允许为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 <object> 或者 < ...
一、页面的学习
1、在刚刚接到页面的是时候评估上是没什么问题的，但是仔细一看还是有点问题的，比如在页面上的头部导航，字体没有对应的字体，所以只能用链接点位到上面然后在将字体全部透明化
问题：在ie6下的透明化还是没有做好，今天晚上回去在查查资料，不行明天问问其他人
2、就是页面的圆角应为图片需要是成圆形的方式展示出来所以
问题：也是一样的问题在ie下的无法呈现，晚上找资料，不行明天问题同事
3、就是还没有插入过有关视频等播放类的软件
问题：今天回去看看其他的网页，后明天过来请教同事
二、和需求方的沟通
1、头部的店铺标志沟通
2、头部的整体效果
3、需要后台填写的内容
4、 ...
一、自己的评估
1、确定页面创建在哪个站点下，通过需求提供的名字，要是不清楚的话就看本页面的头部，在不行在跟需求方进行核对
2、查看需求的时间是多少小时内完成的和是否是我们公司设计师设计的，有一类是在外面设计好的直接发给前端制作的，这个要辨认清楚
3、然后是页面的布局是不是符合规范，中间的内容是不是990的，在确定整个页面的宽度，看看两边是不是相等，不是的话看看是不是差距不大，不大的话自行调整，调整不了的让设计师重新修改
4、还有背景图片是否可以平补，实在不行切不了的要告诉设计师 重新设计
二、和设计师的沟通
1、图片的尺寸
2、哪些需要后台填写的
3、页面的字体是不是能够做出来 ...
1、效果及功能说明
jssdk组件的页面轮播效果
2、实现原理
自动轮播和手动焦点图效果，当鼠标移动到焦点图的序号上就会直接切入图片，后过2秒自动回复轮播效果
主要的方法
<script type="text/javascript">
都是封装好的代码 只要这个id lunbo放入最外围的div里面就可以执行
KISSY.use("switchable", function (S, Switchable) {
new Switchable.Slide('#lunbo', {
conten ...
1、效果及功能说明
jssdk组件的页面左右切换效果
2、实现原理
是通过计算每次显示区域的为多少从而做出左右移动的效果
主要的方法
5是移动的数量 500是移动显示出来的距离有多少 fales是能不能重复移动
var carousel = new Carousel('#demo6', {
effect: 'scrollx',
easing: 'easeOutStrong',
steps: 5,
viewSize: [500],
circular: ...