鱼C工作室助手的jquery实现代码
本帖最后由 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).clientWidth*i
},
{
queue: false,
duration: 1000
});
},30000);
感谢LZ分享 感谢LZ分享
页:
[1]