189 8069 5689

JavaScript侧滑,html侧滑

求Javascript达人 解惑!!

这段代码是用来判断当前页面刷新还是关闭。

创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都做网站、成都网站设计、陇川网络推广、小程序开发、陇川网络营销、陇川企业策划、陇川品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供陇川建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

首先有点知识我得和楼主说明一下:

其实这段代码主要是用于聊天室窗口的,一般的聊天室窗口是除了标题栏和侧滑栏,其余的XX栏都没有的。用javascript弹出一个这样的窗口的代码是:

script language="JavaScript"

window.open('欲加载的网页的地址','_blank','width=窗口宽,height=窗口高,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');

/script

其中值为“no”的就是不要的XX栏。

这段代码中有几个属性值得说明一下:

1.window.onbeforeunload():此方法被触发于:

关闭浏览器窗口

通过地址栏或收藏夹前往其他页面的时候

点击返回,前进,刷新,主页其中一个的时候

点击 一个前往其他页面的url连接的时候

如果是用于上面我提到的聊天室窗口,那就只考虑两个事件四个方法:

1、正常关闭:点击关闭按钮(右上角,这个按钮的大小和代码中那个“-20”有关,最后我会说到);或者 按下ALT+F4键(所以代码中有对ALT键的检测)。

2、正常刷新:按下F5键;或者 通过右键刷新。

2.

window.event.screenX:鼠标相对于用户屏幕的水平位置

window.screenLeft:窗口左上角相对于屏幕左上角的水平位置

window.event.clientY:鼠标在窗口客户区域(除去所有的XX栏)中的Y坐标(比如在标题栏上时,该值为负值)

window.event.altKey:当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。

document.documentElement.scrollWidth:窗口网页正文全文宽

所以

n = window.event.screenX - window.screenLeft:

求出鼠标在当前窗口上的水平位置(参照:当前窗口左上角为0、0坐标)。

b = n document.documentElement.scrollWidth-20:

只看水平坐标:鼠标在当前窗口内时,nm,b为false;鼠标在当前窗口外时,nm,b为true。20这个值是指关闭按钮的宽度。 m=document.documentElement.scrollWidth-20

window.event.clientY 0:

只看垂直坐标:鼠标在客户区内时,y0,x为false;鼠标在客户区外时,y0,x为true。y=window.event.clientY

综上:

当onbeforeunload时间发生时,有ALT按下,或者鼠标的位置在标题栏的最右上角(鼠标停留在关闭按钮上时)。就能执行if为真的语句了。

window.event.returnValue = ""; 主要是用来当用户关闭了窗口而不是刷新时返回一个值,这个值由你设定。

!----------------------------------------------------------------

如果这样说,不太好懂。

我把代码做成了实例,自己刷新或者关闭页面试试就明白了。

两个页面,第一个页面用来弹出第二个页面,第二页面为我们需要了解的代码所在页面。

test1.html

html

body

script language="JavaScript"

window.open('test2.html','_blank','width=600,height=600,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');

/script

/body

/html

test2.html

html

body

body

SCRIPT LANGUAGE="JavaScript"

window.onbeforeunload = function()

{

var n = window.event.screenX - window.screenLeft; //检测鼠标相对于用户屏幕的水平位置 - 网页正文部分左:求出鼠标在当前窗口上的水平位置(参照:当前窗口右上角为0、0坐标)

var m = document.documentElement.scrollWidth-20; //网页正文全文宽

var y = window.event.clientY; //返回鼠标在窗口客户区域(除去所有的XX栏)中的Y坐标

var z = window.event.altKey //当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。

var b = n m; //只看水平坐标:鼠标在页面内时,nm,b为false;鼠标在页面外,nm,b为true。

var x = y 0; //只看垂直坐标:鼠标在客户区内时,y0,x为false;鼠标在客户区外时,y0,x为true。

if(b x || z) //当onbeforeunload时间发生时,

{

alert("是关闭而非刷新\r\n"+"鼠标在当前窗口上的水平位置:"+n+"\r\n网页正文全文宽:"+m+"\r\n鼠标在窗口客户区域中的Y坐标:"+y+"\r\nALT键是否按下:"+z);

window.event.returnValue = ""; //这里可以放置你想做的操作代码

}else{

alert("是刷新而非关闭\r\n"+"鼠标在当前窗口上的水平位置:"+n+"\r\n网页正文全文宽:"+m+"\r\n鼠标在窗口客户区域中的Y坐标:"+y+"\r\nALT键是否按下:"+z);

}

}

/script

p

聊天室

/p

/body

/html

注意::::::

这个代码看似不错,但是有一点,它的基础是以用户的浏览器窗口为标准windows窗口而定的。也就是说,用户的浏览器窗口得是win2000那个样子的,因为这个样子下,关闭按钮的大小才会在 20 象素以内。如果用户的窗口不是标准的windows窗口,而是其它的主题等等,这段代码可能就用不了了!

此外有个小BUG,当鼠标停留在最右上角(关闭按钮)时按下F5。代码会执行关闭窗口时的代码,但是窗口却只是刷新而已却不会关闭。

js那一级查二级写法

js那一级查二级写法如下

点击打开/收缩 二级 列表 ;2, 列表 下拉刷新数据;

3, 列表 上拉加载更多数据;

4, 列表 item项可侧滑

1)定义变量的时候要指明类型,告诉 JS 解释器这个变量是什么数据类型的,而不要让解释器去猜。

如何用CSS和jQuery实现一个侧滑导航菜单

可以参考:

为了建立导航菜单,让我们先看看html结构:

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleAnimation Menu Demo/title

link rel="stylesheet" href=""

link href='' rel='stylesheet' type='text/css'

