分类存档: jQuery

jquery 元素向左滑动

作者: yangzhiyong 日期: 2012/01/10 没有评论 | 51 views

前几天做了一款基于jquery的滑动特效，也是简单实用，在这里把代码,演示地址和下载地址贴出来。
演示地址：http://www.wodeblog.com/jquery/huadong/
代码：
jquery-1.5.1.js和下面的代码

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>左右滑动特效</title>
</head>
<style>
.kuang {
width:750px;
height:60px;
padding:5px 0;
border:1px solid #000;
margin-top:200px;
position: relative;
}
.fkuang {
width:9999px;
overflow:auto;
height:60px;
position:relative;
}
.sunkuang {
width:150px;
height:60px;
position:relative;
background:#999;
float:left;
text-align:center;
line-height:60px;
cursor:pointer;
filter:Alpha(opacity=80);
opacity:0.80;
}
.sunspan2{ width:10px; height:60px; float:left; background:#fff;}
.sunspan1{ width:140px; height:60px; float:left; border:none;}
</style>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
var i = 0;
function scrollpic(){
i++;
var $wrapper = $('.kuang').css('overflow', 'hidden'),
$items = $('.kuang .sunkuang'),
singleWidth = $items.filter("div:first").outerWidth(), //find是对它的子集操作，filter是对自身集合元素筛选,:first寻找第一个元素
innersWidth = $wrapper.innerWidth(),//innerWidth() 返回第一个匹配元素的内部宽度（不包含边框）,outerWidth()返回第一个匹配元素的外部宽度值 (包括边框)
visible = Math.ceil(innersWidth / singleWidth);
page = Math.ceil($items.length / visible);
if(i==1){
xnum = visible-$items.length % visible;
tnum = $items.length;

}
if (($items.length % visible) != 0&&i==1) {
$items.filter(':last').after($items.slice(0, tnum).clone());
$items = $('.kuang .sunkuang');
}
var twidth=parseInt(tnum*singleWidth);
var x=$("#kuangs").position().left;
var y=parseInt(Math.abs(x));
if(y==twidth){
$("#kuangs").css("left",0);
}
$("#kuangs:not(:animated)").animate({left:"-=150px"}, "500");
setTimeout("scrollpic()",1000);
}
</script>
<body onLoad="scrollpic()">
<center>
<div class="kuang">
<div class="fkuang" id="kuangs">
<div class="sunkuang"><span class="sunspan1">1</span><span class="sunspan2"></span></div>
<div class="sunkuang"><span class="sunspan1">2</span><span class="sunspan2"></span></div>
<div class="sunkuang"><span class="sunspan1">3</span><span class="sunspan2"></span></div>
<div class="sunkuang"><span class="sunspan1">4</span><span class="sunspan2"></span></div>
<div class="sunkuang"><span class="sunspan1">5</span><span class="sunspan2"></span></div>
<div class="sunkuang"><span class="sunspan1">6</span><span class="sunspan2"></span></div>
</div>
</div>
</center>
</body>
</html>

下载地址：http://www.wodeblog.com/jquery/huadong.zip

jquery简单的幻灯片

作者: yangzhiyong 日期: 2012/01/09 没有评论 | 85 views

今天做了一款基于jquery的幻灯片，虽然简单但是很实用，在这里把代码,演示地址和下载地址贴出来。
演示地址： http://www.wodeblog.com/jquery/huandengpian
代码：jquery-1.5.1.js
css样式：

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

@charset "utf-8";
/* CSS Document */
html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,field set,legend,input,button,text area,p,block quote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}field set,img{border:0;}address,caption,cite,code,den,em,strong,th,var,opt group{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,text area,select,opt group,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,text area,select{*font-size:100%;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}* html .clearfix{zoom:1;}*:first-child+html .clearfix{zoom:1;}.clear{clear:both;}:focus{outline:0;}font{font-size:12px;}

li {
list-style-type:none;
}
.fkuangs{ width:960px; margin:auto 0; padding:0;}
.kuang {
width:960px;
height:auto; margin:auto 0; position:relative;
}
.hdppic {
width:960px;
height:330px;
overflow:hidden;
}
.hdppic ul{
width:9999px;
height:330px; float:left;
overflow:auto;position:relative; right:0;
}
.hdppic ul li{
width:960px;
height:330px;
float:left;
background:#CCC;
line-height:330px;
text-align:center;
}
.hdppics {
width:960px;
height:80px;
margin-top:20px;
}
.hdppics ul {
width:960px;
height:80px;
}
.hdppics ul li.l {
width:180px;
height:80px;
float:left;
background:#CCC;
line-height:80px;
text-align:center;
filter:Alpha(opacity=60);
opacity:0.60; cursor:pointer;
}
.hdppics ul li.r {
width:15px;
height:80px;
float:left;
background:#fff;
}

jquery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

html模板：

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

下载地址：www.wodeblog.com/jquery/huandengpian.zip

对php100的第112讲（双击编辑异步更新）做下改进

作者: yangzhiyong 日期: 2012/01/01 没有评论 | 79 views

张恩铭老师在php100第112课中讲到双击编辑异步更新，讲得详细到位，但是美中不足。
不足的地方是当对一个选框重复双击的时候会把上次给的

1	<input id='edit"+infd+inid+"' value='"+inval+"'>

再次付给选框就变成了

1	<input id='edit"+infd+inid+"' value='<input id='edit"+infd+inid+"' value='"+inval+"'>'>

这样不仅容易使我们的更新出错还影响美观，今天再遇到这个问题的时候我做了一点修改就可以解决这个问题：在对选框赋予html值的时候加入这样两行代码做下判断就可以了

1
2
3
4

var indexval=inval.indexOf("<input");
if(indexval==-1){
$(this).html("<input id='edit"+infd+inid+"' value='"+inval+"'>");
}

下面贴出详细的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).ready(function(){
$("tbody>tr>td[fd]").dblclick(function(){
var inval=$(this).html();
var infd=$(this).attr("fd");
var inid =$(this).parents().attr("id");
var indexval=inval.indexOf("<input");
if(indexval==-1){
$(this).html("<input id='edit"+infd+inid+"' value='"+inval+"'>");
}
$("#edit"+infd+inid).focus().live("blur",function(){
var editval=trim($(this).val());
$(this).parents("td").html(editval);
$.post("__APP__/admin/editmenuxx",{"id":inid,"fd":infd,"val":editval});//,function(data){alert(data);}
});
});
});
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}

