散人笔记

散人笔记 http://www.uideas.cn 生活来源于创意,所以我懂生活 Sun, 22 Aug 2010 07:17:13 +0000 http://backend.userland.com/rss092 en js实现表格行间隔效果（鼠标停留位置及当前行和选择行效果）　　表格对于大家来说，并不陌生。为在更好的表达表格里面的数据，或许我们要对表格进行处理，很多情况下，我们只对表格进行了头部和列表做个样式的处理，似乎看起来并不直观，但由于程序和灵活性，要在每一行上加上样式，似乎做模版文件的时候并做不到，只有在程序里面做判断，这样对程序增加麻烦，在套程序的时候会增加很多工作，所以这里简单介绍一下用js来对表格体的每行进行处理，看看下面的例子： CODE <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style>  </style> <script>  </style> <script>  </style> <script> <!-- function setMenuStyle(obj){ var j; var cBody = document.getElementById("cBody"); ... http://www.uideas.cn/post/406.html 一款图片轮换效果　　给大家分享一款图片的轮换效果，其实通过这个例子，你可以自己稍加点改动，就可以做出另外很多的效果的，先简单介绍一下构思：在图片轮换的时候，让前一张左移，同时让接下来展示的那一张右移，各移动一半的时候，两张图片就反方向移动，只是前一张变到后面，后一张变到前面了。实现原理看一下代码就明白了，如果你想做成其它效果，只需要改变js里面的移动方法就行了，比如把移动效果换成透明效果等。　　看下面的例子吧： CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>picmove</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/20100524.css"> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/20100524.js"></script> </head> <body> <div id="picScroll"> <div class="picCov"> <div id="picB"> <a href=""><img src="" width="600" height="270" border="0"></a> </div> <div id="picF"> <a href=""><img src="" width="600" height="270" border="0"></a> </div> <div id="picNumBg"><img src="http://www.uideas.cn/download/images/img/bg.png"></div> <div id="picNameBg"><img src="http://www.uideas.cn/download/images/img/picName.png"></div> <div id="picName"><a href=""></a></div> <div id="picNum"> <div id="picCount"></div> </div> <div id="picStr" style="display:none;"> <a href="#" title="累么"><img src="http://www.uideas.cn/download/images/img/1.jpg" border="0"></a> <a href="#" title="酷么"><img src="http://www.uideas.cn/download/images/img/2.jpg" border="0"></a> <a href="#" title="背影"><img src="http://www.uideas.cn/download/images/img/3.jpg" border="0"></a> <a href="#" title="帅么"><img src="http://www.uideas.cn/download/images/img/4.jpg" border="0"></a> <a ... http://www.uideas.cn/post/394.html 一款网站公告滚动效果　　通常很多网页由于内容太多，使页面的高度拉伸非常严重，会给游客浏览网页的时候带来很多麻烦和时间上的浪费，对于有些内容，看似很重要，但又不能占页面太大空间而影响页面的美观性，而只需要一小块也能将其展现出来，下面介绍一款滚动的例子。　　通常网站公告可以划分为上面提到的这一类，使用滚动效果又能使其内容独特化，很容易引入游客眼目，同时战胜空间比较小，相对与普通的marquee移动来讲，此移动效果不会出现一片空白区域，是连续滚动的，看完下面的例子效果后，将其稍加变化，你就可以做成图片滚动，类似flash的效果了。 CODE <html> <head> <style type="text/css" media="screen"> #mBox{height:24px;overflow:hidden; border:1px #99CC99 solid; background:#FFFFCC} #mBox #marquee{ padding-left:6px;} #mBox #marquee ul{ list-style-type:none; margin:0px; padding:0px;} #mBox #marquee ul li{ line-height:24px; height:24px; list-style-type:none; margin:0px; padding:0px; font-size:12px;} </style> <script language="javascript" type="text/javascript"> var play = false; var lineheight = 24; var speed = 20; var relay = 3000; var obj; var action; function startmarquee(){ obj = document.getElementById("marquee"); obj.innerHTML += obj.innerHTML; obj.style.marginTop = 0; obj.onmouseover = function(){play = true;}; obj.onmouseout ... http://www.uideas.cn/post/387.html 一款灵活性很强的日历代码　　工作之余，因个人对js的爱好，写了一款日历，综合了以往工作中遇到的与日历选择相关的很多功能。由于个人技能欠缺，可能会有一些地方处理得不够好，有意一起研究者可以与本人联系，把这个日历做得更好，声明一下：此日历着重点在功能上，而不在特殊效果上，为了让此代码更为简洁，代码量更小，无须加任务特效。　　下面做点简单的介绍：一、日历目录存放　　|-- [Calendar] 　　　　|-- [style] 　　　　　　|-- [blue] 　　　　　　　　|-- [images] 　　　　　　　　|-- Calendarstyle.css 　　　　　　|--[demo] 　　　　　　　　|-- [images] 　　　　　　　　|-- Calendarstyle.css 　　　　|-- Calendar.js 　　　　|-- Calendarcov.css 注意：1、调用js时在<head>区域引用Calendar/Calendar.js和Calendarcov.css即可。　　　2、记住要把images同时放到相应的文件夹下面二、日历皮肤更换　　支持自定义皮肤，本日历已给出两套模版，自己制作皮肤时可以对照demo.html模版中的class进行制作　　制作好的皮肤存放目录要注意，自定义一个皮肤文件夹（如已有的[demo]）放到[style]文件夹里面，然后把你要用到的图片放到你的皮肤文件夹里面的[images]文件夹里面，css样式文件命名为Calendarstyle.css与[images]文件夹同级。　　css样式说明：　　#calendarCov .calenCovbody：弹出层的总体框架样式，主要设置主题背景颜色　　#calendarCov .calenCov：弹出层的总体框架样式，设置头部边框　　#calendarCov .calenTitle：顶部年月样式和总体背景图片样式　　#calendarCov a;#calendarCov td：通用样式　　#calendarCov th：周的单元格样式　　#calendarCov .calenHead：周所在行的样式：主要设置背景　　#calendarCov .calenYlast：上一年的按钮样式　　#calendarCov .calenMlast：上一月的按钮样式　　#calendarCov .calenYnext：下一年的按钮样式　　#calendarCov .calenMnext：下一月的按钮样式　　#calendarCov .calenBody：日历体的样式，主要设置层次感　　#calendarCov .calenBodyCov：日历体的样式，主要设置层次感和边框　　#calendarCov .calenday td：日期单元格样式　　#calendarCov .calenday td a：当月存在日期单元格样式　　#calendarCov .calenday td a:hover:当月存在日期单元格鼠标指向样式　　#calendarCov .calenday .weekend：日期单元格周末样式　　#calendarCov .calenday .weekday：日期单元格非周末样式　　#calendarCov .calenday .weeknull：空白日期单元格样式　　#calendarCov .calenday .current默认日期样式，主要设置边框和背景　　#calendarCov .calenday .current a默认日期样式，主要设置字体颜色　　#calendarCov .calenButton：日历下面部分三个按钮样式，主要设置与日历体间距　　#calendarCov .calenButton div：日历下面部分三个按钮样式，主要设置按钮背景#calendarCov .calenButton div a：日历下部分三个按钮样式，主要设置按钮字体　　calenSetnull：清空按钮样式　　calenSetoday：今天按钮样式　　calenClosefl：确定按钮样式三、调用格式　　先举几个例子： 1、普通调用　　<input type="text" onFocus="showCalendarControl(this)" ... http://www.uideas.cn/post/365.html 我爱我的散人笔记　　绸缪已久的《散人笔记》总算是走上路了，可以说这个计划是悠久的，行动是缓慢的，结果是自我感觉的。换了一种风格，仿佛换来了一次新生，换的也是一种对生活的态度，对过去不知道说什么，但是对未来却抱有希望，没有真正的世界末日，只是自己心里有鬼，没有真正的现实残酷，只是自己总在埋怨，同时也没有真正的希望神灯，而需要自己去创造…… 走大了，写成励志类了，第一次把心情写到博客上感觉还真有点不一样，走着呗！那就多点废话了：在此感谢一直以来关注《友意》的人，同时期待你继续关注《散人笔记》　　感谢互联网，让我学到不少东西，同时也让网路朋友分享我的成果　　感谢wordpress…… 小弟一定竭尽所能把更广，更好，更适用的东西与大家分享！口号喊起来：“生活来源于创意，所以我懂生活！” http://www.uideas.cn/post/269.html