学院网站需要在首页加一个图片在浏览器边缘移动的功能,第一次写博客留作纪念
javaScript代码:
<script>
$(function(){
var widthhh = $(window).width()-240;
var highttt = $(window).height()-145;
//页面加载后开始动
movepic();
//鼠标悬停停止
$(".movediv").hover(function(){
$(".movediv").stop();
},function(){
var topss = parseInt($(".movediv").css("top").substring(0,$(".movediv").css("top").length-2));
var leftss = parseInt($(".movediv").css("left").substring(0,$(".movediv").css("left").length-2));
if(topss==0){
movepic();
}
else if(leftss>widthhh/2){
movepic2();
}
else if(leftss<=widthhh/2){
movepic3();
}
});
})
//从左上向右上动
function movepic(){
var widthhh = $(window).width()-240;
var highttt = $(window).height()-145;
var speed1 = widthhh/10000;
var X = $('.movediv').offset().left;
$(".movediv").stop().animate({
left: widthhh
},(widthhh-X)/speed1,function(){
movepic2();
});
}
//从右上向底中动
function movepic2(){
var widthhh = $(window).width()-240;
var highttt = $(window).height()-145;
var speed1 = widthhh/10000;
var X = $('.movediv').offset().left;
var Y = $('.movediv').offset().top;
var O = Math.sqrt((widthhh/2)*(widthhh/2)+highttt*highttt);
var Z = Math.sqrt((widthhh-X)*(widthhh-X)+Y*Y);
if(Z==0){
$(".movediv").stop().animate({
top: highttt,
left: widthhh/2
},10000,function(){
movepic3();
});
}else{
$(".movediv").stop().animate({
top: highttt,
left: widthhh/2
},(O-Z)/speed1,function(){
movepic3();
});
}
}
//从底中向左上动
function movepic3(){
var widthhh = $(window).width()-240;
var highttt = $(window).height()-145;
var speed1 = widthhh/10000;
var X = $('.movediv').offset().left;
var Y = $('.movediv').offset().top;
var Z = Math.sqrt(X*X+Y*Y);
$(".movediv").stop().animate({
left: 0,
top: 0
},Z/speed1,function(){
movepic();
});
}
</script>
HTML代码:
<!--移动的图片-->
<div class="movediv">
<a target="_blank" href="http://www.cse.neu.edu.cn/CollectionPage.aspx?navigation_id=94b412e5-db85-4e6c-9516-0e163f00c229&news_type=bdf278ff-303d-402f-89a0-4422dde9efd1&news_subtype=4ce1eeaa-f852-4e51-8ba7-34d8746b3593&module=%u7EDF%u62DB%u7814%u7A76%u751F%u62DB%u751F%u4FE1%u606F&cat=2">
<img style="width:240px;height:145px" src="img/飘窗样式.jpg" />
</a>
</div>
<pre name="code" class="html"> <style type="text/css">
*{
border: 0;
}
.movediv{
width: 240px;
height: 145px;
position: absolute;
left: 0;
top: 0;
}
</style>