制作外链工具原理

作者: yangzhiyong 日期: 2011/12/28 2 条评论 | 225 views

应单位需要做了一款外链工具，以加强网站的seo。
我在这里记录一下我做这款外链工具的程序原理。
基本原理：使用ajax结合php的技术远程抓取文件，从而达到运行该文件刷链的目的。
接下来记录一下具体是怎么做的:
结构：我们需要这样几个文件：jquery-1.5.1.js，index.php，urls.php，fun.php，backdata.php。
其中，jquery-1.5.1.js大家都知道（你懂的，下载一个就行了），这里就不用多说了
index.php是工具执行的索引程序
urls.php要刷链的网址都放在这里面
fun.ph扩展函数
backdata.php是ajax的请求数据地址
下面，贴出代码：
index.php：

<?php
header("Content-type: text/html; charset=utf-8");
?>
<style type="text/css">
.box{ height:25px; width:550px; overflow:hidden;font-size:12px;}
.num{height:25px; width:50px; float:left; overflow:hidden; line-height:25px; text-align:center;}
.box_url{ height:25px; width:450px; float:left; overflow:hidden; line-height:25px; text-align:left;}
.box_text{ height:25px; width:50px; float:left; overflow:hidden; line-height:25px; text-align:right;}
</style>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<?php
require('fun.php');//调用扩展函数
require('urls.php');//调用需要刷链的网址
$num=count($urls); //刷链网址个数
$yuming=empty($_GET['yuming'])?'':$_GET['yuming'];//需要刷的域名
$page=empty($_GET['page'])?'':$_GET['page'];//页码
$cishu=10;//每页刷链条数
?>

<center>
<?php for ($i=0;$i<$cishu;$i++){?>
<div class="box" id="link<?php echo $i;?>">请等待...</div>
<?php }?>
</center>

