彭成刚 - 博客园

[置顶]彭成刚博客园技术索引贴置顶!

摘要: 把常用的都放首页上来。。就不用每次都要翻页找半天了~~ppRoll4.js 最新滚动插件用json结构做的http://www.cnblogs.com/pengpengsay/archive/2010/04/21/1717440.html新做的焦点图js组件 focus1.js 用json传参http://www.cnblogs.com/pengpengsay/archive/2010/04/2...阅读全文

posted @ 2010-06-29 14:39 彭成刚阅读(108) 评论(0) 编辑

2012年4月16日

写了一个小焦点图组件就一个左右按钮一共就几行代码好用 sfocus

调用语句：sfocusBind("#sfocus","#btnLeft","#btnRight");

简简单单就是最简单的功能

下载地址 http://files.cnblogs.com/pengpengsay/jqueryStudy.rar

<!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 type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("#jQueryShowBtn").click(function(){$("#jQueryShowTxt").show();});
  $("#jQueryHideBtn").click(function(){$("#jQueryShowTxt").hide();});
  $("#jQueryToggleBtn").click(function(){$("#jQueryShowTxt").toggle();});
  $("#jQueryShowBtn2").click(function(){$("#jQueryShowTxt2").show("slow");});
  $("#jQueryHideBtn2").click(function(){$("#jQueryShowTxt2").hide("slow");});
  $("#jQueryToggleBtn2").click(function(){$("#jQueryShowTxt2").toggle("fast")});
  
 

});
</script>
</head>

<body>


<div>
<h3>show(speed, [callback])</h3>
<a id="jQueryShowBtn2">显示</a> <a id="jQueryHideBtn2">隐藏</a> <a id="jQueryToggleBtn2">转换</a> 
<a onclick="javascript:$('#jQueryShowTxt2').slideDown('fast');">slideDown</a>
<a onclick="javascript:$('#jQueryShowTxt2').slideUp('fast');">slideUp</a>
<a onclick="javascript:$('#jQueryShowTxt2').slideToggle('fast');">slideToggle</a>
<a onclick="javascript:$('#jQueryShowTxt2').fadeIn('fast');">fadeIn</a>
<a onclick="javascript:$('#jQueryShowTxt2').fadeOut('fast');">fadeOut</a>
<a onclick="javascript:$('#jQueryShowTxt2').fadeTo('fast',0.25);">fadeTo</a>
<a onclick="javascript:$('#jQueryShowTxt2').animate({width:'toggle'},'fast');">animate</a>




<div id="jQueryShowTxt2" style="display:none; background-color:#f2f2f2;">show(speed, [callback])<br />三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

</div>
</div>



<div>
<h3>jQuery.show()/jQuery.hide()/jQuery.toggle()</h3>
<a id="jQueryShowBtn">显示</a> <a id="jQueryHideBtn">隐藏</a> <a id="jQueryToggleBtn">转换</a> <div id="jQueryShowTxt" style="display:none; background-color:#f2f2f2;">jQuery.show()</div>
</div><br />
<br />
<br />

<script>
$(document).ready(function(){
	function sfocusBind(focusId,btnLeftId,btnRightId){
		$(focusId+" ul").width($(focusId+" ul li").width()*($(focusId+" ul li").length));
		var sfocusCurr = 0;
		$(btnRightId).click(function(){
			
			if(sfocusCurr < $(focusId+" ul li").length-1)
			{
				sfocusCurr++;
				$(focusId+" ul").animate({left:-sfocusCurr*$(focusId+" ul li").width()},"fast");
				}
			});
		$(btnLeftId).click(function(){
			if(sfocusCurr > 0)
			{
				sfocusCurr--;
				$(focusId+" ul").animate({left:-sfocusCurr*$(focusId+" ul li").width()},"fast");
				}
			});
	}
	sfocusBind("#sfocus","#btnLeft","#btnRight");
	sfocusBind("#sfocus2","#btnLeft2","#btnRight2");
});
</script>
<style>
.sfocusClass {overflow:hidden; position:absolute;}
.sfocusClass ul{margin:0; padding:0; border:0; position:relative;}
.sfocusClass ul li{list-style-type:none; float:left;}
.btnLeftClass {}
.bntRightClass {}
</style>

<table width="192" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="250">
    <div><a id="btnLeft" style="cursor:pointer;">向左</a> <a id="btnRight" style="cursor:pointer;">向右</a></div>
<div id="sfocus" class="sfocusClass" style="width:192px; height:192px;overflow:hidden;">
<ul>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>
</div>
    </td>
  </tr>
