散人笔记 » DIV+CSS http://www.uideas.cn 生活来源于创意,所以我懂生活 Sun, 22 Aug 2010 07:17:13 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 一款图片轮换效果 http://www.uideas.cn/post/394.html http://www.uideas.cn/post/394.html#comments Sun, 23 May 2010 17:24:48 +0000 kos http://www.uideas.cn/?p=394 　　给大家分享一款图片的轮换效果，其实通过这个例子，你可以自己稍加点改动，就可以做出另外很多的效果的，先简单介绍一下构思：在图片轮换的时候，让前一张左移，同时让接下来展示的那一张右移，各移动一半的时候，两张图片就反方向移动，只是前一张变到后面，后一张变到前面了。实现原理看一下代码就明白了，如果你想做成其它效果，只需要改变js里面的移动方法就行了，比如把移动效果换成透明效果等。
　　看下面的例子吧：

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 

相关下载：
　　完整演示实例下载：20100524.rar

]]> http://www.uideas.cn/post/394.html/feed 1 一款网站公告滚动效果 http://www.uideas.cn/post/387.html http://www.uideas.cn/post/387.html#comments Thu, 20 May 2010 12:07:29 +0000 kos http://www.uideas.cn/?p=387 　　通常很多网页由于内容太多，使页面的高度拉伸非常严重，会给游客浏览网页的时候带来很多麻烦和时间上的浪费，对于有些内容，看似很重要，但又不能占页面太大空间而影响页面的美观性，而只需要一小块也能将其展现出来，下面介绍一款滚动的例子。

　　通常网站公告可以划分为上面提到的这一类，使用滚动效果又能使其内容独特化，很容易引入游客眼目，同时战胜空间比较小，相对与普通的marquee移动来讲，此移动效果不会出现一片空白区域，是连续滚动的，看完下面的例子效果后，将其稍加变化，你就可以做成图片滚动，类似flash的效果了。

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 

]]> http://www.uideas.cn/post/387.html/feed 3 自认为一款很舒服的网站导航 http://www.uideas.cn/post/249.html http://www.uideas.cn/post/249.html#comments Thu, 25 Mar 2010 14:35:11 +0000 kos http://www.uideas.cn/?p=249 　　对于层叠样式的导航大家并不陌生，很多办公软件上都有见过，小弟仍因工作需要写了一个类似的导航，主要原理是采用层的优先级（即：style里面的z-index）来改变导航的选中状态，并且此导航考虑到有可能一个页面上会有多个这样的导航样式，于是并非通过id来获取任何对象，而是过去标签的嵌套关系来获取对象的，很有意思哦，看看下面的demo。

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

相关下载：
　　js下载地址:20100325.js
　　css下载地址:20100325.css
　　图片下载地址:20100325.rar

]]> http://www.uideas.cn/post/249.html/feed 0 js表格排序,可任意的对指定列的进行排序 http://www.uideas.cn/post/217.html http://www.uideas.cn/post/217.html#comments Fri, 05 Mar 2010 13:39:21 +0000 kos http://www.uideas.cn/?p=217 由于工作需要,要实现表格内容的排序,于是在网上找了很多代码,这种东西写的人确实太多,所以自己就不怎么想写了,但网上找的大部分要么兼容性不好,要么达不到我的要求,于是找了个较为简单的进行修改.
声明:由于我在找到的源码上做了很多修改,把无用的东西都删除掉了,所以现在不知道出处,抄袭之处,敬请原谅!
所以排序的原理就不做解释了,再一就是我也没认真看过,可以慢慢去了解原理,在大部分要用到的这种排序中,可能有些不必要的项(即列),可能不需要进行排序,所以我们要对想进行排序的项才实现排序功能,那么要写一个通用的,最简单的方法就是把要排序的列放到一组数据中传到方法里面去,方法体接收到参数后,把组成一个数组,然后循环判断让需要进行排序的列去执行排序方法,费话就说这些了,下面是给出的源代码,如有兴趣可以一起研究一下,看有没有不足之处:
效果如下:

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 
上面的例子我只让1,2,3,4,5,7进行排序,所以传值的时候写成了
<script type="text/javascript">
var st1 = new SortableTable(document.getElementById("dTable"),'','1,2,3,4,5,7');
</script>

相关下载：
　　例子下载：kos20100305.rar

]]> http://www.uideas.cn/post/217.html/feed 2 div+css通用网页布局实例 http://www.uideas.cn/post/203.html http://www.uideas.cn/post/203.html#comments Tue, 08 Dec 2009 02:55:00 +0000 kos http://www.uideas.cn/?p=203
CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> 　　直接看下面的效果,通用的网页基本上采用这个基本布局,不再为div+css实现网页布局而烦恼了!

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

]]> http://www.uideas.cn/post/203.html/feed 0 js+CSS实现QQ菜单样式(老版QQ菜单样式，兼容火狐) http://www.uideas.cn/post/175.html http://www.uideas.cn/post/175.html#comments Mon, 30 Nov 2009 10:01:14 +0000 kos http://www.uideas.cn/?p=175 　　给大家一个都不陌生的导航样式，老版的QQ菜单样式，网上找了一些代码，但觉得很复杂，想用起来又不方便，于是自己动手写了一个简单的，除了没有写缓慢展开的效果外，其余的都应该差不多，相信很多地方都能用上。

功能如下：
　　1、初始状态下，所以菜单呈关闭状态，当点击某一个菜单时，就展开此菜单，展示里面的内容
　　2、当点击另外一个菜单时，前一个菜单关闭，展开新点击的菜单，展示里面的内容
　　3、浏览器窗口大小改变时，展开的菜单会对应于你的浏览器大小而拉伸或压缩
　　4、当浏览器窗口高度过小(即刷新浏览器出现上下滚动)时，报错提醒，（相信设置导航时会考虑到大体性，即不要把分类分得太多）

　　最后，用到的样式表都只是为了体现功能效果，没有细设，至于鼠标移动和其它样式，自己稍做修改就可达到你想要的效果

再看看下面例子的效果：

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 

相关下载：
　　css下载：QQmenu.css
　　js下载：QQmenu.js

]]> http://www.uideas.cn/post/175.html/feed 0 js+css实现windows应用程序的拖动效果 http://www.uideas.cn/post/170.html http://www.uideas.cn/post/170.html#comments Thu, 26 Nov 2009 17:15:15 +0000 kos http://www.uideas.cn/?p=170 　　闲来无事，把以前学习的js整理了一下，在学习的过程，总会发现一些看上去貌似没用的东西，但在实际的应用中有可能会逐一的体会到那些东西的有用之处和优点．＂层＂这个东西对于我们来说并不陌生，如今的网页设计中，层的应用越来越广泛，这正是因为层给我们能带来一种独特的方便的页面的整齐效果，这之中也有很多让我们头痛的，比如＂赖皮广告＂，但我们在意的或许不是这个东西，如果说一个网站的赖皮广告很多的话，我可能只看一次，不进第二次，我们在意的是层给我们带来的方便．
　　仅此给大家分享一个能带来方便的层应用：windows的操作习惯应该说影响了绝大部分的网名，应用程序窗口的拖动可能每个人都接触过，把这个拖动效果应用到层上，就会在网页中就会带给我们同样的感觉．下面就是一个简单应用的实例，如有用得着的地方稍加改动就能变成你们想要的效果了

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 

相关下载：
　　js下载：moveTable.js
　　css下载：moveTable.css

]]> http://www.uideas.cn/post/170.html/feed 1