<?php
if($page*$cishu>=$num+$cishu)$newurl=1;//判断是否将所有网址都刷过
else $newurl=0;
if(isset($yuming)&&!empty($yuming)){
if(isset($page)){
if(empty($page))$page='1';
if($newurl==1)echo "<SCRIPT language=JavaScript>this.location.href='?yuming=".$yuming."&page=1';</SCRIPT>";//如果所有网址都循环刷了一遍就从头开始
else{
$string='';
?>

<script type="text/javascript">
$(document).ready(function(){
<?php
for ($i=0;$i<$cishu;$i++){
$urlnum=($page-1)*$cishu+$i+1;
$the_url=str_replace('{$url}',$yuming,$urls[$urlnum]);//替换域名，得到真实网址
?>

$.post("backdata.php",{url:<?php echo '"'.$the_url.'"';?>,num:<?php echo $urlnum;?>},function(data){
$("#link<?php echo $i;?>").html(data);
});
<?php }?>
});
</script>

<?php
}
}
else exit('非法进入');
}
else exit('非法进入');
if($newurl==1){//如果所有网址都循环刷了一遍就把网址的顺序打乱一遍
shuffle($urls);
$urlsname='urls';
file_put_contents($urlsname.'.php','<?php $'.$urlsname.'='.var_export($urls, true).';?>');
}
$page=$page+1;
?>

<script type="text/javascript">
$(document).ready(function(){
/*自定义倒计时10秒*/
var t = 10;//倒计时设置时间
$("#time").html(t);
function getTimes(){
if(t>0){
t = t - 1;
$("#time").html(t);
}
if(t==0)this.location.href='?yuming=<?php echo $yuming;?>&page=<?php echo $page;?>';
}
setInterval(getTimes,1000);
});
</script>

<center>请不要关闭窗口，<span id='time' style="color:#F00;"></span> 秒后自动跳入下一页</center>

