JQUERY搜索框提示效果

星期二, 09. 1. 2009  –  Category: Jquery, 代码人生, 前端技术

搜索框提示效果，输入框获取焦点，则原提示关键字消失，失去焦点，还原原关键字，当然是在没有输入用户关键字的前提下！

JQUERY 层-隐藏-显示 效果

星期五, 08. 28. 2009  –  Category: Jquery, 前端技术

JQUERY 层-隐藏-显示 效果
可以应用与文章列表摘要模式-列表模式切换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple JQuery Collapsing menu</title>
</head>
<body>
<script type="text/javascript">
$(function()
{
var i = 1;
$("#mostrar").click(function(event) {
if(i%2 == 1)
$("#mostrar").html("简洁模式");
else
$("#mostrar").html("摘要模式");
event.preventDefault();
$(".box2").slideToggle();
i++;
});
});
</script>
<style type="text/css">
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
h2 { font-size:14px;}
.itembox { border:#99CCCC solid 1px; margin-bottom:10px; padding:10px;}
</style>
<a href="#" id="mostrar">摘要模式</a>
<div id="content" style="width:70%">
<div class="news-list">
<div [...]

Jquery 获取元素数量 length

星期二, 08. 25. 2009  –  Category: Jquery, 代码人生, 前端技术

这个示例会输出 id=”nav” UL 下的 li 元素的数量(length)

<!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>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
list 1:
<ul id="nav">
<li>ssss</li>
<li>aaaaa</li>
<li>ddddd</li>
<li>eeeee</li>
</ul>
list2:
<ul id="nav2">
<li>sssss</li>
<li>aaaaa</li>
<li>ddddd</li>
<li>eeeee</li>
</ul>
<a href="#" id="test" onClick="jq()">jQuery</a>
<script>
function jq(){
alert($("#nav li").length);
}
</script>
</body>
</html>

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

JQuery 新闻头条淡入淡出效果

星期四, 08. 20. 2009  –  Category: 代码人生, 前端技术

新闻头条淡入淡出效果

<!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=UTF-8">
<title></title>
<style>
a { color:#CCCCCC}
li { list-style:none;}
span { padding-right:20px; color:#FFFFFF; font-weight:bold;}
</style>
</head>
<body>
<div id="ticker" style="padding:10px; background:#333333">
<!– START TICKER VER 1.0.1 –>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* =========================================================
// jquery.innerfade.js
// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail: [...]

jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果

星期四, 08. 20. 2009  –  Category: Jquery, 代码人生, 前端技术

需要将产品图片或相片等实现Javascript图片滑动旋转Animation效果，能自动播放图片或鼠标控制播放图片，图片固定的滑动在指定的区域内，类似动画播放，使用jQuery插件Step Carousel Viewer可实现该功能，而且使用简单，Step Carousel Viewer中文大概是按步旋转阅读，意思是说每张图片一张一张旋转阅读，效果：

<script type="text/javascript">
// For instructions how how to modify go to this URL
// http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
stepcarousel.setup({
galleryid: ‘mygallery’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:2000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: [’../317e0s5.gif’, -5, 80], [...]

ThickBox – 网页图片弹出展示程序

星期四, 07. 16. 2009  –  Category: 前端技术

ThickBox 3.1
Thickbox 是一个基于 jQuery 类库的 网页 UI 对话框 拓展工具，它用户显示单个图片，图片组，AJAX 请求内容或链接内容。
示例：http://jquery.com/demo/thickbox/#examples  （复制到你的浏览器）
所有资源均可以在这儿下载 http://jquery.com/demo/thickbox/
概述

thickbox 基于超轻量级 JQUERY 类库，JQUERY 压缩后为20K，解压后58K。
THICKBOX JavaScript 程序 和 CSS 代码只有15K（如果使用 compressed.js 只有10K），CSS 文件可以根据需求自行修改。
thickbox 可以自动调整尺寸大于浏览器窗口的图片。
thickbox 功能多样，可以用于 图片， iframe框架，内嵌的内容，AJAX 请求。
ThickBox will hide form elements in Windows IE 6.
ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片、覆盖层, 或关闭链接能移除 ThickBox.
ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀.
thickbox 可以通过 <a>标签、 输入框（特别是按钮）和文本域(图象映象–图片的可点区域、图片多个链接区）

怎么使用 thickbox
为了让thickbox能够正确的运行和展示，使用之前先得确认网页符合 thickbox 要求的文档定义类型（DTD）。
1.thickbox基于JQUERY [...]

关于站长

姚迎迎，生于 1985年3月2日， 江苏大丰人士 。修行于福州大学软件学院

Google AD

最近文章

标签云

ajax Apache apt-get CSS Debian dedecms error firefox HeidiSQL htaccess html IE6 javascript jQuery lamp linux mod_rewrite mysql mysql5 MySQL Front php phplist phpmyadmin postfix thinkphp Ubuntu ubuntu server wordpress 京腔 代码 十年 年轻的时候很傻很天真 悉尼歌剧院 数据库 新贵妃醉酒 李玉刚 歌词 歌词翻译 盛世霓裳 示例 翻译 芳华绝代 视频 贵妃醉酒 音乐

Google 广告