jQuery 初步小应用

[ 作者:笑傲江湖 发布于:2012年-8月-24日 18:15 星期五  分类:百 宝 箱 ]

  断断续续的研究了一阵jQuery了,看得头晕脑胀啊,就是一个JS盲,不管如何,总要动动手,正好要给HDC折腾一个蜘蛛侠的Theme,就练练手吧。
  Theme很简单,就是页面头部加点东西,一张背景图,上面再配个蜘蛛侠的图片,配合jQuery让蜘蛛侠动一动。设想:页面一打开,蜘蛛侠大图,浮动的,默认显示,鼠标移动到大图上,显示单击提示,鼠标单击后,蜘蛛侠大图缩小;当鼠标再次移动到蜘蛛侠图片上,会再出现一个双击提示,双击后,蜘蛛侠会先变大然后再缩小到第一次缩小的位置和大小。但是两次提示,都只显示一次。
  JS代码如下:
<script type="text/javascript">
	$(document).ready(function(){

	// part_one
		$(".pic_demo").one("mouseover", function(event){
			$(".click_me").fadeIn(500);
		event.stopPropagation();
		});
		$(".pic_demo").one("mouseout" , function(event){
			$(".click_me").fadeOut(250);
		event.stopPropagation();
		});
	//part_one

	//part_two
		$(".pic_demo").click(function(event){

		$(this).animate({"width":"189px","height":"280px","opacity":"0.5","margin-left":"-121"} , 500)
			.animate({"width":"230px","height":"340px","opacity":"1","margin-left":"-121"} , 200)
		event.stopPropagation();
		
		$(".pic_demo").one("mouseover", function(event){
			$(".click_me_again").fadeIn(500);
		event.stopPropagation();
		});
		$(".pic_demo").one("mouseout" , function(event){
			$(".click_me_again").fadeOut(250);
		event.stopPropagation();
		});
		
		});
	//part_two
	
	//part_three
		$(".pic_demo").dblclick(function(event){

		$(this).animate({"width":"432px","height":"640px","opacity":"1","margin-left":"-231"} , 500)
			.animate({"width":"230px","height":"340px","opacity":"1","margin-left":"-121"} , 200)
		event.stopPropagation();
		});
	//part_three

	});
</script>
  结果,不尽如人意啊,第一个单击的提示,确实只显示了一次,以后再不显示了。但是第二个提示,死了活了都要显示,没招,自己没经验,只能四处求助,经过别人指点,然后自己摸索,算是满足最初的设想。更新JS代码如下:
<script type="text/javascript"> 
    var count_number = 0 ; 
    $(document).ready(function(){ 

    // part_one 
        $(".pic_demo").one("mouseover", function(event){ 
            $(".click_me").fadeIn(500); 
        event.stopPropagation(); 

        $(".pic_demo").one("mouseout" , function(event){ 
            $(".click_me").fadeOut(250); 
        event.stopPropagation(); 
        }); 
        }); 
    //part_one 

    //part_two 
        $(".pic_demo").click(function(event){ 

        $(this).animate({"width":"189px","height":"280px","opacity":"0.5","margin-left":"-121"} , 500) 
            .animate({"width":"230px","height":"340px","opacity":"1","margin-left":"-121"} , 200) 
        event.stopPropagation(); 

        if ( count_number == 0) { 
        $(".pic_demo").one("mouseover", function(event){ 
            $(".click_me_again").fadeIn(500); 
        event.stopPropagation(); 
         
        $(".pic_demo").one("mouseout" , function(event){ 
            $(".click_me_again").fadeOut(250); 
        event.stopPropagation(); 
        }); 
        }); 
        count_number = 1; 
        } 
         
        }); 
    //part_two 
     
    //part_three 
        $(".pic_demo").dblclick(function(event){ 

        $(this).animate({"width":"432px","height":"640px","opacity":"1","margin-left":"-231"} , 500) 
            .animate({"width":"230px","height":"340px","opacity":"1","margin-left":"-121"} , 200) 
        event.stopPropagation(); 
        }); 
    //part_three 

    }); 
</script>

标签: CSS jQuery HTML

评论0 引用0 浏览1868

上一篇 << 今儿个报到了  |  下一篇 >> 开始研究一下 Discuz X 2.5

说点什么:

正文内容:

 




图片博文
罗技UE 蓝牙无线音箱腻子粉/熟石膏/粉刷石膏/木工胶/快干粉/木方/牛皮纸