wap手机站常用三种特效:返回顶部触屏滑动input输入文字删除

wap手机站常用三种特效:返回顶部触屏滑动input输入文字删除

添加时间:2021-02-16 14:07:01
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图片滑动
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

手机端上的触摸式banner切换效果, 底部返回TOP,input文本可以删除!

分类:图片代码 > 图片滑动 难易:初级

第一种:input输入文字可以删除

<div class="lv-search search">
  <div class="lv-div-search">
	  <form method="post" action="/clutter/place" id="key_search">
	    <span class="lv-clear-icon01" onClick="union_clear_context('keyword');" style="" id="clear_password">
               <img src="images/clear.png"></span>
		  <input class="lv-input-search" id="keyword" type="text" onFocus="ke_focus(this);" onBlur="key_blur(this);" value="上海" placeholder="请输入景点目的地/关键字" autocomplete="off">
	      <input type="hidden" name="keyword" id="hidden_keyword" value="上海" data-name="">
	       <input type="button" class="btn_sub" value="" onClick="btnClick()">
	  </form>
    
      <input type="hidden" name="toDest" id="toDest" value="上海" data-name="">
      <input type="hidden" name="subjects" id="subjects" value=" " data-name="">
      <input type="hidden" name="sort" id="sort" value="" data-name="">
      <input type="hidden" name="stage" id="stage" value="2" data-name="">
      <input type="hidden" name="page" id="page" value="1" data-name="">
  </div>
  <div class="lv-auto-complete lv-spot-autocomplete" id="search_autocomplete" style="display:none;">
    	<ul class="lv-search-ul" id="search_success">
        </ul>
    </div>
 </div>
// 清空输入框内容 id 输入框id
function union_clear_context(id) {
	$("#search_autocomplete").hide();
	if ($("#" + id).length > 0) {
		$("#" + id).val("");		
	}
}

	/*搜索*/
function btnClick(){
	$("input[name='keyword']").val(encodeURI($("#hidden_keyword").val()));
	$("#key_search").submit();
	$("input[name='keyword']").val("");
}
document.onkeydown=function(event){
    var e = event || window.event;      
    if(e && e.keyCode==13){
    	btnClick();
    }
}

第二种:触摸banner效果

<div class="m_banner" id="owl">
            <a href="#" class="item"><img src="images/10250290397.png"></a>
            <a href="http://www.178hui.com" class="item"><img src="images/10225357963.jpg"></a>
            <a href="#" class="item"><img src="images/10250290397.png"></a>
            <a href="http://www.178hui.com" class="item"><img src="images/10225357963.jpg"></a>
      </div>

第三种:返回顶部

$(document).ready(function(){
	$(window).scroll(function () {
		var scrollHeight = $(document).height();
		var scrollTop = $(window).scrollTop();
		var $windowHeight = $(window).innerHeight();
		scrollTop > 75 ? $(".gotop").fadeIn(200).css("display","block") : $(".gotop").fadeOut(200).css({"background-image":"url(images/iconfont-fanhuidingbu.png)"});
	});
	$('.backtop').click(function (e) {
		$(".gotop").css({"background-image":"url(images/iconfont-fanhuidingbu_up.png)"});
		e.preventDefault();
		$('html,body').animate({ scrollTop:0});
	});
});
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:wap手机站常用三种特效:返回顶部触屏滑动input输入文字删除

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.086731s