鱼C工作室助手的jquery实现代码

paddx · 发表于 2013-7-20 22:11:19

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 paddx 于 2013-7-20 22:16 编辑

一、html及css设置：
1、html分为文字部分和图片部分
<div class="init" id="helper">
<h1>文字</h1>
<div id="girl"></div>
</div>
2、原则：保持图片与浏览器顶端的距离不变；外层div使用绝对定位，文字部分也使用绝对定位，并偏移图片向上30个像素点。
<style type="text/css">       .init{
         height:210px;
         width: 150px;
         position:absolute;
         top:0px;
      }
      .init h1{
         font-size: 12px;
         padding: 5px;
         font-weight: normal;
         text-align: center;
         display: none;
         position: absolute;
         top: -30px;
         width: 150px;
      background: #eee;
}
      #girl{
         height:190px;
         width: 150px;
         background: url(../images/spig.png) no-repeat top 0 left 0;
}
</style>
二、Jquery代码：
1、实现鼠标禁用右键：$("#girl").bind("contextmenu",function(){return false});
2、实现鼠标经过时改变透明度，并显示文字，鼠标移出时，变为不透明，并且隐藏文字： $("#girl").mouseover(function(){
            $("#girl").animate({opacity:0.3});
            showMsg();
            $("#helper h1").fadeIn();
         }).mouseout(function(){
            $("#girl").animate({opacity:1});
            $("#helper h1").fadeOut(1000);
});
3、产生随机的文字：
function showMsg(){
         var arr = ["白日依山尽","黄河入海流","两岸猿声啼不住","钦州已过万重山","春眠不觉晓","处处蚊子咬","撒上敌敌畏","不知死多少","天生我材必有用","唧唧复唧唧，木兰当户织，不闻机杼声，惟闻女叹息"]
            var i = Math.floor(Math.random()*10)
            $("#helper h1").html(arr);
}

4、实现页面滚动时，图片的动画效果：
$(document).scroll(function () {
            $("#helper").animate({
                        top: $(window).scrollTop() + 150
                     },
                     {
                        queue: false,
                        duration: 1000
});
});

5、实现图片随机的左右移动：
setInterval(function(){
            var i = Math.min(Math.max(Math.floor(Math.random()*10)/10.0,0.2),0.8);             $("#helper").animate({
                        left: $(window).scrollLeft()+$(document.body)[0].clientWidth*i
                     },
                     {
                        queue: false,
                        duration: 1000
                     });
},30000);

a102525417 · 发表于 2013-7-23 16:24:25

感谢LZ分享

babay631 · 发表于 2014-2-8 23:03:24

感谢LZ分享

账号		自动登录	找回密码
密码			立即注册

鱼C工作室助手的jquery实现代码

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +1 鱼币