</table>
<table width="192" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="250"><div><a id="btnLeft2" style="cursor:pointer;">向左</a> <a id="btnRight2" style="cursor:pointer;">向右</a></div>
      <div id="sfocus2" class="sfocusClass" style="width:192px; height:192px;overflow:hidden;">
        <ul>
          <li><img src="1.jpg" /></li>
          <li><img src="2.jpg" /></li>
          <li><img src="3.jpg" /></li>
          <li><img src="1.jpg" /></li>
          <li><img src="2.jpg" /></li>
          <li><img src="3.jpg" /></li>
        </ul>
      </div></td>
  </tr>
</table>
</body>
</html>

posted @ 2012-04-16 15:40 彭成刚阅读(8) 评论(0) 编辑

2012年4月10日

iframe 大数据量传参本地能调用远程页面不存在跨域问题 js组件调用原理

不说废话先上代码

index.html (调用页面)

<SCRIPT type=text/javascript>
var liArr003 = "";
	liArr003 += "<li><a href=''><img src='http://domain/images/weibo/201204/1thumbs.jpg' data-large='http://domain/images/weibo/201204/1.jpg' alt='image01' /></a></li>";

	document.write('<iframe name="'+liArr003+'" src="http://localhost/iframe.html" width="100" height="100"></iframe>');
</SCRIPT>

iframe.html (js组件页面)

<script>
alert(window.name);
</script>

以上就是最后使用的代码

需求：为什么找这个代码？

一直以来，在页面里经常会用到幻灯或者是一些其他组件，但是一个前端的js组件往往由3部分组成，css部分、javascript部分，html部分。这样页面组件一多起来就容易出现css冲突或者是js冲突，而且使用起来相对普通编辑来讲就非常不方便了。而iframe的src地址是有长度限制，而且想用js去操控iframe，在本地操作的时候还会产生跨域的问题，页面呈现上不能显示和预览，非常的不方便。之前一直研究页面的get方式，但是这个方法有字符长度限制，如果超过一定字符，比如ie等浏览器就不支持了。然后又在跨域的方面研究了很长时间也是未果。

目的：在制作页面中把参数写好，js的iframe组件读取这些数据，把数据展现出来，比方说焦点图。

灵感来源：是看到了iframe自适应高度的一篇文章，里面讲的是跨域，本也想按照其思路，编写一个函数，但是看到核心内容就是window.name，这不就是标签中的name属性吗？所以还写什么js脚本，直接在iframe里面name标签里把数据写上就好了。

实际上就是： <iframe name="data" src="http://localhost/iframe.html" width="100" height="100"></iframe>

然后在iframe页面里面调用window.name 数据就出现了。这里的数据最大应该能达到3M左右，完全够使用了。

如果是跨域调用的话，可以加一些区别比如

最后小结：

明明一个属性解决的问题研究了一天，也是惭愧之极。但是探求真理的思路还是非常珍贵的。总算是又了却了一桩心事。

posted @ 2012-04-10 23:23 彭成刚阅读(35) 评论(0) 编辑

2012年3月30日

平面设计中的194种思维拓展

这些方法和思路很是简单，从事平面设计的你，是否会有这样或那样的困扰，特别是当思路被困住的时候，看看这些，或许会有新的想法

