QQ童鞋最近需要京东商城的图片展示效果..可怜的我被拉来当壮丁T_T.. 好久不写JS了.当作练手..
此效果要说也很简单.用到了JQuery的两个插件..
分别为:
内容滚动插件 jcarousel (Project地址: http://sorgalla.com/projects/jcarousel/)
图片放大镜插件 JQZoom (Project地址: http://www.mind-projects.it/projects/jqzoom/)
效果预览:
用AJAX传递中文时..FF会很聪明的自动将中文字符转成十六进制.而BC的IE却非得自己处理..-____!!
最简单的方法就是在需要转义的地方使用JS的内置函数 encodeURIComponent
P.S.最初是用escape做中文转义..注意它与 encodeURIComponent 的区别
今天某人碰到的一个题目.我写了两种解法..记录一下其中一种
P.S.JS的数组初始化真的很白白..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript"> var arr = new Array(1,2,3,4,5,6,7,2,3); var tmp = new Array(0,0,0,0,0,0,0,0,0); for(var i=0, len=arr.length; i<len; i++) { var j = arr[i]; if(tmp[j] != 0) { alert(j); } else { tmp[j] = 1; } } </script> |
在表单的 onsubmit 事件中绑定 UnloadConfirm.clear 便可清除提示.(表单提交时)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var msg_unload="您的文章内容还没有进行保存！"; var UnloadConfirm = {}; UnloadConfirm.set = function(confirm_msg) { window.onbeforeunload = function(event) { event = event || window.event; event.returnValue = confirm_msg; } } UnloadConfirm.clear = function() { window.onbeforeunload = function(){}; } UnloadConfirm.set(msg_unload); |
原来POST方法提交的数据是那么容易被监听 -_!!
用js进行第一次加密.提交表单后再进行二次加密.看它还能不能被监听..
很简单的一行代码:
1 | <input type="file" value="" onchange="alert(this.value);" /> |
在IE6与IE7下表现正常
而在FF2下空格都自动转义成了%20
最奇怪的是FF3.干脆只能取到文件名称..
看来想用客户端来影响文件的操作不太靠谱了..
附上MZ上找到的文章:http://support.mozilla.com/….parentId=76231
闲来无事写了一个.也许用得上
在FF2,IE7,IE6下测试通过
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 82 83 84 85 86 87 88 | <!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" />
<meta name="author" content="wuleying" />
<!--<script type="text/javascript" src="ajax.js"></script>-->
<title>测试上传文件</title>
<style type="text/css">
* {font-size:12px;margin:0;}
body {background:#fff;}
form {margin:12px;}
input.file{
vertical-align:middle;
position:relative;
left:68px;
*left:-218px;
filter:alpha(opacity=0);
opacity:0;
z-index:1;
*width:223px;
display:none;
}
form input.viewfile {
z-index:99;
border:1px solid #ccc;
padding:2px;
width:150px;
vertical-align:middle;
color:#999;
}
form p span {
float:left;
}
form label.bottom {
border:1px solid #38597a;
background:#4e7ba9;
color:#fff;
height:19px;
line-height:19px;
display:block;
width:60px;
text-align:center;
cursor:pointer;
float:left;
position:relative;
*top:1px;
}
form input.submit {
border:0;
background:#380;
width:70px;
height:22px;
line-height:22px;
color:#fff;
cursor:pointer;
}
p.clear {
clear:left;
margin-top:12px;
}
p.filep {
height:25px;
}
p.clear input {
float:left;
margin-right:6px;
}
#error {
padding-top:5px;
color:#f00;
}
</style>
</head>
<body>
<form action="" onsubmit="return send();" method="post" name="upfiles" enctype="multipart/form-data"><br />
<input type="hidden" name="max_file_size" value="2097152" />
<input type="hidden" name="do" value="upload" />
<p class="filep">
<span>
<label for="viewfile">上传文件：</label>
<input type="text" onmouseout="document.getElementById('upload').style.display='none';" name="viewfile" id="viewfile" class="viewfile" />
</span>
<label for="upload" class="bottom" onmouseover="document.getElementById('upload').style.display='block';">查找文件</label><input type="file" id="upload" size="27" name="upload[]" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" />
</p>
<p class="clear"><input class="submit" type="submit" value="确定上传" /><div id="error"></div></p>
</form>
</body>
</html> |
刚开始以为很容易解决.写js嘛..-_,-+
< i nput type="file" onchange="document.getElementById('showimg').src=this.value;" />
然而本地测试成功的代码上传到服务器上就出现了错误..空格被自动转义成为了%20
无语ing….囧..
不过总算找到一个BT的方法..用CSS中的AlphaImageLoader滤镜 -_!!
AlphaImageLoader滤镜的使用方法就不做说明..自己查下手册
AlphaImageLoader滤镜的src属就是其中的主角 它将使用绝对或相对url地址指定背景图像。假如忽略此参数，滤镜将不会作用。
放出代码
经常会用到的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 | <!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> <style type="text/css"> p {margin:0;font-size:12px;line-height:26px;} </style> <script type="text/javascript"> function check_all(obj,cName) { var checkboxs = document.getElementsByName(cName); for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;} } </script> </head> <body> <p><input type="checkbox" name="all" onclick="check_all(this,'c')" />全选/全不选</p> <p><input type="checkbox" name="c" value="" /></p> <p><input type="checkbox" name="c" value="" /></p> <p><input type="checkbox" name="c" value="" /></p> <p><input type="checkbox" name="c" value="" /></p> </body> </html> |
不知道效果如何,先挂在自己的表情站上试试,毕竟google广告里最有价值的还是Firefox的广告推荐了
实现代码如下：
先在 < body > 后加上这么一段
CSS部分:
