等待-放飞梦想

勤现在-乐将来

前端交互

html、css、JavaScript、jQuery一切与前端相关的东东

08

10

一些三角形的CSS写法

Await / 前端交互 / 2008/10/08 1:01

多的就不说了,很简单的写法,大家直接运行看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>www.leotheme.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*leotheme.cn*/ body{ margin:0 auto; text-align: center; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; } ul{list-style:none;} h1 {font-size: 18px;} #info,#nav{width: 500px; margin:50px; text-align: left; border:1px dashed #FF3300; background:#FFFFCC; padding:10px;} #info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;} #nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; } a:link,a:visited{color:#FF6600;text-decoration: none;} a:hover,a:active{ color:#FF0000;} #nav a span{overflow:hidden; border-top:6px solid #FFFFCC;border-left:6px solid #FFFFCC;border-bottom:6px solid #FFFFCC; height:0px; width:0px; margin:2px 2px 0 -10px; position:absolute} #nav a:hover span{background:#CC3300;border-top:6px solid #FFFFCC;border-left:6px solid #FF3300;border-bottom:6px solid #FFFFCC;overflow:hidden; float:left;} /*一些三角的写法*/ #info_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;} #info_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;} #info_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;} #info_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} #info_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;} #info_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;} #info_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} #info_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} #info_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} </style> </head> <body> <div id="info"> <h1>一些三角形的写法</h1> <div id="info_a"></div> <div id="info_b"></div> <div id="info_f"></div> <div id="info_g"></div> <div id="info_c"></div> <div id="info_d"></div> <div id="info_e"></div> <div id="info_h"></div> <div id="info_i"></div> </div> <div id="nav"> <h1>应用的一个实例</h1> <ul> <li><a href="http://www.leotheme.cn" target="_blank"><span></span>首页</a></li> <li><a href="http://www.leotheme.cn/about" target="_blank"><span></span>关于我</a></li> <li><a href="http://www.leotheme.cn/guestbook" target="_blank"><span></span>给我留言</a></li> <li><a href="http://www.leotheme.cn/photo" target="_blank"><span></span>我的相册</a></li> <li><a href="http://www.leotheme.cn/themes" target="_blank"><span></span>我的主题</a></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

CSS 三角形

22

09

一种简单的主题切换方法

Await / 前端交互 / 2008/09/22 12:13

上次在zEus那看到一篇关于切换主题的文章：“WordPress 表情插件和主题切换插件 ”就一直在思考是不是有种更简单的方法。好像目前的方法都是通过一个叫Theme Switcher的插件来实现。对于这个插件的使用方法zEus作了说明，在这不再讲了，现在要讲的是这个“简单的方法”。
我想大家都2.6版本里的主题预览记忆很深吧，它实现了直接预览，是不是很方便。
继续阅读

demo Theme WP相关

18

09

jquery基础教程四[css的操作之css,height和width]

Await / 前端交互 / 2008/09/18 9:10

首先我们看看 css(key, value) 和 css(name)
css(key, value)

在所有匹配的元素中，设置一个样式属性的值。

css(name)

访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。

继续阅读

height jQuery width 前端交互

17

09

jquery基础教程三[渐变效果]

Await / 前端交互 / 2008/09/17 10:16

我们来看看jquery是如何实现淡入淡出效果的.

fadeOut(speed,callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
继续阅读

fadein fadeout fadeto jQuery 前端交互

15

09

jquery基础教程二[伸缩、隔行变色...]

Await / 前端交互 / 2008/09/15 10:34

在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子
Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行]

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>可伸缩块</title> <style type="text/css"> p,div{margin:0;padding:0; font-size: 12px;} .box {float: left; margin-left: 20px; dipaly:inline;} .title1,.title2,.title3{width:280px;background:#cf0;height:20px;line-height: 20px;border:1px solid #aaa; text-align:center;} .content1,.content2,.content3{width:260px;height:350px;border:1px solid #aaa;border-top:none;padding: 10px;} </style> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".title1").click(function(){$(".content1").slideDown("slow");}); $(".title2").click(function(){$(".content2").slideUp("slow");}); $(".title3").click(function(){$(".content3").slideToggle("slow");}); }); </script> </head> <body> <div class="box"> <p class="title1">slideDown</p> <div class="content1"> 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div></div> <div class="box"> <p class="title2">slideUp</p> <div class="content2"> 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> <div class="box"> <p class="title3">slideToggle</p> <div class="content3"> 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

继续阅读

jQuery WP相关前端交互评论隔行变色

11

09

jquery基础教程一[click,addClass,show,hide]

Await / 前端交互 / 2008/09/11 12:05

原创内容—转载请说明出处.

jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资料就不在这说了。因为这不是我要说的。我只想说一些实际的东西，也就是我们需要的东西。
先看一个最简的例子：Hello World
继续阅读

jQuery WP相关前端交互

09