个人中心
gpt4 book ai didi

javascript - 带有翻转的jquery动画

转载 作者：行者123 更新时间：2023-11-28 19:03:01 25 4
gpt4 key购买 nike

我有这个带有 jquery cycle 的小页面介绍，我正在尝试对其进行设置，以便当您翻转单独的图像时会发光。由于某种原因，它只是没有出现。我用 css 和 js 试过了。有谁知道出了什么问题吗？

直播:http://daveywhitney.com/moons/ 

<!DOCTYPE html> 
<html> 
<head> 
<title>MOON</title> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.centermoon').cycle({
        fx: 'fade',
        timeout: 1000,
        speed:  500,
        cleartypeNoBg: true,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.moonpieces').cycle({
        fx: 'curtainX',
        timeout: 1100,
        speed:  1500,
        cleartypeNoBg: true,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.fadenav').cycle({
        fx: 'curtainX',
        timeout: 1500,
        speed:  500,
        cleartypeNoBg: true,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript">
$(document).ready(function(){   
    $('#navfade').fadeIn(2000);
});
</script>




</head> 
<body> 
<div id="wrapper">
<div id="logo">

</div>


<div id="headwrap">
<div id="moonwrap">
    <div class="centermoon"> 
        <img src="http://daveywhitney.com/moons/img/spacer.png"  /> 
        <img src="http://daveywhitney.com/moons/img/centermoon.png"  /> 
    </div> 

    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece1.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece2.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece3.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece4.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece5.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece6.png" />
    </div>

</div>
<div id="navfade" style="display:none;">


<ul id="nav">

<li><a class="cntct"href="#">Contact Us</a></li>
<li><a href="#" class="gal">Gallery</a></li>
<li><a href="#" class="prods" >Production Services</a></li>
<li><a href="#" class="home">Home</a></li>


<li><a href="#" class="mktng">Marketing Services</a></li>
<li><a href="#" class="clist">Client List</a></li>
<li><a href="#" class="clogin">Client Login</a></li>

</ul>
</div>

</div>
</div>
</body> 
</html>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END RESET - BEGIN LAYOUT */

html {
    background-image:url('http://daveywhitney.com/moons/img/bg.jpg');
}

#logo {
    width:700px;
    height:136px;
    margin:0 auto;
}

#wrapper {
width:1020px;
margin:0 auto;
}

#moonwrap {
    width:1020px;
    height:455px;
    margin:0 atuo;

}
.moonpieces {
    width:1019px;
    height:455px;
    position: absolute;
    z-index: -1;
}

.centermoon {
    width:1019px;
    height:455px;
    position: absolute;
}

#nav {
width:1020px;
margin:40px 0 0 0;
padding:0; 
}
#nav li {
display:inline;
padding:0;
color:#fff;
}

#nav li a {
    color:#777;
}




.gal {
margin:0 0 0 40px;
}

.prods {
margin:0 0 0 60px;
}

.home {
margin:0 0 0 140px;
}

.mktng {
    margin:0 0 0 150px;
}

.clist {
    margin: 0 0 0 40px;
}

.clogin {
    margin: 0 0 0 40px;
}






a #headwrap:hover {
    background-position: -150px 0;
    color:#fff;
}

最佳答案

您可以使用:

.className {
    -moz-box-shadow: 1px 1px 5px #fff;
    -webkit-box-shadow: 1px 1px 5px #fff;
    box-shadow: 1px 1px 5px #fff;
}

JSFiddle

关于javascript - 带有翻转的jquery动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4878132/

25 4 0
文章推荐： css - CSS 文件 AjaxControlToolkit 在哪里？
文章推荐： javascript - JS Loop 不会循环，直到我注释掉我的 switch 方法
文章推荐： javascript - JSONP 查询和 AngularJS
文章推荐： python - 是否有一个 Python 等效于 C 的 strtod 的 endptr 参数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com