一般是javascript的内容
网上也有不少类似代码,因为不太符合期望,所以自己写了个简单的。
主要期望:
1 自动切换
2 点击后重新计算自动切换行为
主要是弥补点击后可能刚好到了切换,自动到下一张的毛病。
简化的HTML代码:
<div id="cover_images">
<div class="cover_show" cover="0"><a href="#"><img xx /></a></div>
<div class="cover_hide" cover="1"><a href="#"><img xx /></a></div>
<div class="cover_hide" cover="2"><a href="#"><img xx /></a></div>
<p class="cover_btns">
<a class="btn_cur" href="javascript:;" cover="0" onclick="show_cover(0);return false;"></a>
<a class="btn_gray" href="javascript:;" cover="1" onclick="show_cover(1);return false;"></a>
<a class="btn_gray" href="javascript:;" cover="2" onclick="show_cover(2);return false;"></a>
</p>
</div>
<div class="cover_show" cover="0"><a href="#"><img xx /></a></div>
<div class="cover_hide" cover="1"><a href="#"><img xx /></a></div>
<div class="cover_hide" cover="2"><a href="#"><img xx /></a></div>
<p class="cover_btns">
<a class="btn_cur" href="javascript:;" cover="0" onclick="show_cover(0);return false;"></a>
<a class="btn_gray" href="javascript:;" cover="1" onclick="show_cover(1);return false;"></a>
<a class="btn_gray" href="javascript:;" cover="2" onclick="show_cover(2);return false;"></a>
</p>
</div>
简单的,用cover属性记录对应关系,用css类来处理显示和隐藏的问题
脚本代码:
<script>
cur_index = 0;
total_index = 3;
time_interval = 4000;
myInterval = setInterval(show_next, time_interval);
function show_cover(index){
$.each($("#cover_images div"), function(i,val){
if ($(val).attr('cover') == index ) {
$(val).attr('class','cover_show');
}else{
$(val).attr('class','cover_hide');
}
});
$.each($("p.cover_btns a"), function(i,val){
if ($(val).attr('cover') == index ) {
$(val).attr('class','btn_cur');
}else{
$(val).attr('class','btn_gray');
}
});
cur_index = index;
clearInterval(myInterval);
myInterval = setInterval(show_next, time_interval);
}
function show_next(){
cur_index ++;
if (cur_index >= total_index) { cur_index = 0};
show_cover(cur_index);
}
</script>
cur_index = 0;
total_index = 3;
time_interval = 4000;
myInterval = setInterval(show_next, time_interval);
function show_cover(index){
$.each($("#cover_images div"), function(i,val){
if ($(val).attr('cover') == index ) {
$(val).attr('class','cover_show');
}else{
$(val).attr('class','cover_hide');
}
});
$.each($("p.cover_btns a"), function(i,val){
if ($(val).attr('cover') == index ) {
$(val).attr('class','btn_cur');
}else{
$(val).attr('class','btn_gray');
}
});
cur_index = index;
clearInterval(myInterval);
myInterval = setInterval(show_next, time_interval);
}
function show_next(){
cur_index ++;
if (cur_index >= total_index) { cur_index = 0};
show_cover(cur_index);
}
</script>
提供一个参考吧,没有切换效果
附带样式参考:
a.btn_cur{width: 23px;height: 29px;background: url('dot_c.png');display: inline-block;}
a.btn_gray{width: 23px;height: 29px;background: url('dot_g.png');display: inline-block;}
div.cover_show{display: block;}
div.cover_hide{display: none;}
p.cover_btns{text-align: center;display: block;}
a.btn_gray{width: 23px;height: 29px;background: url('dot_g.png');display: inline-block;}
div.cover_show{display: block;}
div.cover_hide{display: none;}
p.cover_btns{text-align: center;display: block;}
在用jquery的时候碰到这个问题,所以查了资料觉得不错,分享一下。
参考文档:http://www.malsup.com/jque...
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
$(document).ready(function() {
var options = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
参考文档:http://www.malsup.com/jque...
也许由于各种原因,你可能想清理自己的微博内容,内容太多了,没法一条一条删除,那就可以这样来清理门户:
1 先安装firefox,安装插件greasemonkey
2 到“我的微博”页面,选择greasemonkey,new user script
3 会出现新脚本对话框(第一次打开会问你用什么编辑器):
4 起名什么的就不用说了

5 选择ok后,添加如下代码:
6 然后,刷新页面就会自动开始删除了,自动刷新页面删除,直到全部删除完
7 然后取消此脚本即可,否则以后访问此页面继续会执行此脚本
附上delete_all_status.js的代码:
//code from www.aslibra.com
//by hqlulu@gmail.com
var total = 0;
var done = 0;
function delete_id( mid ){
$.ajax({
type: "POST",
url: "http://"+window.location.hostname+"/mblog/delete.php?rnd="+Math.random(),
dataType:"text",
data:{mid:mid},
success: function(obj){
done ++;
if( done == total){
window.location.reload();
}
}
});
}
function delete_start(){
if(typeof( $ ) != "undefined" ){
total = $("#feed_list li").length;
if(total){
$("#feed_list li").each(function(e){
delete_id($(this).attr("id").substr(4));
//return false;
});
}
}else{
//alert("wait for jquery");
setTimeout(delete_start, 500);
}
}
delete_start();
1 先安装firefox,安装插件greasemonkey
2 到“我的微博”页面,选择greasemonkey,new user script
3 会出现新脚本对话框(第一次打开会问你用什么编辑器):
4 起名什么的就不用说了
5 选择ok后,添加如下代码:
// ==UserScript==
// @name clearMe
// @namespace delete all status
// @include http://weibo.com/1967156965/profile
// ==/UserScript==
//注意,前面的注释别复制,复制后面的到你的编辑器注释后
var rnd = Math.random();
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.weibodi.com/static/js/jquery.min.js?v='+rnd;
head.appendChild(script);
var script2= document.createElement('script');
script2.type= 'text/javascript';
script2.src= 'http://www.weibodi.com/static/js/del_all_status.js?v='+rnd;
head.appendChild(script2);
// @name clearMe
// @namespace delete all status
// @include http://weibo.com/1967156965/profile
// ==/UserScript==
//注意,前面的注释别复制,复制后面的到你的编辑器注释后
var rnd = Math.random();
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.weibodi.com/static/js/jquery.min.js?v='+rnd;
head.appendChild(script);
var script2= document.createElement('script');
script2.type= 'text/javascript';
script2.src= 'http://www.weibodi.com/static/js/del_all_status.js?v='+rnd;
head.appendChild(script2);
6 然后,刷新页面就会自动开始删除了,自动刷新页面删除,直到全部删除完
7 然后取消此脚本即可,否则以后访问此页面继续会执行此脚本
附上delete_all_status.js的代码:
//code from www.aslibra.com
//by hqlulu@gmail.com
var total = 0;
var done = 0;
function delete_id( mid ){
$.ajax({
type: "POST",
url: "http://"+window.location.hostname+"/mblog/delete.php?rnd="+Math.random(),
dataType:"text",
data:{mid:mid},
success: function(obj){
done ++;
if( done == total){
window.location.reload();
}
}
});
}
function delete_start(){
if(typeof( $ ) != "undefined" ){
total = $("#feed_list li").length;
if(total){
$("#feed_list li").each(function(e){
delete_id($(this).attr("id").substr(4));
//return false;
});
}
}else{
//alert("wait for jquery");
setTimeout(delete_start, 500);
}
}
delete_start();
先看看服务器的文件:
upload.php 最简单的文件处理:
在adobeAir里面,建立一个上传的流程:
注:pictureFile是一个文件对象
upload.php 最简单的文件处理:
<?php
$tempFile = $_FILES['pic']['tmp_name'];
$fileName = $_FILES['pic']['name'];
$fileSize = $_FILES['pic']['size'];
move_uploaded_file($tempFile, $fileName);
echo "Uploaded $fileName";
$tempFile = $_FILES['pic']['tmp_name'];
$fileName = $_FILES['pic']['name'];
$fileSize = $_FILES['pic']['size'];
move_uploaded_file($tempFile, $fileName);
echo "Uploaded $fileName";
在adobeAir里面,建立一个上传的流程:
//文件上传
function callback_for_upload_progress(event) {
var loaded = event.bytesLoaded;
var total = event.bytesTotal;
var pct = Math.ceil( ( loaded / total ) * 100 );
air.trace('Uploaded ' + pct.toString() + '%');
}
function callback_for_upload_finish(event) {
air.trace(event.data); // output of server response to AIR dev console
}
function upload_file( pictureFile ){
var url = "http://www.aslibra.com/tmp/php/weibo/upload.php";
var variables = new air.URLVariables();
variables.op = 'upload';
// set params for http request
var tmpRequest = new air.URLRequest(url);
tmpRequest.method = air.URLRequestMethod.POST;
tmpRequest.contentType = 'multipart/form-data';
// assigning variables to request
tmpRequest.data = variables;
air.sendToURL(tmpRequest);
// attach events for displaying progress bar and upload complete
pictureFile.addEventListener(air.ProgressEvent.PROGRESS, callback_for_upload_progress);
pictureFile.addEventListener(air.DataEvent.UPLOAD_COMPLETE_DATA, callback_for_upload_finish);
// doing upload request to server
pictureFile.upload(tmpRequest, 'pic', false);
}
function callback_for_upload_progress(event) {
var loaded = event.bytesLoaded;
var total = event.bytesTotal;
var pct = Math.ceil( ( loaded / total ) * 100 );
air.trace('Uploaded ' + pct.toString() + '%');
}
function callback_for_upload_finish(event) {
air.trace(event.data); // output of server response to AIR dev console
}
function upload_file( pictureFile ){
var url = "http://www.aslibra.com/tmp/php/weibo/upload.php";
var variables = new air.URLVariables();
variables.op = 'upload';
// set params for http request
var tmpRequest = new air.URLRequest(url);
tmpRequest.method = air.URLRequestMethod.POST;
tmpRequest.contentType = 'multipart/form-data';
// assigning variables to request
tmpRequest.data = variables;
air.sendToURL(tmpRequest);
// attach events for displaying progress bar and upload complete
pictureFile.addEventListener(air.ProgressEvent.PROGRESS, callback_for_upload_progress);
pictureFile.addEventListener(air.DataEvent.UPLOAD_COMPLETE_DATA, callback_for_upload_finish);
// doing upload request to server
pictureFile.upload(tmpRequest, 'pic', false);
}
注:pictureFile是一个文件对象
一个小问题:如何把一个人的所有微博下载回来?
有几个方式是容易想到的:
1 一个一个链接另存为,用迅雷不行,没有身份验证信息
2 用php的curl写一个登录程序,自动登录,自动访问抓取,如果不能自动登录,则白费
3 建立一个代理服务器,按规则保留访问过的内容,自动打开要采集的一系列网页,稍微复杂了些
4 给页面添加脚本,执行脚本抓取,ajax功能很好用,jquery还顺便分析了内容,比php分析要简单
5 通过api访问
拿新浪微博为例,所有的方式都可行:
第一个是简单些,有人力又不嫌麻烦那就挺好。
第二个规则变化比较多,登录过程跳来跳去,跟着做也是没有问题的,况且登录流程没有验证,倒是可行的。
第三个要比较熟悉服务器规则才行,不太好实施。
第四个如果熟悉脚本,那不妨试试了,有跨域的问题,数据提交比较麻烦些。
第五个受api限制,比如只能读取200条。
阿权想说的是第四个,这个方式很有趣:
1 往页面添加脚本,改变页面的行为,也就是说你可以做任何一个事情,比如你在网页里面发出一个ajax请求下载同域名下的数据,这个很容易理解。
2 下载完成后,分析页面数据,jquery很方便
3 get方式传递出去你要的信息,这个不需要ajax也可以,比如放一个img什么的
这个最好的方式是 firefox加上Greasemonkey了,对页面新建一个脚本,然后就基本随便你操作了,比如:
my.js里面就是看你想做什么了,那可就是在当前域名下的操作了
有几个方式是容易想到的:
1 一个一个链接另存为,用迅雷不行,没有身份验证信息
2 用php的curl写一个登录程序,自动登录,自动访问抓取,如果不能自动登录,则白费
3 建立一个代理服务器,按规则保留访问过的内容,自动打开要采集的一系列网页,稍微复杂了些
4 给页面添加脚本,执行脚本抓取,ajax功能很好用,jquery还顺便分析了内容,比php分析要简单
5 通过api访问
拿新浪微博为例,所有的方式都可行:
第一个是简单些,有人力又不嫌麻烦那就挺好。
第二个规则变化比较多,登录过程跳来跳去,跟着做也是没有问题的,况且登录流程没有验证,倒是可行的。
第三个要比较熟悉服务器规则才行,不太好实施。
第四个如果熟悉脚本,那不妨试试了,有跨域的问题,数据提交比较麻烦些。
第五个受api限制,比如只能读取200条。
阿权想说的是第四个,这个方式很有趣:
1 往页面添加脚本,改变页面的行为,也就是说你可以做任何一个事情,比如你在网页里面发出一个ajax请求下载同域名下的数据,这个很容易理解。
2 下载完成后,分析页面数据,jquery很方便
3 get方式传递出去你要的信息,这个不需要ajax也可以,比如放一个img什么的
这个最好的方式是 firefox加上Greasemonkey了,对页面新建一个脚本,然后就基本随便你操作了,比如:
var rnd = Math.random();
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.aslibra.com/path/to/jquery.js?v='+rnd;
head.appendChild(script);
var script2= document.createElement('script');
script2.type= 'text/javascript';
script2.src= 'http://www.aslibra.com/path/to/my.js?v='+rnd;
head.appendChild(script2);
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.aslibra.com/path/to/jquery.js?v='+rnd;
head.appendChild(script);
var script2= document.createElement('script');
script2.type= 'text/javascript';
script2.src= 'http://www.aslibra.com/path/to/my.js?v='+rnd;
head.appendChild(script2);
my.js里面就是看你想做什么了,那可就是在当前域名下的操作了