新浪版
<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; }