基于JavaScript实现点击页面任何位置返回

废话不多说了,直接上关键代码了。

<include file="Public:header" />
<style type="text/css">
table{width:100%;margin: 0;}
</style>
<script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script>
<script type="text/javascript">
//定义页面载入事件
/*$(function(){
$('#more').addClass('moreno');
$('#more').click(function(){
//隐藏元素(向左移动)
if ($('#more').hasClass('moreno')) {
$('#sider').animate({
left:0
},1000,function(){
$('#more').removeClass('moreno');
});
}else{
$('#sider').animate({
left:-120
},1000,function(){
$('#more').addClass('moreno');
});
}
});
});*/
//定义页面载入事件
$(function(){
$('#more').addClass('moreno');
//点击界面除了容器id为more的区域外,任何地方隐藏掉
$(document).click(function(){
$('#sider').animate({
left:-120
},1000,function(){
$('#more').addClass('moreno');
});
});
$('#more').click(function(event){
event.stopPropagation();
//隐藏元素(向左移动)
event.stopPropagation();
if ($('#more').hasClass('moreno')) {
$('#sider').animate({
left:0
},1000,function(){
$('#more').removeClass('moreno');
});
}else{
$('#sider').animate({
left:-120
},1000,function(){
$('#more').addClass('moreno');
});
}
});
});
</script>
<div class="header_one">
<div class="Central">
<div class="first_one" style="position:absolute;">
<img id="more" style="margin-top:8px;" src="/{:APP_PATH}/Public/img/pic/more.png" />
</div>
<div>
<img style="height:30px;" src="/{:APP_PATH}/Public/img/main/logo1.png" />
</div>
</div>
</div>
<div class="bg">
<div class="pic" style="height:180px;">
<div id="lunbo" style="overflow: hidden;">
<ul style="margin:0px;" id="lunboul" style="position: relative;">
<volist name="pic" id="vo">
<li style="float:left;text-align:center;">
<img src="{$vo['pic']}" alt="" style="height:176px;margin:auto;" >
</li>
</volist>
</ul>
</div>
<script type="text/javascript">
$('#lunbo').unslider({
speed: 0,
delay: 3000,
complete: function() {},
keys: true,
dots: true,
fluid: false
});
function autoScroll(obj){
$(obj).find("#voo").animate({
marginTop : "-30px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll("#xst")',2000);
})
</script>
</div>
<div style="width:100%;background-color:#EEEEEE;height:30px;margin:10px 0;">
<div class="scroll" id="xst" style="float:right;margin-left:10px;height:30px;width:75%;overflow:hidden;">
<ul id='voo' style="margin-top:0px;">
<volist name='gonggao' id="vo">
<li style="line-height:30px;height:30px;padding-left:5px;padding-top:2px;text-align:left;">
<a href="{:U('/Index/PlatDetail',array('id'=>$vo['id']))}">{$vo['name']}</a>
</li>
</volist>
</ul>
</div>
<div style="float:right;margin:5px 0;">
最新公告
</div>
</div>
<table id="fone" onclick="javascript:location.href='/Invest/InvestHp/biao_type/love'">
<tr>
<td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/new.png"/></td>
<td class="secon">新手标</td>
<td><span class="blo">8-10%</span><span class="tblo">预期年化收益</span></td>
<td><span class="blo">7<span class="cao_one">天</span></span><span class="tblo">投资期限</span></td>
<td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
</tr>
</table>
<table class="bird" onclick="javascript:location.href='/Invest/InvestList/biao_type/yxlc'">
<tr>
<td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/fast.png" /></td>
<td class="secon">快系列</td>
<td><span class="blo">8-10%</span><span class="tblo">预期年化收益</span></td>
<td><span class="blo">1<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td>
<td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
</tr>
</table>
<table class="se_cond" onclick="javascript:location.href='/Invest/InvestList/biao_type/gxd'">
<tr>
<td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/stable.png" /></td>
<td class="secon">稳系列</td>
<td><span class="blo">12-14%</span><span class="tblo">预期年化收益</span></td>
<td><span class="blo">3-6<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td>
<td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
</tr>
</table>
<if condition="$GLOBALS['userinfo']['org_code'] eq 'fc'">
<table class="last_fcb" onclick="javascript:location.href='/Invest/InvestList/biao_type/fcb'">
<tr>
<td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/house.png" /></td>
<td class="secon">房产宝</td>
<td><span class="blo">8-16%</span><span class="tblo">预期年化收益</span></td>
<td><span class="blo">3-6<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td>
<td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
</tr>
</table>
</if>
<div class="bott_ton" onclick="javascript:location.href='/Goods/Index'">
<img src="/{:APP_PATH}/Public/img/pic/logobean.png"/>
</div>
<div id="sider">
<ul id="usecond">
<li style="line-height:36px"> <a href="{:U('Index/Platann')}" style="color:#FFF">平台公告</a></li>
<li style="line-height:36px"> <a href="{:U('Index/HelpCenter')}" style="color:#FFF">帮助中心</a></li>
<li style="line-height:36px"> <a href="{:U('Index/PlatIntro')}" style="color:#FFF">平台介绍</a></li>
<li style="line-height:36px"> <a href="{:U('Index/Contact')}"style="color:#FFF">联系我们</a></li>
</ul>
</div>
</div>
<include file="Public:footer" />

以上所述是小编给大家介绍的基于JavaScript实现点击页面任何位置返回的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • js简单的点击返回顶部效果实现方法

    本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

  • js 点击按钮弹出另一页,选择值后,返回到当前页

    1. 效果图: 2. 主页面的代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function open_windows_and_get_selectedinfo(openwind

  • JavaScript 弹出窗体点击按钮返回选择数据的实现

    首先是父页面的代码: 复制代码 代码如下: <head runat="server"> <title>无标题页</title> <%-- <script type="text/javascript"> function openDia() { var returned = window.showModalDialog("Default4.aspx?" + (new Date()), windo

  • js点击返回跳转到指定页面实现过程

    这个功能之前有简单的带过,这次详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法). 功能描述: 在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的.因为当前标签页的相关历史记录是没有的,所以没有记录可以返回. 应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台. 一.知识要点 HTML5引进了history.push

  • 基于JavaScript实现点击页面任何位置返回

    废话不多说了,直接上关键代码了. <include file="Public:header" /> <style type="text/css"> table{width:100%;margin: 0;} </style> <script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script&g

  • 点击页面任何位置隐藏div的实现方法

    实例如下: <include file="Public:header" /> <style type="text/css"> table{width:100%;margin: 0;} </style> <script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script> <scri

  • 基于javascript实现漂亮的页面过渡动画效果附源码下载

    用户通过点击页面左侧的菜单,对应的页面加载时伴随着滑动过滤动画,并带有进度条效果.当然页面的加载是Ajax驱动的,整个加载过渡过程非常流畅,非常好的用户体验. HTML HTML结构中,.cd-main包含页面主体内容,.cd-side-navigation包含着侧边导航条,#cd-loading-bar则是用来做进度条动画用的. <nav class="cd-side-navigation"> <ul> <li> <a href="

  • 基于javascript的JSON格式页面展示美化方法

    {"name": "monkey","age": "24","height": 164.0} 如果想让以上json字符串在页面上展示的比较易读,即变成下面的style: { "name": "monkey", "age": "24", "height": 164.0cm } 本文介绍的方法基于javascri

  • 基于JavaScript实现幸运抽奖页面

    JS实现简单的幸运抽奖页面,供大家参考,具体内容如下 效果图: 图片素材 : 代码如下,复制即可使用: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>幸运抽奖页面</title> <style> /*CSS代码*/ *{ padding:0; margin:0; } .login-box{

  • 点弹代码 点击页面任何位置都可以弹出页面效果代码

    复制代码 代码如下: document.writeln("<script type=\"text\/javascript\"> "); document.writeln("var isPoped = false; "); document.writeln("document.onclick = function() "); document.writeln("{ "); document.wri

  • 基于JavaScript获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

  • 基于JavaScript实现跳转提示页面

    先给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 网页布局 <p>操作成功</p> <strong>5</strong><span>秒后回到主页</span><a href="javascript:history.back();">返回</a> 任务: 1.打开网页后,如果不做任何操作则返回到一个新的页面 var num=document.getElementsByTagName(

  • 基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)

    废话不多说了,直接给大家贴js代码了.具体代码如下所示: function Location(){}; Location.prototype.getLocation = function(callback){ var options = { enableHighAccuracy: true, maximumAge: 1000 }; this.callback = Object.prototype.toString.call(callback) =="[object Function]"

  • 基于Android实现点击某个按钮让菜单选项从按钮周围指定位置弹出

    Android Material Design:PopupMenu Android Material Design 引入的PopupMenu类似过去的上下文菜单,但是更灵活. 如图所示: 现在给出实现上图PopupMenu的代码. 本例是一个普通的Button触发弹出PopupMenu. 测试的MainActivity.java : package zhangphil.materialdesign; import android.app.Activity; import android.os.B

随机推荐