Javascript | 草窟主人 | 姚迎迎’s BLOG

JavaScript Runcode

星期三, 02. 3. 2010 – Category: 前端技术

代码预览器

<HTML>
<HEAD>
<TITLE>代码预览器</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=JavaScript>
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",50);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
[...]

Javascript 获取 URL 参数

星期天, 09. 20. 2009 – Category: 前端技术

function getArgs( ) {
var args = new Object( );
var query = location.search.substring(1); // Get query string
var pairs = query.split("&"); [...]

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中文大概是按步旋转阅读，意思是说每张图片一张一张旋转阅读，效果：

JavaScript可移动弹出层

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

点击按钮弹出层，兼容FF/IE7的可移动弹出层，弹出层可以移动，可以删除。(点击按钮，页面变灰，处于失效状态) 并把所有select标签捉住–将select设为隐藏（也可以隐藏页面所以元素），关闭弹出层select再显示出来，代码里有注释。（需要不通的效果可以根据自己需要修改）

<!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>兼容FF/IE的可移动弹出层</title><style type="text/css">
.button1 {background: #ebebeb;
border: 1px solid #888888;
color:#333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:23px;
cursor:pointer }
</style>
<script language="javascript">
function alertWin(title, msg, w, h){
var s=document.getElementsByTagName("select"); //————–把所有select标签捉住
for(var j=0;j<s.length;j++){s[j].style.display="none";} //————–设为不显示，再进行下面操作
var titleheight = "20px"; // 提示窗口标题高度
var bordercolor = "#666699"; // 提示窗口的边框颜色
var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色
var titlebgcolor = "#1d5798"; // 提示窗口的标题背景色
var bgcolor [...]

JavaScript图片横向平滑切换效果

星期四, 08. 6. 2009 – Category: 前端技术

图片横向轮转（平滑）效果：
图片左右翻转……

HTML 代码：

<!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>ImagesRoll</title>
<link rel="stylesheet" href="css/imagesroll.css" />
</head>
<body>
<div style="text-align:center;">
<script language="JavaScript" type="text/javascript" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js/effects.js"></script>
<script language="JavaScript" type="text/javascript" src="js/glider.js"></script>
<div class="imagesroll" id="my-glider">
<div class="scroller">
<div class="content">
<div class="section" id="section1">
<p><a href="#" target="_blank"><img [...]

javascript+css 新闻滑轮显示

星期二, 07. 21. 2009 – Category: 代码人生, 前端技术

Javascript+CSS 经典效果, 新闻滑轮显示.
效果2张:

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>绝对经典的滑轮新闻显示 (javascript+css)</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">
<!–
*{padding:0; margin:0} img{border:0; display:block;} BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center } .dis { DISPLAY: block } .undis { DISPLAY: none } #cntR { WIDTH: [...]

关于站长

姚迎迎，生于 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 京腔代码十年年轻的时候很傻很天真悉尼歌剧院数据库新贵妃醉酒李玉刚歌词歌词翻译盛世霓裳示例翻译芳华绝代视频贵妃醉酒音乐

草窟主人