在网页中插入浮动窗口,js代码或css代码(易看易懂)

JavaScript08

在网页中插入浮动窗口,js代码或css代码(易看易懂),第1张

给你一段代码,创建了一个大小100*100的浮动窗口,贴着窗口的右边。

css代码:

<style type="text/css">

    #my_dialog {

        position: fixed /*固定定位*/

        right: 0

        top: 50% /*贴着右边,垂直位置50%*/

        height: 100px

        width: 100px /*尺寸 100 x 100*/

        transform: translate(0, -50%) /*通过位移,保证浮动窗口的垂直居中*/

        box-shadow: 0 0 3px 1px rgba(180, 180, 180, 0.5)

        background-color: white /*加些背景色和阴影,以便区分*/

    }

</style>

html代码:

<div id="my_dialog">

    <!--窗口内容-->

</div>

第一种方法:

Html代码

<html>

<head>

<title>浮动窗口</title>

<link type="text/css" rel="stylesheet" href="css/overflow.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/overflow.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var b = $("#b")

var overFlow = $("#over")

b.click(function(){

overFlow.fadeIn()

$("#mask").css("background","#111")

$("#mask").css("opacity","0.8")

})

$("#close").click(function(){

overFlow.fadeOut()

$("#mask").css("background","#fff")

$("#mask").css("opacity","1")

})

drag($("#over"),$("#title"))

})

</script>

</head>

<body>

<div id="over">

<div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div>

<div id="content">

When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>

---This is edited by Alp.

</div>

</div>

<div id="mask"><a id="b" href="#">click</a></div>

</body>

</html>

Js代码

function drag(overFlow,title){

title.onmousedown = function(evt){

var doc = document

var evt = evt || window.event

var x = evt.offsetX?evt.offsetX:evt.layerX

var y = evt.offsetY?evt.offsetY:evt.layerY

if(overFlow.setCapture){

overFlow.setCapture()

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

}

doc.onmousemove = function(evt){

evt = evt || window.event

var xPosition = evt.pageX || evt.clientX

var yPosition = evt.pageY || evt.clientY

var newX = xPosition - x

var newY = yPosition - y

overFlow.style.left = newX

overFlow.style.top = newY

}

doc.onmouseup = function(){

if(overFlow.releaseCapture){

overFlow.releaseCapture()

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

}

doc.onmousemove=null

doc.onmouseup=null

}

}

}

css代码

#over{

position: absolute

left: 300px

top: 200px

border: 1px solid black

display: none

background: #cccccc

cursor: default

width: 300px

z-index: 10

opacity: 1

}

#title{

border: 1px solid #1840C4

background: #95B4DC

padding: 2px

font-size:12px

cursor: default

}

#close{

cursor: pointer

margin-right: 1px

overflow: hidden

}

#content{

border: 1px solid #C2D560

background: #EFF4D7

}

#t{

margin-right:145px

}

#mask{

z-index: 1

background: #fff

width: 1024px

height: 800px

}

#b{

position: absolute

left: 200px

top: 100px

}

body{

padding: 0px

margin: 0px

}

#over{

background: transparent

}

第二种方法:

消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:noneposition:absolute"></iframe><div id="show_upload">nothing...</div>'

页面加载loading中:<div id="body_loading" onClick="loaded()"><img src="__PUBLIC__/images/body_load.gif"></div>

关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>

打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>

// 消息框loading

function loading(){

var o = $('#body_loading')

o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px")

o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px")

o.fadeIn("fast")

}

// 消息框消失

function loaded(){

var o = $('#body_loading')

o.fadeOut("fast")

}

// 隐藏浮动窗口

function hideupload(){

$('#show_upload').hide()

$('#show_upload_iframe').hide()

}

// 弹出浮动窗口

function showupload(ajaxurl){

loading()

var o=$('#show_upload')

var f=$('#show_upload_iframe')

var top = 200

$.ajax({

url: ajaxurl,

//cache: false,

success: function(res){

loaded()

o.html(res)

o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px")

if($(document).scrollTop()>200){

top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2)

}

o.css("top",top+"px")

f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')})

f.show()

o.show()

}

})

}

您好:

比如A1链接到Sheet2,在A1中输入公式

=HYPERLINK("#Sheet2!A1","Link")

这样就有超链接了,点击就跳过去了

# PS 其它的办法是VBA

在第一列中依次输入你的工作表的名字,大小写也要保持一样!

然后点击工作表标签,查看代码,把下面的代码贴在窗口中:

Private Sub Worksheet_SelectionChange(ByVal Target As Range)

If Target.Column <>1 Then Exit Sub

Worksheets(Target.Value).Activate

End Sub