分类目录归档：前端技术

JQuery实现页面随滚动条滚动而动态加载内容的效果

分享一段网站找到的js特效代码，基于jquery

效果是类似cnbate.com，滚动条下拉到底部的时间，在下面自动加载新内容，就可以免分页了。不过cnbeta貌似不支持chrome

[codesyntax lang=”javascript”]

$(window).scroll(function(){
aa=parseInt($(document).height()); //获取文档的高度
oo=parseInt($(document).scrollTop()); //获取滚动条到顶部的垂直高度

if((aa-oo)<800){
if(!window.ia){
ia=1;
$.post("sys.php",{work:"hotels",s:('a=c+d 中国e+f&g>h')},function(msg){//用ajax即时获取伺服器上的资料
if(msg.length>0){
$("#index #tab5 #tab19").last().after(msg);
ia=null;
}else{
$("#index #div2").last().remove();
$("#index #tab5 #tab19").last().after('<span>Error:没有搜寻到任何结果,请尝试更换搜寻条件!</span>');
}
});
}
}
});

[/codesyntax]

jquery使用JSONP做跨域时，IE6的问题

今天一直在调一个bug,使用jquery的jsonp做跨域时，在ie6下面，每次点击按钮，$.getJSON提交都返回不到值。

后来用Fiddler分析后才发现$.getJSON提交后，http请求被中断了。

找了很久的问题，后来发现是因为按钮放置在<form>标签里面引起的，后把submit按钮放置在form标题外面，问题解决！

分析应该是form中断了$.getJSON发出的http请求，即使action=”javascript:void(0);” 也一样被中断

记录一下，方便以后的同行们碰到同样的问题““

jquery1.3+jquery ui 1.7.1

今天看了下jquery ui的更新情况，感觉还不错，挺漂亮的，

推荐有需要的朋友使用

http://jqueryui.com/download

用jquery打造仿开心网无刷新头像上传功能

代码修改于网络上一个asp.net的仿开心网头像

增加了php上传及生成头像功能，增加ajax无刷新上传

在ie7及firefox下通过测试

演示地址：http://www.ye55.com/thumb

妈的，困死我了。改了一个晚上。因为原来的js代码全部是在$(window).load(function())里执行的，但是我为了能方便ajax调用，把全部的js分成了三部分了。分三部分时老出问题，还好都改完了。现在还没优化代码，先不管了，以后要用的时候再优化一下。睡觉去了·····

代码下载

thumb.zip

上百个让你事半功倍的jquery插件

jQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说，这使得javascript更加有趣。

jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

一般网站上传头像部分会比较麻烦，如果完全程序控制的话，程序把上传的图片自动裁切成指定大小的头像的话，很有可能会破坏头像的整体美观。所以现在大多数web2.0网站都有用js或flash来实现头像的上传与选取！

现在用jquery加上jcrop插件的话，就可以非常简单的实现这些功能！如果再加上编写的一些ajax处理部分的话就基本上可以满足一般web2.0的使用要求了

PHP代码

