js 代码 随记

谷歌 jquery cdn 地址

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">< /script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

 

//信息停顿滚动

<script>
var pause=false; 
var scrollTimeId=null; 
var container=null; 
var lineHeight=null; 
var speed=0; 
var delay=0; 
simpleScroll=function(container1,lineHeight1,speed1,delay1){ 
container=document.getElementById(container1); 
lineHeight=lineHeight1; 
speed=speed1; 
delay=delay1; 
//滚动效果 
scrollexc=function(){ 
if(pause) return ; 
container.scrollTop+=2; 
var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight; 
if(container.scrollTop%lh<=1){ 
clearInterval(scrollTimeId); 
fire(); 
container.scrollTop=0; 
setTimeout(start,delay*1000); 
} 
}; 
//开始滚动 
start=function(){ 
var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight; 
if (container.scrollHeight - container.offsetHeight >= lh) 
scrollTimeId = setInterval(scrollexc, speed); 
}; 
//把子节点树中的第一个移动到最后 
fire=function(){ 
container.appendChild(container.getElementsByTagName('li')[0]); 
}; 
container.onmouseover=function(){pause=true;}; 
container.onmouseout=function(){pause=false;}; 
setTimeout(start,delay*1000); 
};
new simpleScroll("roll",20,40,1); 
</script>

结构为 <ul id="roll" style=" overflow:hidden; height:80px;margin-top:5px; "><li>111</li></ul>

 

 

//ecshop 改变城市联动为JS 联动

 首先该更生成的 地区的缓存 为 json 格式为 id : val

在 页面 使用 script 引用缓存问价 

 

联动函数

<selectname="province"id="selProvinces"onchange="region_change(this,1)"style="border:1px solid #ccc;"></select>

function region_change(obj,lev,sel)
{
    var val = obj.value;
    var option ='';
    var sel = sel?sel:0;
    
    var city = $('#selCities');
    var dist =  $('#selDistricts');
    //city.hide();
    dist.hide();
    if(lev ==1)
    {
        var next = city;
        option +='<option value="0">请选择市</option>';
    }else if(lev ==2)
    {
        var next = dist
        option +='<option value="0">请选择区</option>';
    }
    
    var data = region_data[val]
    var j = 0; 
        //循环该分级下的所有子城市
        for(var i in data)
        {        
            j++;
            option +='<option value="'+i +'"';
            if(sel >0 && sel == i )
                option +=' selected="true"';
            option +='>'+data[i]+'</option>';;
        }
    if(j >0)
    {
        next.html(option);
        next.show();
    }
    
}

 

 

----------------------- 简单的图片轮播 jq 代码 DIV 样式需要 设定 width 为图片宽度 overflow:hidden

<div class="big_img" id="big_img">
            <ul id="big_img_ul" style="margin-left: -4000px;">
        	<li class="slide_img"><img src="themes/default/images/topic_pz/bz.jpg"></li>
            <li class="slide_img"><img src="themes/default/images/topic_pz/dz.jpg"></li>
            <li class="slide_img"><img src="themes/default/images/topic_pz/fk.jpg"></li>
            <li class="slide_img"><img src="themes/default/images/topic_pz/js.jpg"></li>
            <li class="slide_img"><img src="themes/default/images/topic_pz/yf.jpg"></li>
            </ul>
        </div>

<ul class="small_img" id="small_img"> 
             <li class="slide_thumb nav-bg  nav-bz fl"></li>
             <li class="slide_thumb nav-bg  nav-dz fl"></li>
             <li class="slide_thumb nav-bg  nav-yf fl cur-bg"></li>
             <li class="slide_thumb nav-bg  nav-js fl"></li>
             <li class="slide_thumb nav-bg  nav-fk fl"></li>
        </ul>

　　

<script>

jQuery(function($){	
	
	var c = 0;
	var s_li = $('#small_img li');
	var auto
	$('#left').click(function(){
		move(-1);	
		});
		
	$('#right').click(function(){
		move(1);	
		});	
	s_li.click(function(){
		var index = $(this).index();
			 $('#big_img_ul').animate({'marginLeft':-index*1000+'px'},200);
			cur(index) 
			c = index;
		});	
	cur = function(num){
		var clas = 'cur-bg';
		s_li.eq(num).addClass(clas).siblings().removeClass(clas);
	};
		
	
		$('#hd').mouseenter(function(){		
			clearInterval(auto);			
			})
			.mouseleave(function(){				
		   auto = setInterval('move(1)',3000)
				});
		
		
		
	move = function(j){
		var ul = $('#big_img_ul');
		var li = ul.find('li');
		var n  = li.length;
		var w =  li[0].offsetWidth;
		var speed =200;
		
	
		if(ul.is(':animated') == false)
		{					
			c +=j;					
			if(c!=-1 && c!= n)
			{
				ul.animate({'marginLeft':-c*w+'px'},speed);
				
			}else if(c == -1)
			{
				c= n-1;
				
				ul.animate({'marginLeft':-(w*(c))+'px'},speed);
				
			}else if(c == n)
			{
				c =0;
				ul.animate({'marginLeft':0+'px'},speed);
			}
			cur(c)
			// auto = setTimeout('move(1)',3000);	
		}
		
	}

	 auto = setInterval('move(1)',3000)
	 cur(0);
	});



</script>