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

paddx

一、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

感谢LZ分享

babay631

感谢LZ分享