01、把它颠倒过来
02、把它摆平
03、把它缩小
04、把颜色变换一下
05、把它变为圆形
06、使它更大
07、把它变为正方形
08、使它更小
09、使它更长
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、变换为图解方式
82、使它成对
83、使它变更形式
84、使它倾斜
85、用图画说明你的故事
86、使它悬浮半空中
87、使用新广告媒体
90、把它由里外翻转
91、使它更强烈
92、把它向旁边转
93、使它更冷
94、摇动它
95、增加香味
96、把它遮蔽起来
97、变换气味
98、使它对称
99、把它除臭
100、使它不对称
101、将它向儿童诉求
102、反它隔开
103、将它向男士诉求
104、使它与其他相敌对
105、将它向妇女诉求
106、使它锐利
107、价钱更低
108、变更它的外形
109、抬高价格
110、要它绕一周
111、变更成份
112、把它框起来
113、增加新成份
114、把它卷成一圈
115、拧搓它
116、把它填满
117、使它透明
118、把它弄成空的
119、使它不透明
120、把它打开
121、用不同背景
122、把拼错
123、用不同环境
124、给它起我上绰号
125、使它富有魅力
126、把它封印起来
127、使用视觉效果
128、把它移转过来
129、使用另外的物料
130、把它捆包起来
131、增加人的趣味
132、把它集中起来
133、变更密度
134、把它推开
135、置于不同的货柜
136、使它成为交替的
137、变换包装
138、使它凝固起来
139、使密度增加
140、使它溶化
141、小型化
142、使成凝胶状
143、增加至最大限
144、使它软化
145、把它除掉
146、使它硬化
147、使它轻便
148、使蒸发变为汽化
149、使它可以折叠
150、加上抑扬顿挫
151、趋向偏激
152、使它更狭窄
153、如夏天炎热
154、使它更宽广
155、如冬天寒冷
156、使它更滑稽
157、使拟人化
158、使它成为被讽刺的
159、使它更暗
160、用简短的文案
161、使它发光
162、用冗长的文案
163、使它灼
164、发现第二种用途
165、使它更有营养
166、使它合成在一起
167、把它倒进瓶中
168、把它当作用具来卖
169、把它倒进罐中
170、使它清净
171、把它放进盒中
172、把它倒进壶中
173、把它倒进缸中
174、把它弄直
175、把它褶曲
176、把它缠起来
177、提升声誉
178、免费提供
179、以成本价出售
180、提供特价
181、增加慰藉的诉求
182、提供维护服务
183、运用不同的织法
184、使它变成香郁宜人
185、使它变成酸的
186、使它濡湿
187、使它脱水
188、使它干燥
189、把它冻起来
190、把它抛出去
191、使它无刺激性的
192、使它单纯化
193、使它具有刺激性的
194、把以上各项任意组合

posted @ 2012-03-30 11:38 彭成刚阅读(3) 评论(0) 编辑

2012年1月11日

js动画脚本编写原理最简单的那种

用到了透明度做的时候发现透明度的调节需要指定宽高，要不然透明度的数值就无效了。

<!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 language="javascript">
window.onload = function()
{
	var k = document.getElementById("k");
	k.onmouseover = function()
	{
		clearInterval(this.goObj);
		this.style.opacity=1;
		this.style.filter="alpha(opacity=100)";
	};
	k.onmouseout = function()
	{
		this.style.opacity=1;
		this.style.filter="alpha(opacity=100)";
		this.iOpacity = 1;
		goMove(this);
	};
};
function goMove(obj)
{
	obj.goObj = setInterval(function()
	{
		obj.iOpacity -= 0.01;
		obj.style.opacity=obj.iOpacity;
		obj.style.filter="alpha(opacity="+obj.iOpacity*100+")";
		if(obj.iOpacity < 0)
		{
			clearInterval(obj.goObj);
		}
	}
	,10);
}
</script>
</head>

<body>
<div id="k" style="background-color:#333333; height:300px; width:700px;"></div>
</body>
</html>

posted @ 2012-01-11 15:19 彭成刚阅读(28) 评论(0) 编辑

2011年5月1日

public string GetUrltoHtml(string Url)

摘自：提供一个网页抓取hao123手机号码归属地的例子 http://www.cnblogs.com/sufei/archive/2011/04/29/2033036.html

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Net;
using System.IO;
using System.Security.Cryptography.X509Certificates;
using System.Net.Security;
using System.Security.Cryptography;
using System.Xml;

namespace ccbText
{
    public partial class Form2 : Form
    {

        public Form2()
        {
            InitializeComponent();
        }

        private void Form2_Load(object sender, EventArgs e)
        {
        }
             这个方法在这里没有用到，大家可以做为参考
        /// <summary>
        /// 传入URL返回网页的html代码
        /// </summary>
        /// <param name="Url">URL</param>
        /// <returns></returns>
        public string GetUrltoHtml(string Url)
        {
            StringBuilder content = new StringBuilder();

            try
            {
                // 与指定URL创建HTTP请求
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Url);
                request.KeepAlive = false;
                // 获取对应HTTP请求的响应
                HttpWebResponse response = (HttpWebResponse)request.GetResponse();
                // 获取响应流
                Stream responseStream = response.GetResponseStream();
                // 对接响应流(以"GBK"字符集)
                StreamReader sReader = new StreamReader(responseStream, Encoding.GetEncoding("utf-8"));
                // 开始读取数据
                Char[] sReaderBuffer = new Char[256];
                int count = sReader.Read(sReaderBuffer, 0, 256);
                while (count > 0)
                {
                    String tempStr = new String(sReaderBuffer, 0, count);
                    content.Append(tempStr);
                    count = sReader.Read(sReaderBuffer, 0, 256);
                }
                // 读取结束
                sReader.Close();
            }
            catch (Exception)
            {
                content = new StringBuilder("Runtime Error");
            }

