关注F2E-UED-SEO

上周用Dedecms做了店掌柜的官方站点，
中间有一个环节用Jquery获取淘宝店铺信用的图片，来替换Dedecms字段输出的值。

for(var i=0;i<$('.taolevel').length;i++){
     if($('.taolevel').eq(i).text()=='一钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_1.gif />') }
     if($('.taolevel').eq(i).text()=='二钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_2.gif />') }
     if($('.taolevel').eq(i).text()=='三钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_3.gif />') }
     if($('.taolevel').eq(i).text()=='四钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_4.gif />') }
     if($('.taolevel').eq(i).text()=='五钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_5.gif />') }
     if($('.taolevel').eq(i).text()=='一皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_1.gif />') }
     if($('.taolevel').eq(i).text()=='二皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_2.gif />') }
     if($('.taolevel').eq(i).text()=='三皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_3.gif />') }
     if($('.taolevel').eq(i).text()=='四皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_4.gif />') }
     if($('.taolevel').eq(i).text()=='五皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_5.gif />') }
     if($('.taolevel').eq(i).text()=='一金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_1.gif />') }
     if($('.taolevel').eq(i).text()=='二金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_2.gif />') }
     if($('.taolevel').eq(i).text()=='三金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_3.gif />') }
     if($('.taolevel').eq(i).text()=='四金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_4.gif />') }
     if($('.taolevel').eq(i).text()=='五金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_5.gif />') }
     if($('.taolevel').eq(i).text()=='商城'){
     $('.taolevel').eq(i).html('<img src=http://www.shopex.cn/images/mall.gif />') }
  };

原理：所有均只运行1次即跳出循环，
如果class为taolevel的标签下的文字全等于“店铺信用”
则用对应的图片的html代码来替换当前的文字

今天用Dedecms改版taobao.shopex.cn，发现文章类目位置导航用手写实在太麻烦了，
用JS调用只要创建一个类似页面，通过JS获取某标签下的相关文字，赋值给予需要显示的地方，即可达到简单的目的
Dedecms内嵌Jquery框架，代码如下：

<script type="text/javascript">
       var pagetitle = $('.place a:last').text();
       $('.jsvalue span').text(pagetitle)
</script>

解释：
定义 pagetitle 为 获取class为place的最后的1个a标签里的文字
选择 class为jsvalue下的span标签赋给pagetitle

简单的2行代码。。。
它来的这么快这么直接

DD_belatedPNG.js是个好东西，支持IE6的png透明，还有个更高明的东西
支持背景的定位，而且不限于标签和class,竟然还支持hover的png透明
所以在此强烈推荐!!!,,,,,,,

用法：

头部header加入以下代码（注意不要漏掉”type=text/javascript”）

<!--[if IE 6]>
<script type="text/javascript" src="****/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.class1, .class2, img');
</script>
<![endif]-->

需要透明的背景png或者是直接插入的png直接写在上面的DD_belatedPNG.fix.fix后面….
善哉..善哉..

DD_belatedPNG下载地址：点击下载此文件

首先这段代码是基于mootools框架的
原理是绝对定位弹出框这个层
然后通过mootools判断浏览器的宽度减去层的宽度 再除以2
就是该层距浏览器左边的距离。
代码如下：（层的id=”popy_window”）

<script  type="text/javascript">
var popywindowWidth=$('popy_window').getSize().x
var allwindowWidth=window.getSize().x
var popywindowXposition=(allwindowWidth-popywindowWidth)/2
$('popy_window').setStyle('left',popywindowXposition);
</script>

这样就定义了绝对定位层的水平居中（垂直方面自己设定就行了）

关闭原理：
判断click事件触发,给层的CSS加入display:none;
代码如下：

<script  type="text/javascript">
$E('#popy_window .colsed_top').addEvent('click',function(e){
$('popy_window').setStyle('display','none');
});
</script>

<script type="text/javascript">
function randomizeContent(classname){
var contents=randomizeContent.collectElementbyClass(classname)
contents.text.sort(function() {return 0.5 - Math.random();})
var tbodyref=contents.ref[0].tagName=="TR"? contents.ref[0].parentNode : new Object()
for (var i=0; i<contents.ref.length; i++){
if (tbodyref.moveRow) //if IE
tbodyref.moveRow(0, Math.round(Math.random()*(tbodyref.rows.length-1)))
else
contents.ref[i].innerHTML=contents.text[i]
contents.ref[i].style.visibility="visible"
}
}

