js 代码随记

清疚 2021-10-24 02:34 293阅读 0赞

谷歌 jquery cdn 地址

< script type="text/javascript" src="[**http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js**][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>

转载于:https://www.cnblogs.com/yxbs/archive/2013/04/01/2992773.html

[http_ajax.googleapis.com_ajax_libs_jquery_1_jquery.min.js]: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot随记

1、生成get、set时，使用快捷键alt+insert ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1

忘是亡心i/ 2022年09月12日 13:59/ 0 赞/ 232 阅读

相关 JavaScript（JS）随记

判断是否为空： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_2

偏执的太偏执、/ 2022年09月09日 06:44/ 0 赞/ 184 阅读

相关随记

![微笑][smile.gif]2015年12月25日。。。 android 开发历程记录思想萌芽：、从今天起，每周至少写一篇博客！！加油 [smile.gif]:

太过爱你忘了你带给我的痛/ 2022年08月18日 15:11/ 0 赞/ 269 阅读

相关随记

程序的运行路径，在一定的层次上来看（例如模块），在任意时刻其实是一个很简单的关系。而现在的计算模型里面，这个关系是程序自己维护的。这个关系由程序自己维护的缺点是系统不容易进行调

r囧r小猫/ 2022年08月06日 06:12/ 0 赞/ 226 阅读

相关随记

工作关系，近来有些忙碌，虽然仍然干的是游戏开发，但是或多或少觉得，目前的工作慢慢也变得仅仅是份工作罢了～突然想起，当年的自己怎么就一股脑儿的踏入了这个行业呢

今天药忘吃喽~/ 2022年08月03日 14:35/ 0 赞/ 248 阅读

相关 RSA 随记

先前弄SSL接触了RSA算法，有点好奇其中的实现，毕竟之前的Cipher类到计算那部分就看不懂只能放弃了。所以今天补课了一下RSA的算法。简介 RSA加密算法是一种非

刺骨的言语ヽ痛彻心扉/ 2022年01月20日 05:21/ 0 赞/ 350 阅读

相关 MySQL 随记

判断某个字段长度方法sql: SELECT \ FROM users WHERE length(login\_name)>25 AND flag!=-1 去重关键字：

水深无声/ 2021年11月29日 16:14/ 0 赞/ 521 阅读

相关 Javascript 随记

1. 闭包的例子 uniqueID = function () \{ if ( ! arguments.callee.id) arguments.callee

太过爱你忘了你带给我的痛/ 2021年10月26日 12:24/ 0 赞/ 402 阅读

相关 js 代码随记

谷歌 jquery cdn 地址 < script type="text/javascript" src="[http://ajax.googleapis.com/ajax/

清疚/ 2021年10月24日 02:34/ 0 赞/ 294 阅读

相关随心记

public int insertPayDetailInfo(@Param("serialNumber") String serialNumber,@Param("li

ゝ一纸荒年。/ 2021年09月18日 05:42/ 0 赞/ 560 阅读