            return content.ToString();

        }


        /// <summary>
        /// 好123查询，符合下列规则也可使用
        /// 返回xml
        /// 需要顺序的节点:
        /// QueryResult（查询结果状态True,False）
        /// Province(所属省份)
        /// City（所属地区）
        /// Corp（服务商）
        /// Card（卡类型 GSM）
        /// AreaCode（区号）
        /// PostCode（邮编）
        /// </summary>
        /// <param name="url"></param>
        /// <param name="mobileNum"></param>
        /// <returns></returns>
        public static string[] GetInfoByxml(string url, string mobileNum)
        {
            try
            {
                XmlDocument xml = new XmlDocument();
                // xml.LoadXml("<?xml version='1.0' encoding='utf-8' ?><QueryResponse xmlns='http://api.showji.com/Locating/'><Mobile>15890636739</Mobile><QueryResult>True</QueryResult><Province>河南</Province><City>郑州</City><AreaCode>0371</AreaCode><PostCode>450000</PostCode><Corp>中国移动</Corp><Card>GSM</Card></QueryResponse>");
                xml.Load(string.Format(url, mobileNum));
                XmlNamespaceManager xmlNm = new XmlNamespaceManager(xml.NameTable);
                xmlNm.AddNamespace("content", "http://api.showji.com/Locating/");
                XmlNodeList nodes = xml.SelectNodes("//content:QueryResult|//content:Mobile|//content:Province|//content:City|//content:Corp|//content:Card|//content:AreaCode|//content:PostCode", xmlNm);
                if (nodes.Count == 8)
                {
                    if ("True".Equals(nodes[1].InnerText))
                    {

                        return new string[] { nodes[0].InnerText, nodes[2].InnerText + nodes[3].InnerText, nodes[6].InnerText + nodes[7].InnerText, nodes[4].InnerText, nodes[5].InnerText };
                    }
                }
                return new string[] { "FALSE" };
            }
            catch
            {
                return new string[] { "FALSE" };
            }
        }

        //调用方法查询数据
        private void button1_Click(object sender, EventArgs e)
        {
            foreach (string item in GetInfoByxml(" http://vip.showji.com/locating/?m={0}", txtMobile.Text.Trim()))
            {
                richTextBox1.Text += "__" + item;
            }
        }
    }
}

posted @ 2011-05-01 12:39 彭成刚阅读(125) 评论(0) 编辑

2010年12月11日

ListView.Demo04.多列样式.CH7

摘要: 代码阅读全文

posted @ 2010-12-11 12:09 彭成刚阅读(116) 评论(0) 编辑

2010年11月17日

Dreamweaver 正则表达式使用说明表

摘要: dw 正则表达式表　　　　　　　　字符　　　　匹配　　　　示例　　　　　　　　^　　　　输入或行的起始部分。　　　　^T 匹配“This good earth”中的“T”，但不匹配“Uncle Tom's Cabin”中的“T”。　　　　　　　　$　　　　输入或行的结尾部分。　　　　h$ 匹配&ldqu...阅读全文

posted @ 2010-11-17 09:40 彭成刚阅读(84) 评论(0) 编辑

2010年10月26日

C#操作 ini文件类【转】

摘要: 类的代码如下：[代码]调用方法：[代码]转自：http://www.cnblogs.com/mccj/archive/2010/08/31/1813894.html阅读全文

posted @ 2010-10-26 22:28 彭成刚阅读(84) 评论(0) 编辑

2010年10月25日

在代码里直接写label控件，winform C# 可以for循环，方便实用的小代码总结

摘要: this.Controls["label1"].Text = "abc"; 研究了半天的反射，发现Controls就能直接控制winform里的控件了。汗颜了。。接着研究如何在类库里面调用winform里的label了，有知道的童鞋帮忙留言啦。不知道的，请继续飘过。。public static void setLabel(vsTest01.Form1 f) { f.Controls["label1...阅读全文

posted @ 2010-10-25 20:11 彭成刚阅读(150) 评论(0) 编辑

2010年7月16日

捕捉浏览器的刷新与关闭兼容ie、ff(火狐)

摘要: <script language="javascript">var MSG_UNLOAD="您的文章内容还没有进行保存！";var UnloadConfirm = {};启用监听浏览器刷新、关闭的方法UnloadConfirm.set = function(confirm_msg){ window.onbeforeunload = function(event){ event = ...阅读全文

posted @ 2010-07-16 23:35 彭成刚阅读(238) 评论(0) 编辑

仅列出标题下一页

彭成刚的技术博客