randomizeContent.collectElementbyClass=function(classname){ //return two arrays containing elements with specified classname, plus their innerHTML content
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular e­xpression to screen for classname within element
var contentobj=new Object()
contentobj.ref=new Array() //array containing references to the participating contents
contentobj.text=new Array() //array containing participating contents' contents (innerHTML property)
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1){
contentobj.ref[contentobj.ref.length]=alltags[i]
contentobj.text[contentobj.text.length]=alltags[i].innerHTML
}
}
return contentobj
}
</script>
<div class="color1">1111111111</div>
<div class="color1">2222222222</div>
<div class="color1">333333333</div>
<div class="color1">44444444444</div>
<div class="color1">555555555555</div>
<div class="color1">66666666666</div>
<div class="color1">77777777777</div>
<div class="color1">88888888</div>
<div class="color1">999999999</div>
<div class="color1">000000000000000</div>
<script type="text/javascript">
//randomize order of contents with DIV class="group1"
randomizeContent("color1")
</script>

—————————————————————-
核心修改提示：
中间的每个class必须同名
Js通过寻找这个class名称来随机排列
注意最后有段返回值
测试兼容所有的浏览器

解决hover在IE6下非li标签上的伪类：
实现方案原理：
通过变换思维，给非li标签onmouseover的状态加上一个class
这个class就是hover的样式，然后鼠标移开再去掉这个class
网友anonymous提供的解决方案：

function hover(id,tag,cname) {
   var id= document.getElementById(id);
   var tags = id.getElementsByTagName(tag);
   for(var i=0;i<tags.length;i++) {
       tags[i].onmouseover= function() {
           this.className +="" + cname;
       }
       tags[i].onmouseout= function() {
           this.className = this.className.replace(cname,'');
       }
    }
}
hover("id","tag","cname")

————————————————
第一种方法是纯手写JS实现
第二中方法是基于mootools框架写的js，其原理是一样的

代码如下：

window.addEvent('domready',function(){
    $ES('#Menu span').addEvents({
        'mouseover':function(e){
               this.addClass('now');
         },
        'mouseout':function(e){
              if(this.hasClass('now'))
              this.removeClass('now');
              };
         });
});

#Menu是ID,span是tag,now是class

为了菜单居中的实现…苦思冥想…
因为菜单可以是用户添加,所以宽度自然不固定,子项左浮动;
所以光给ul:{margin:0 auto;}自然就无法实现…
见招拆招…
既然没宽度…咱就给容器加ID获取这个宽度,
来吧：
—————————–分割线——————————–

—————————–分割线——————————–
这样获取了ID下ul的宽度,
给ul定义{zoom:1;display:inline-block;*display:inline;margin:0 auto;}
可以同时让页面多个自适应居中….

=======================================
不过事后发现,
从另一个角度来实现,
取消li下的float;即不让li浮动,
li{display:inline-block; zoom:1; *display:inline;}
然给外面的容器元素 text-align:center……….
无语了…这么简单的东西…
居然让我拐弯抹角两小时哎………

TAB很简单，相信大家都能写出来
无缝滚动也比较轻松
但是两段代码整合起来，就出了点问题

设想4个类别（以后可能更多），每个类别下有个产品滚动（数遍点击左右按钮，滚动1个或者N个）；两段代码整合出来，问题来了：无缝滚动需要寻找滚动ID，难道给每个滚动就要另起一个ID吗？这样算下来，4个类别下面就需要有4个ID来实现滚动，无疑是浪费浏览器资源和重复代码；
自己考虑用ID递增解决方案！不过目前JS功力有限，在群里求助高手，成功解决

代码包如下：点击下载此文件

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1. oncontextmenu="window.event.returnValue=false"
将彻底屏蔽鼠标右键

可用于Table

2.
取消选取、防止复制

3. onpaste="return false"
不准粘贴

4. oncopy="return false;" oncut="return false;"
防止复制

5. IE地址栏前换成自己的图标

6. 可以在收藏夹中显示出你的图标

7.
关闭输入法

8. 永远都会带着框架

9. 防止被人frame

10. 网页将不能被另存为

11.
onclick="window.location = "view-source:"+ "http://www.gonet8.com""/>

12.删除时确认
删除

13. 取得控件的绝对位置
//javascript

//VBScript

14. 光标是停在文本框文字的最后

15. 判断上一页的来源
javascript:
document.referrer

16. 最小化、最大化、关闭窗口

17.屏蔽功能键Shift,Alt,Ctrl

18. 网页不会被缓存



或者

19.怎样让表单没有凹凸感？

20.