<head>
<title>html－WEB开发</title>
</head>
<body>
<div id="img" style="position:absolutez-index=99">
<img src="http://www.alixixi.com/images/face/image21.gif" onClick="pause_resume()" border="0" alt='img' onload="return imgzoom(this,600)" onclick="javascript:window.open(this.src)" style="cursor:pointer"/>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var xPos = document.body.clientWidth-20
var yPos = document.body.clientHeight/2
var step = 1
var delay = 5
var height = 0
var Hoffset = 0
var Woffset = 0
var yon = 0
var xon = 0
var pause = true
var interval
img.style.top = yPos
function changePos() {
width = document.body.clientWidth
height = document.body.clientHeight
Hoffset = img.offsetHeight
Woffset = img.offsetWidth
img.style.left = xPos + document.body.scrollLeft
img.style.top = yPos + document.body.scrollTop
if (yon) {
yPos = yPos + step
}else {
yPos = yPos - step
}
if (yPos <0) {
yon = 1
yPos = 0
}
if (yPos >= (height - Hoffset)) {
yon = 0
yPos = (height - Hoffset)
}
if (xon) {
xPos = xPos + step
}else {
xPos = xPos - step
}
if (xPos <0) {
xon = 1
xPos = 0
}
if (xPos >= (width - Woffset)) {
xon = 0
xPos = (width - Woffset)
}
}
function start() {
img.visibility = "visible"
interval = setInterval('changePos()', delay)
}
function pause_resume() {
if(pause) {
clearInterval(interval)
pause = false
}else {
interval = setInterval('changePos()',delay)
pause = true
}
}
start()
// End -->
</script>
</body>
</html>
仔细检查插件代码复制是否齐全
这种问题你可以直接贴代码上来比较好解决问题
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5动画飘窗导航</title>
<style type="text/css">
* {
margin: 0px
padding: 0px
}
html, body {
width: 100%
height: 100%
overflow: hidden
}
body {
background: url("img/1.jpg") no-repeat
background-size: cover
}
nav {
width: 25%
height: 45px
margin: 150px auto 0px
border-radius: 5px
background: -webkit-linear-gradient(top, #fff, #999999)
}
nav > ul {
display: -webkit-box
}
nav > ul > li {
list-style: none
line-height: 45px height: 45px overflow: hidden
text-align: center
-webkit-box-flex: 1
}
nav > ul > li > a {
text-decoration: none
color: #000
}
.sun_nav {
-webkit-perspective: 800px
}
.sun_nav li {
list-style: none
border: 1px solid #fff
margin: 2px 0
transform: rotateY(180deg)
transition: all .8s
opacity: 0
}
.sun_nav li a {
text-decoration: none
color: #fff
}
nav > ul > li:hover{
height: 400px
}
nav > ul > li:hover .sun_nav li{
transform: rotateY(0deg)
opacity: 1
}
nav > ul > li:hover .sun_nav li:nth-child(1) {
-webkit-transition-delay: 0ms
}
nav > ul > li:hover .sun_nav li:nth-child(2) {
-webkit-transition-delay: 50ms
}
nav > ul > li:hover .sun_nav li:nth-child(3) {
-webkit-transition-delay: 100ms
}
nav > ul > li:hover .sun_nav li:nth-child(4) {
-webkit-transition-delay: 150ms
}
</style>
</head>
<body style="background: #000000">
<nav>
<ul>
<li id="aa"><a href="">产品展示</a>
<ul class="sun_nav">
<li><a href="">帮助中心</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="">帮助中心</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）