urls.php里面的网址比较多，我贴出20个就是了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php $urls=array (
0 => 'http://tool.liehuo.net/pr/index.php?url={$url}',
1 => 'http://www.oumuo.cn/tool.asp?weburl={$url}',
2 => 'http://dict.soso.com/q?sc=dict&w={$url}',
3 => 'http://modo520.cn/dh/alexa/?domain={$url}&chkall=on&alexa=1&google=1&baidu=1&msn=1&yahoo=1&links=1&sina=1&do163=1&sohu=1&qq=1&zhongsou=1&uptimebot=1&whois=1&googlerank=1',
4 => 'http://www.emroom.com/alexa.asp?domain={$url}&chkall=on&googlerank=1&google=1&baidu=1&msn=1&yahoo=1&yisou=1&alexa=1&sina=1&sohu=1&do163=1&qq=1&whois=1&uptimebot=1&isou=1&links=1',
5 => 'http://www.8d.cn/s?wd={$url}&domain=8d.cn&pid=sc_nr_10032&s=R&tag=',
6 => 'http://tool.lply.com/?url={$url}',
7 => 'http://post.soso.com/sobar.q?op=searchpost&kw={$url}&pid=',
8 => 'http://www.dss.cn/chajian/pr/default.asp?domain={$url}&chkall=on&googlerank=1&google=1&baidu=1&msn=1&yahoo=1&yisou=1&links=1&sina=1&sohu=1&do163=1&qq=1&zhongsou=1&uptimebot=1&whois=1&alexa=1&ip=1&keys=1',
9 => 'http://look.515888.net/tools/baiducha/index.asp?wd={$url}&long=1',
10 => 'http://www.0668.tv/pr/?domain={$url}&Submit=%B2%E9%D1%AF&chkall=on&googlerank=1&google=1&baidu=1&msn=1&yahoo=1&yisou=1&links=1&sina=1&sohu=1&do163=1&qq=1&zhongsou=1&uptimebot=1&whois=1&alexa=1&ip=1&keys=1',
11 => 'http://alexa.3m2n.com/?url={$url}',
12 => 'http://www.ok365.com/search.html?k=site%3A{$url}&area=564&s=&e=',
13 => 'http://www.vkbbs.com/alexa.asp?url={$url}',
14 => 'http://cnweb.search.live.com/images/results.aspx?q={$url}&FORM=BIRE',
15 => 'http://www.robtex.com/dns/{$url}.html',
16 => 'http://tool.163k.com/PR/?domain={$url}&chkall=on&googlerank=1&google=1&baidu=1&zhongsou=1&yahoo=1&links=1&do163=1&sohu=1&qq=1&alexa=1&whois=1',
17 => 'http://www.pqshow.com/alexa/Index.asp?url={$url}',
18 => 'http://www.ctbuxiu.com/alexa/Index.asp?url={$url}',
19 => 'http://www.webchar.com/alexa/?domain={$url}&Submit=%B2%E9%D1%AF&chkall=on&googlerank=1&google=1&baidu=1&zhongsou=1&yahoo=1&links=1&do163=1&sohu=1&qq=1&alexa=1&whois=1',
20 => 'http://www.all-list.cn/tools/indexed.do?domain={$url}'
?>

fun.php代码：

1
2
3
4
5
6
7
8
9
10
11

<?php
function curl_exe($url,$print='1'){
$curl = curl_init(); //初始化一个 cURL 对象
curl_setopt($curl, CURLOPT_URL, $url);//设置你需要抓取的URL
curl_setopt($curl, CURLOPT_RETURNTRANSFER, $print);//设置cURL 参数，设置0，显示在网页中，设置1，不显示在网页中。
//综上我们就完成其基础的配置，现在执行抓取了。
$data = curl_exec($curl); //运行cURL，请求网页
curl_close($curl); //关闭URL请求
return $data;
}
?>

backdata.php代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
require('fun.php');//调用扩展函数
$the_url=$_POST['url'];
$num=$_POST['num'];
$string='';
$string .= '<div class="num">['.$num.']</div><div class="box_url"><a href='."$the_url".' target="_blank">'.$the_url.'</a></div>';
$data=curl_exe($the_url);//抓取文件，运行网址
if(strlen($data)>100)$string .= '<div class="box_text">ok</div>';
else{
$string .= '<div class="box_text">false</div>';
}
echo $string;
?>

演示地址：http://www.pk137.com:99/?yuming=58w.cn&page=1

jQuery简单的淡入淡出效果

作者: yangzhiyong 日期: 2011/12/26 没有评论 | 40 views

今天终于做出了自己的第一个jQuery特效，心情是多云转晴啊。这得感谢小桌给了我这个锻炼的机会，呵呵。
它实现的是一个简单的淡入淡出的效果，如图：

jquery淡入淡出

在这里把代码给大家贴出来

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!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>jqery</title>
<META http-equiv=X-UA-Compatible content=IE=EmulateIE7>
</head>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<style type="text/css">
.box{ margin:auto 0; width:302px; height:auto; background:#CCC; text-align:left;}
.box_son{ float:left;width:100px; height:100px; background:#999; margin-top:1px; text-align:center; line-height:100px; overflow:visible;_overflow:hidden; }
.box_son_son{ float:left;width:0; height:100px; background:#567FD0; position:relative; left:101px; top:-100px;filter:Alpha(opacity=36); opacity:0.36; text-align:center; line-height:100px; text-align:center;display:none;}
.test{ width:100px; height:100px; }
.ml{ margin-left:1px;}
span{float:left;width:100px; height:100px; cursor: pointer;}
/*padding:1px;/FF;padding:1px\9;/IE8;*padding:1px;/IE7;_padding:1px;/IE6*/
{padding:1px;padding:10px;}
</style>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(".box_son span").hover(function(){
$(this).next(".box_son_son:not(:animated)").animate({opacity: "show", width: "+=201px"}, "slow",function(){
$(".box_son_son").css({ opacity: 0.36 });
});
});
$(".box_son span").mouseout(function(){
$(this).next(".box_son_son").animate({opacity: "hide", width: "0"}, "500");
});
});
</script>
<center>
<div class="box">
<div class="box_son"><span>图</span><div class="box_son_son">jquery</div></div>
<div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div>
<div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div>

<div class="box_son"><span>图</span><div class="box_son_son">jquery</div></div>
<div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div>
<div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div>

</div>
</center>
</body>
</html>

php个人工作经验以及生活体会博客

php工作,生活