<?php
if($_GET[‘act’]==‘saveThumb’){
$targ_w = $targ_h = 150;
$jpeg_quality = 100;
$src = $_POST[‘bigImage’];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST[‘x’],$_POST[‘y’],$targ_w,$targ_h,$_POST[‘w’],$_POST[‘h’]);
header(‘Content-type: image/jpeg’);
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}
?>
<html>
<head>
<script src="jquery.pack.js"></script>
<script src="jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
});
function goss(){
jQuery(‘#cropbox’).Jcrop({
onChange: showPreview,
onSelect: showPreview,
onSelect: updateCoords,
aspectRatio: 1
});
}
function updateCoords(c)
{
$(‘#x’).val(c.x);
$(‘#y’).val(c.y);
$(‘#w’).val(c.w);
$(‘#h’).val(c.h);
};
function checkCoords()
{
if ($(‘#x’).val()==”){
alert(‘请先上传头像然后选择裁切头像最后进行保存！’);
return false;
}
};
function showPreview(coords)
{
var rx = 150 / coords.w;
var ry = 150 / coords.h;
var w2=$("#bigwidth").val();
var h2=$("#bigheight").val();
jQuery(‘#preview’).css({
width: Math.round(rx * w2) + ‘px’,
height: Math.round(ry * h2) + ‘px’,
marginLeft: ‘-‘ + Math.round(rx * coords.x) + ‘px’,
marginTop: ‘-‘ + Math.round(ry * coords.y) + ‘px’
});
}
</script>
</head>
<body>
<?php
if($_GET[‘act’]==‘upload’){
if($_POST[‘upload’]==‘upload’){
$uploaddir =‘upload/’;
$uploadfile = $uploaddir . basename($_FILES[‘file’][‘name’]);
//print_r($_FILES[‘file’]);
//echo $uploadfile;
if (move_uploaded_file($_FILES[‘file’][‘tmp_name’], $uploadfile)) {
list($w, $h, $type, $attr)=getimagesize($uploadfile);
$str=”;
if($w>550){
$str="width:550px;";
}
if($h>550){
$str.=" height:550px;";
}
$str=emptyempty($str)?”:"style=’ ".$str." ‘";
$f1="<img src=’$uploadfile’ border=0 $str id=’cropbox’ >";
$f2="<img src=’$uploadfile’ border=0 $str id=’preview’ >";
echo ‘<script language="javascript">parent.$("#showBig").html("’.$f1.‘");parent.$("#showThumb").html("’.$f2.‘");parent.goss();parent.$("#bigwidth").val("’.$w.‘");parent.$("#bigheight").val("’.$h.‘");parent.$("#bigImage").val("’.$uploadfile.‘");</script>’;
}else {
echo "<script>alert(‘文件上传失败!’);</script>";
}
}
?>
<div style="margin:0px;font-size:12px;">
<FORM ACTION="?act=upload" METHOD=POST enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit" name="button" id="button" value="提交" />
<input name="upload" type="hidden" id="upload" value="upload" /><input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
</FORM>
</div>
<?php
exit;
}
?>
<div id="showBig" style="width:500px;height:500px;border:2px solid #E6E0CE;padding:3px;"></div>
<iframe style="width:500px;height:60px;padding:0px;" src="?act=upload"></iframe>
<div id="showThumb" style="width:152px;height:152px;border:1px solid #cccccc;padding:1px; overflow: hidden;"></div>
<div style="margin-top:20px;">
<form action="?act=saveThumb" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="bigImage" name="bigImage" />
<input type="hidden" id="bigwidth" name="bigwidth" />
<input type="hidden" id="bigheight" name="bigheight" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="保存用户头像" />
</form>
</div>
</body>
</html>

下载

jcrop.zip

自动从标题中提取关键词及ajax输入提示

公司网站正在新做的一个功能

考虑到最近blog里没写什么新的东西就把这段代码贴一下

test.html

XML/HTML代码

<html>
<head>
<title>自动从标题中提取关键词及ajax输入提示</title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding:20px;">
<form id="form1" name="form1" method="post" action="javascript:;">
标题：<input type="text" name="title" id="title" />
<label>
<input type="submit" name="button" id="button" value="提交" onclick="sendTitle()"/>
</label>
<input name="add" type="hidden" id="add" value="add" />
</form>
<br>
企业：<input type="text" name="key" id="key" onkeyup="showKey()"/>
<input type="hidden" name="keys" id="keys" value="">
<style>
#showBox{overflow:auto;width:250px;border:1px solid #eee;height:100px;margin-top:10px;}
div{padding:3px;}
</style>
<div id="showBox"></div>
<script type="text/javascript">
function sendTitle(){
if($("#title").val()==”){
alert("标题不能为空");
}else{
$.post("?index/test/sendtitle",{title:$("#title").val()},function(data){
var html="";
for(var i = 0; i < data.length; i++){
html+="<div>"+data[i].companyid+" | "+data[i].c_name+"</div>"
}
$("#showBox").html(html);
$("#key").val($("#title").val());
$("#keys").val($("#title").val());
},"json");
}
}
function showKey(){
var key=$("#key").val();
var keys=$("#keys").val();
if(key!=keys){
$.post("?index/test/sendtitle",{title:key},function(data){
var html="";
for(var i = 0; i < data.length; i++){
var ii2=i+1;
html+="<div>"+i2+" | "+data[i].c_name+"</div>"
}
$("#showBox").html(html);
$("#keys").val(key);
},"json");
}
}
</script>
</body>
</html>

php处理部分：

PHP代码

<?php
class box
{
public function __construct($db)
{
$this->db=$db;
}
//读出全部的企业关键词，用于处理标题，提取标题中对应有关的企业列表
public function readCompanyKey($cachetime=3600*24) //关键词库的缓存时间默认为一天
{
global $ROOT_PATH;
$file=$ROOT_PATH.‘/temp/CompanyKey.inc’;
if(!file_exists($file)){
$this->writeCompanyKey();
}else{
if(time()-filemtime($file)>$cachetime){
$this->writeCompanyKey();
}
}
$row=unserialize(file_get_contents($file));
return $row;
}
//缓存全部的企业关键词库
public function writeCompanyKey()
{
global $ROOT_PATH;
$file=$ROOT_PATH.‘/temp/CompanyKey.inc’;
$rs=$this->db->query("select * from `companykey`");
$row = $rs->fetchall(PDO::FETCH_ASSOC);
$content=serialize($row);
$fs=fopen($file,‘w’);
if(fwrite($fs, $content) === FALSE) {
echo "不能写入到文件!请注意temp文件夹的读写权限";
exit;
}else{
return true;
}
fclose($fs);
}
//从标题中通过关键词库获取相关的企业列表
public function getComapnyList($title)
{
$title=strtolower($title);
$key=$this->readCompanyKey();
//if(count($key)<=0){echo ‘出错，关键词不存在！’;exit;}
foreach($key as $v){
if(strpos($title,$v[‘key’])!==false){
$companyid[]=$v[‘companyid’];
//echo ‘1’;
}
}
//print_r($companyid);
if(count($companyid)>0){
$companyidArr=$this->listOrder($companyid); //对获取的企业按权重进行排序，去除重复的企业
foreach($companyidArr as $v){
$rs=$this->db->query("select `companyid`,`c_name` from `company` where `companyid`=’".$v."’ limit 1");
$row = $rs->fetchall(PDO::FETCH_ASSOC);
$list[]=$row[0];
}
return $list;
}else{
return false;
}
}
//排序算法，按标题中同一个关键词的出现个数对其所对应的企业进行排序，并去除重复企业
public function listOrder($arr){
if(!is_array($arr)){
return ”;
}
$count=count($arr);
$arr2=array_unique($arr);
foreach($arr2 as $k=>$v){
$i=0;
$i2=0;
for($l=$i2;$l<$count;$l++){
if($v==$arr[$l]){
$i++;
$s[$k]=$i;
//$s[$k][‘key’]=$i;
//$s[$k][‘var’]=$v;
}
$i2++;
}
}
arsort($s);
foreach($s as $k=>$v){
$row[]=$arr[$k];
}
return $row;
}
}
$box=new box($db1);
if($uri[2]==‘sendtitle’){
$title=$_POST[‘title’];
$list=$box->getComapnyList($title);
echo json_encode($list);
exit;
}
$smarty->display("index/test.html");
exit();
?>

效果

jqeruy打造滑动方框效果。仿照mootools!

项目需要用到滑动方框效果,好不容易到网上找到了二个可用的代码，。一个是prototype写的,另一个是mootools写的。

经过考虑。最后选的是mootools.

但项目主体使用的是jquery。二个类库同时使用时会产生冲突。整了一段时间后。mootools与项目其它部分整合得差不多了，但前几天突然发现mootools的动画效果既然与jquery的load()还有$.post等起冲突。。晕死。。白弄了。

后来下决心自己用jquery写一个滑动效果。。写了个把小时。感觉做出的效果跟mootools的滑动效果非常类似了。到现在这个问题才大功告成。

现在把代码贴出来。。在需要的朋友们可以借鉴借鉴。。嘿嘿

演示地址：http://www.ye55.com/test.html

下载地址：http://www.ye55.com/js_test1.rar (包含jquery类库)

关键js代码如下：

JavaScript代码

<SCRIPT LANGUAGE="JavaScript">
<!–
function BoxLeft(content){
var speed = 500;//滑动速度 0.1秒
var left=jq("#"+content).offset().left;
jq("div .scrolling-content").each(function(){
var thisleft=jq(this).offset().left-left;
jq(this).animate({left:thisleft},speed);
});
}
//–>
</SCRIPT>

用jquery做了一个ajax聊天室

现要只是实现了聊天室的基本聊天，ajax无刷新显示功能，会员功能等正在制作中。

演示地址：http://www.ye55.com/chat

下载地址：

chat.rar

数据库sql:

SQL代码

CREATE TABLE `message` (
`mid` int(20) NOT NULL auto_increment,
`msg` varchar(255) NOT NULL,
`user` varchar(50) NOT NULL,
`time` int(10) NOT NULL,
PRIMARY KEY (`mid`),
KEY `user` (`user`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=161 ;
CREATE TABLE `session` (
`id` varchar(32) NOT NULL,
`time` int(10) NOT NULL,
`timenow` int(10) NOT NULL,
`data` text NOT NULL,
`ip` varchar(15) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

现在程序开源，其它的像字体，字色，会员，在线列表等功能将陆续完成。

主要的三个页面的代码

1、 index.php

XML/HTML代码

<?php
//程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn
require_once("config.php");
?>
<!DOCTYPE htm 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">
<HEAD>
<TITLE> chat </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/global.css" rel="stylesheet" type="text/css" />
<SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>
<div id="main">
<div id="main_left" style="float:none;margin:0px auto;">
<div id="chat_m" style="width:500px;height:500px;border:#cccccc 1px solid;overflow:auto;">Loading…</div>
<div id="main_l_from">
<FORM METHOD=POST ACTION="javascript:void(0)">
昵称：<INPUT TYPE="text" NAME="user" id="user" size="8" value="<?=$_SESSION[‘user’]?>"> 内容:
<INPUT TYPE="text" NAME="message" id="message" style="width:250px;"> <INPUT TYPE="submit" name="sub" value="发言" id="sub">
</div></FORM>
</div>
<!–<div id="main_right">
<h2>在线会员</h2>
</div>—>
<SCRIPT LANGUAGE="JavaScript">
<!–
$("#chat_m").load("chat.php");
$("#sub").click(function(){
if($("#user").val()==”){
alert("昵称不能为空!");
}else if($("#message").val()==”){
alert("聊天内容不能为空!");
}else{
$.post("ajax.php?act=send",{user:$("#user").val(),msg:$("#message").val()},function(data){
if(data.msg===true){
showmsg();
$("#message").val("");
}else{
alert(data.msg);
}
},"json")
}
})
function sc()
{
var e=document.getElementById("chat_m")
ee.scrollTop=e.scrollHeight;
}
//var s=setInterval("sc()",200)
//–>
</SCRIPT>
<hr size=1>
<center>程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com <a href="http://www.phpd.cn">www.phpd.cn</a> </center>

2、chat.php

XML/HTML代码

<?php
require_once("config.php");
//程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn
$fist=$db->getfirst("select `mid` from `message` order by `mid` desc ");
$mid=$fist[‘mid’]-40; //初始化聊天记录条数
$mid=$mid<=0?0:$mid;
$mid=0;
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="contents"></div>
<INPUT TYPE="text" style="display:none" NAME="mid" id="hide_mid" value="<?=$mid?>">
<div id="end" style="width:400px;display:none;clear:both;"></div>
<SCRIPT LANGUAGE="JavaScript">
<!–
//alert($("#hide_mid").val());
function showmsg(){
mids=$("#hide_mid").val();
$.post("ajax.php?act=display",
{mid:mids},
function(data){
//alert(data.list[2].user);
$("#hide_mid").val(data.mid);
if(data.list!=0){
for(i=0;i<data.list.length;i++){
$("#contents").append("<br />"+data.list[i].user+"说: "+data.list[i].msg+" ["+data.list[i].time1+"]");
sc();
}
}
},"json");
}
function scrollWindow() {scroll(0, 100000); }
showmsg();
setInterval("showmsg()", 4000);
//–>
</SCRIPT>

3、ajax.php

PHP代码

<?php
require_once("config.php");
////程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn
//发信息
if($_GET[‘act’]==‘send’){
$msg=$_POST[‘msg’];
$user=$_POST[‘user’];
if(emptyempty($msg) || emptyempty($user)){
$return[‘msg’]=‘聊天内容或昵称不能为空’;
}else{
$time=time();
if($db->insert("insert into `message` (`msg`,`user`,`time`) values (‘$msg’,’$user’,’$time’)")){
$return[‘msg’]=true;
}else{
$return[‘msg’]="err";
}
}
echo json_encode($return);
}elseif($_GET[‘act’]==‘display’){
if(isset($_POST[‘mid’])){
$s=" where `mid`>’".$_POST[‘mid‘]."’ ";
}else{
$s=”;
}
$sql="select * from `message` $s order by `mid`";
$total=$db->getcount($sql);
if($total==0){
$a=0;
}else{
$result=$db->query($sql);
while($row=$db->getarray($result)){
$row[‘time1’]=date(‘Y-m-d H:i:s’,$row[‘time’]);
$a[]=$row;
$b=$row[‘mid’];
}
}
$ccc=array(‘list’=>$a,‘mid’=>$b);
echo json_encode($ccc);
}
?>

第一次使用json，汗，以前都没注意到用这么个数据类型

一直都是直接用ajax返回html片段，复杂点的就用xml。以前一直知道有json这种类型，一直没有使用过，但没想到用它做返回是这么的简单，晕了。。。下面是一段ajax发表评论的程序。。

采用的是jquery类。

代码如下：

js代码

XML/HTML代码

<SCRIPT LANGUAGE="JavaScript">
<!–
function send(){
var msg="";
if($("#s_content").val()==""){
alert(" 评论内容不能为空! ");
$("#s_content").focus();
return false;
}else if($("#s_secode").val()==”){
alert(" 验证码不能为空! ");
$("#s_secode").focus();
return false;
}
$.post("?idea/send_commend",
{ content:$("#s_content").val(),iid:<%$idea.iid%>,secode:$("#s_secode").val() },
function(data){
if(data.msg===true){
$("#s_content").val("");
$("#s_secode").val("");
alert("评论发布成功");
}else{
alert(data.msg);
}
$("#secode_box").html("<IMG SRC=‘includes/seccode.php’ onclick=\"javescript:recode()\" BORDER=‘0’ ALT=‘点击刷新’>");
},"json");
}
function recode(){
$("#secode_box").html("<IMG SRC=‘includes/seccode.php’ onclick=\"javescript:recode()\" BORDER=‘0’ ALT=‘点击刷新’>");
}
//–>
</SCRIPT>

因采用的是框架，?idea/send_commend 页面代码如下：

PHP代码

<?php
if(isset($_SESSION[‘member’])){
if($_POST[‘secode’]!=$_SESSION[‘code’]){
$msg[‘msg’]=‘验证码不正确!’;
}else{
if($idea->writeCommend($_POST[‘iid’],$_SESSION[‘member’][‘mid’],$_POST[‘content’],$_SESSION[‘member’][‘mid’])){
$msg[‘msg’]=true;
}else{
$msg[‘msg’]=‘评论出错！’;
}
}
}else{
$msg[‘msg’]=‘您没有登陆，请登陆后再发布评论!’;
}
echo json_encode($msg);
exit;
?>

℃冻番茄's Blog

记录平时工作、学习…

分类目录归档：前端技术

JQuery实现页面随滚动条滚动而动态加载内容的效果

jquery使用JSONP做跨域时，IE6的问题

jquery1.3+jquery ui 1.7.1

用jquery打造仿开心网无刷新头像上传功能

上百个让你事半功倍的jquery插件

File upload-文件上传

Form Validation-表单验证

Form – Select Box stuff-表单－选取框

Form Basics, Input Fields, Checkboxes etc.-表单的基本输入框，选择框等

Time, Date and Color Picker-时间、日期和颜色选取

Rating Plugins-投票插件

Search Plugins-搜索插件

Inline Edit & Editors-嵌入的编辑器，所见即所得的编辑器

Audio, Video, Flash, SVG, etc-音频，视频，flash，svg等

Photos/Images/Galleries-照片，图像，相册等

Google Map-google地图

Games-游戏

Tables, Grids etc.-表格，格子等

Charts, Presentation etc.-图表

Border, Corners, Background-边，角，背景

Text and Links-文本和链接

Tooltips-提示

Menus, Navigations-菜单，导航

Accordions, Slide and Toggle stuff-幻灯、翻转

Drag and Drop-拖拽

XML XSL JSON Feeds

Browserstuff-浏览器相关

Alert, Prompt, Confirm Windows-警告，提示，确认框

CSS-样式表单

DOM, Ajax and other jQuery plugins-DOm,ajax以及其他

jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

自动从标题中提取关键词及ajax输入提示

jqeruy打造滑动方框效果。仿照mootools!

用jquery做了一个ajax聊天室

第一次使用json，汗，以前都没注意到用这么个数据类型

2024年 4月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30