zoukankan      html  css  js  c++  java
  • 改版整理(图集)

    新浪版

    <form name="topSearchForm" method="get" action="http://search.sina.com.cn/" target="_blank">
      <input type="text" name="q" class="input gray" value="搜索图片">
      <input type="hidden" name="from" value="photo">
      <input type="hidden" name="c" value="img">
      <input type="hidden" name="slide" value="1">
      <input type="hidden" name="size" value="l">
      <input type="submit" class="btn" value="">
    </form>
    <script type="text/javascript">
    (function() {var form = document.topSearchForm; var input = form.q; var txt = input.value; input.onfocus = function() {if (this.value == txt) {this.value = ''; this.className = 'input'} }; input.onblur = function() {if (this.value == '') {this.value = txt; this.className = 'input gray'; } }; form.onsubmit = function() {var kw = input.value; if (!kw || kw == txt) {alert('请输入搜索关键词!'); input.focus(); return false; } } })();
    </script>
    

      重点是input type="hidden"

    <input type="hidden" name="slide" value="1">

    me

    <form name="topSearchForm" method="get" action="http://www.kankanews.com/search/" target="_blank">
    	<input type="text" name="q" class="input" value="搜索图片">
    	<input type="hidden" name="index" value="3">
    	<input type="submit" class="btn" value="">
    </form>
    <script type="text/javascript">
    (function() {var form = document.topSearchForm; var input = form.q; var txt = input.value; input.onfocus = function() {if (this.value == txt) {this.value = ''; this.className = 'input'} }; input.onblur = function() {if (this.value == '') {this.value = txt; this.className = 'input gray'; } }; form.onsubmit = function() {var kw = input.value; if (!kw || kw == txt) {alert('请输入搜索关键词!'); input.focus(); return false; } } })();
    </script>
    

      提交结果:http://www.kankanews.com/search/?q=钟汉良&index=3

    (2)更多收起效果

    <div class="main-outerWrap">
    	<div class="main-nav-wrap" data-sudaclick='photo_nav' style='height:18px'>
    	<!-- publish_helper name='1505:2:24_新导航20140417' p_id='1505' t_id='2' d_id='24'-->
    		<ul class="clearfix">
    			<li><a class="wit" target="_blank" href="http://photo.sina.com.cn/wit/">看见</a></li>
    			<li><a class="mortal" target="_blank" href="http://photo.sina.com.cn/mortal/">尘世</a></li>
    			<li><a class="hist" target="_blank" href="http://photo.sina.com.cn/hist/">记忆</a></li>
    			<li><a class="world" target="_blank" href="http://photo.sina.com.cn/world/">天下</a></li>
    			<li><a class="photog" target="_blank" href="http://photo.sina.com.cn/photog/">摄影师</a></li>
    			<li><a class="red" target="_blank" href="http://buy.photo.sina.com.cn/">影艺商城</a></li>
    			<li class=""><a target="_blank" href="http://slide.photo.sina.com.cn/">全站图库</a></li>
    			<li class='lastLi foldedLi unfoldLi'><a href="javascript:;" class='foldUp'>更多</a></li>
    		</ul>
    		<ul class="nav_fold clearfix">
    			<li><a class="excl" target="_blank" href="http://photo.sina.com.cn/excl/">拼图</a></li>
    			<li><a href="http://photo.sina.com.cn/gallery/index.html" target="_blank">专题</a></li>
    			<li><a target="_blank" href="http://photo.sina.com.cn/zl/index.html">品图</a></li>
    			<li><a href="http://roll.photo.sina.com.cn/news/index.shtml" target="_blank">资讯</a></li>
    			<li><a class="anniv" target="_blank" href="http://photo.sina.com.cn/anniv/">五年十年</a></li>
    			<li><a href="http://photo.sina.com.cn/media/" target='_blank'>媒体精选</a></li>
    			<li><a href="http://photo.sina.com.cn/cover/" target='_blank'>封面壹图</a></li>
    		</ul>
    		<script type="text/javascript">
    		jQuery(document).ready(function(){
    			var isFold = true;
    			var foldTimeOut;
    			var foldNav = function(){
    				isFold = true;
    				jQuery('.foldUp').parent().toggleClass('unfoldLi');
    				jQuery('.foldUp').html('更多');
    				jQuery('.main-nav-wrap').animate({height:'18px'}); 
    
    			}
    			var unFoldNav = function(){
    				isFold = false; 
    				jQuery('.foldUp').parent().toggleClass('unfoldLi');
    				jQuery('.foldUp').html('收起');
    				jQuery('.main-nav-wrap').animate({height:'56px'}); 
    			}
    			if(typeof(document.ontouchstart)!='undefined'){
    				jQuery('.foldUp').click(function(){
    					if(isFold){
    						unFoldNav(); 
    					}else{
    						 foldNav();
    					}        
    				});
    			}else{
    				 jQuery('.foldUp').mouseover(function(){
    					if(isFold){
    						 unFoldNav();
    					}        
    				});
    				jQuery('.main-outerWrap').mouseleave(function(){
    					if(!isFold){
    						clearTimeout(foldTimeOut);
    						foldTimeOut = setTimeout(function(){
    							foldNav(); 
    						},1000)     
    					}
    				})
    			}  
    		})
    		</script>
    	<!-- publish_helper_end -->
    	</div>
    </div>
    

      (3)判断

                if(/((iPhone|iPad|iPod)/i.test(navigator.userAgent)){
                    $("#onepic_sum").css("font-size","18px");
                    $("#FS_arr_left_01").show();
                    $("#FS_arr_right_01").show();
                }

    (4)生成随机数

            //生成随机数
            function random(min,max){
                return Math.floor(min + Math.random()*(max - min));
            }

    (5)手机端滑动 可判断左划右划(横向)、纵向

    		var coverpage = document.getElementById("coverpage");
    		console.log(coverpage);
    		var touchInfo = new Object();
    		touchInfo.iPadStatus = 'ok';
    		var touchstart = function(e){
    			//e.preventDefault();
    			touchInfo.iPadLastX = e.touches[0].pageX;
    			touchInfo.iPadScrollX = window.pageXOffset;
    			touchInfo.iPadScrollY = window.pageYOffset; //用于判断页面是否滚动
    			console.log(touchInfo.iPadLastX,touchInfo.iPadScrollX,touchInfo.iPadScrollY);
    		};
    		var touchend = function(e){
    			//e.preventDefault();
    			if(touchInfo.iPadStatus != 'touch'){return};
    				 touchInfo.iPadStatus = 'ok';
    				//self._state = 'ready';
    				var cX = touchInfo.iPadX - touchInfo.iPadLastX;
    			if(cX<0){//左划
    
    			}else{//右划
    
    			};
    		};
    		var touchmove = function(e){
    			e.preventDefault();
    			if(e.touches.length > 1){ //多点触摸
    			touchend(e);
    			};
    			touchInfo.iPadX = e.touches[0].pageX;
    			var cX = touchInfo.iPadX - touchInfo.iPadLastX;
    			console.log(cX);
    			if(touchInfo.iPadStatus == 'ok'){
    				if(touchInfo.iPadScrollY == window.pageYOffset && touchInfo.iPadScrollX == window.pageXOffset && Math.abs(cX) > 30){ //横向触摸
    					touchInfo.iPadStatus = 'touch';
    				}else{
    					return;
    				};
    			};
    		};
    		var supportsTouch = false;
    		if('ontouchstart' in window) {
    			//iOS & android
    			supportsTouch = true;
    		}else if(window.navigator.msPointerEnabled) {
    			//Win8
    			supportsTouch = true;
    		}
    
    		coverpage.addEventListener("touchstart", touchstart, false);
    		coverpage.addEventListener("touchmove", touchmove, false);
    		coverpage.addEventListener("touchend", touchend, false);
    

      

     (6) 剪裁图片

    			//裁剪图片
    			if(Math.ceil(win_height * original_width / original_height) < win_width ){
    				pic_width = win_width ;
    				pic_height = Math.ceil(win_width * original_height / original_width);
    				pic_left = 0;
    				pic_top = - Math.ceil((pic_height - win_height) / 2);
    			}else{
    				pic_height = win_height;
    				pic_width = Math.ceil(win_height * original_width / original_height);
    				pic_left = - Math.ceil((pic_width - win_width) / 2);
    				pic_top = 0;
    			}
    

      

  • 相关阅读:
    HDU 1207 汉诺塔II (递推)
    HDU 3172 Virtual Friends (map+并查集)
    HDU 1272 小希的迷宫(并查集)
    hihoCoder #1037 : 数字三角形 (动态规划)
    51Nod 1256 乘法逆元
    AtCoder Regular Contest 077 D
    AtCoder Regular Contest 077 C
    AtCoder Beginner Contest 066 B
    AtCoder Beginner Contest 045 C
    AtCoder Beginner Contest 045 B
  • 原文地址:https://www.cnblogs.com/wallaceyuan/p/4256496.html
Copyright © 2011-2022 走看看