link rel="stylesheet" href=""

script src=""/script

script src="script.js"/script

link rel="stylesheet" href="style.css"

/head

body

!-- Content goes here --

/body

/html

首先,我们引用normalize.css作为默认样式,以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。

面板按钮

每个网站面板导航按钮都类似。它往往是一个图标字体,如fontawesome,但在本教程中我想添加一些动画,所以我们用横线来实现。基本上,我们的按钮是一个跨度,包含三个div显示为水平横线。

span class="toggle-button"

div class="menu-bar menu-bar-top"/div

div class="menu-bar menu-bar-middle"/div

div class="menu-bar menu-bar-bottom"/div

/span

样式看起来如下:

.toggle-button {

position: fixed;

width: 44px;

height: 40px;

padding: 4px;

transition: .25s;

z-index: 15;

}

.toggle-button:hover {

cursor: pointer;

}

.toggle-button .menu-bar {

position: absolute;

border-radius: 2px;

width: 80%;

transition: .5s;

}

.toggle-button .menu-bar-top {

border: 4px solid #555;

border-bottom: none;

top: 0;

}

.toggle-button .menu-bar-middle {

height: 4px;

background-color: #555;

margin-top: 7px;

margin-bottom: 7px;

top: 4px;

}

.toggle-button .menu-bar-bottom {

border: 4px solid #555;

border-top: none;

top: 22px;

}

.button-open .menu-bar-top {

transform: rotate(45deg) translate(8px, 8px);

transition: .5s;

}

.button-open .menu-bar-middle {

transform: translate(230px);

transition: .1s ease-in;

opacity: 0;

}

.button-open .menu-bar-bottom {

transform: rotate(-45deg) translate(8px, -7px);

transition: .5s;

}

按钮有一个固定的位置,不动时滚动页面。它也有一个 z-index :15的样式,以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式,我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时,我们添加一个类.button-open。我们引用jQuery,可以比较方便的实现它:

$(document).ready(function() {

var $toggleButton = $('.toggle-button');

$toggleButton.on('click', function() {

$(this).toggleClass('button-open');

});

});

初学者可能不熟悉jQuery,让我解释一下这是怎么回事。首先,我们初始化一个变量称为$togglebutton,其中包含我们的按钮。我们将它存储为一个变量,然后我们创建一个事件监视器监听点击按钮。每单击一次,事件监听器会执行方法 function toggleclass()来切换.button-open。

.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度,与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。

侧滑菜单

侧滑菜单的html的结构如下:

div class="menu-wrap"

div class="menu-sidebar"

ul class="menu"

lia href="#"Home/a/li

lia href="#"About/a/li

lia href="#"Blog/a/li

li class="menu-item-has-children"a href="#"Click The Arrow/a

span class="sidebar-menu-arrow"/span

ul class="sub-menu"

lia href="#"Alignment/a/li

lia href="#"Markup/a/li

lia href="#"Comments/a/li

/ul

/li

lia href="#"Courses/a/li

lia href="#"Get In Touch/a/li

/ul

/div

/div

在这里不详细解释每个风格的菜单,我们看下.menu-wrap 的div。它的样式如下:

.menu-wrap {

background-color: #6968AB;

position: fixed;

top: 0;

height: 100%;

width: 280px;

margin-left: -280px;

font-size: 1em;

font-weight: 700;

overflow: auto;

transition: .25s;

z-index: 10;

}

它的位置是固定的,所以菜单一直在同一个地方滚动。高度设为100%。注意,左边距设置为负数,使这菜单从视图中消失。为了让它有一个出现的特效,我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下:

$(document).ready(function() {

var $toggleButton = $('.toggle-button'),

$menuWrap = $('.menu-wrap');

$toggleButton.on('click', function() {

$(this).toggleClass('button-open');

$menuWrap.toggleClass('menu-show');

});

});

我们增加一个变量$menuwrap其中包含菜单的所有项,并使用相同的事件来创建按钮。这个.menu-show的左边距为0,并增加了一些盒子阴影效果。

.menu-show {

margin-left: 0;

box-shadow: 4px 2px 15px 1px #B9ADAD;

}

子菜单和链接

你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时,链接后,有一个class .sidebar-menu-arrow。

li class="menu-item-has-children"a href="#"Click The Arrow/a

span class="sidebar-menu-arrow"/span

ul class="sub-menu"

!-- List items --

/ul

/li

span 有一个::after伪元素包实现fontawesome箭头。默认情况下,子菜单是隐藏的,只有单击父级菜单时才出现:

$(document).ready(function() {

var $sidebarArrow = $('.sidebar-menu-arrow');

$sidebarArrow.click(function() {

$(this).next().slideToggle(300);

});

});

当我们单击箭头,一个函数被调用时,它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失,函数有一个动画时间参数。

最后,我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下:

.menu-sidebar li a::after {

content: "";

display: block;

height: 0.15em;

position: absolute;

top: 100%;

width: 102%;

left: 50%;

transform: translate(-50%);

background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);

transition: background-position .2s .1s ease-out;

background-size: 200% auto;

}

.menu-sidebar li a:hover::after {

background-position: -100% 0;

}

这个::after伪元素包含在每个环节下绝对定位的块级元素,随着0.15em高度和宽度。我们不只是应用背景颜色的线,我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度,我们可以通过指定的百分比,做了一个渐变的颜色变化。

.menu-sidebar li a::after {

background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);

}

这里一半的线是透明的,另一半是黄色的。通过背景大小200%的宽度,使透明部分占用的所有链接的宽度。


分享文章:JavaScript侧滑,html侧滑
网址分享:http://jkwzsj.com/article/dsddogs.html

其他资讯