谷歌 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>