js 飘动 图片广告

 <div id="codefans_net" style="position:absolute;left: 0px; top: 0px;z-index:1999;">
<!--链接地址--><a href="http://*/pzweb/jsp/kslogin_zy.jsp" target="_blank">
<!--图片地址--><img src="*xin.png" border="0">
</a>
</div>
<script> 
var x = 20,y = 30 
var xin = true, yin = true 
var step = 1 
var delay = 10 
var obj= document.getElementById("codefans_net") 
 
function float() { 
     
    var L=T=0
    var R = $(window).width() - obj.offsetWidth 
    var B = $(window).height() - obj.offsetHeight 
 
    $("#codefans_net").css('left', x + document.body.scrollLeft ); 
    $("#codefans_net").css('top',  y + document.body.scrollTop ); 
     
    x = x + step*(xin?1:-1) 
    
    if (x < L) { xin = true; x = L} 
    if (x > R){ xin = false; x = R} 
    y = y + step*(yin?1:-1) 
    if (y < T) { yin = true; y = T } 
    if (y > B) { yin = false; y = B } 

var itl= setInterval("float()", delay) 
obj.οnmοuseοver=function(){clearInterval(itl)} 
obj.οnmοuseοut=function(){itl=setInterval("float()", delay)} 
</script>

转载于:https://my.oschina.net/sorryd/blog/724051

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML中有几种方式可以实现广告飘动的效果,其中比较常见的有以下两种: 1. 使用CSS动画:通过CSS3的动画属性(animation)来实现广告飘动效果。例如: ```html <div class="ad">这里是广告</div> ``` ```css .ad { animation-name: move; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(50%); } 100% { transform: translateX(0); } } ``` 上述代码中,我们定义了一个类名为`ad`的`div`,并使用CSS3的`animation`属性来实现广告飘动效果。具体来说,我们通过`@keyframes`关键字定义了一个名为`move`的动画,该动画从左向右移动50%的距离,再从右向左移回原来的位置,循环不断地重复执行。 2. 使用JavaScript:通过JavaScript代码来实现广告飘动效果。例如: ```html <div class="ad">这里是广告</div> ``` ```javascript var ad = document.querySelector('.ad'); var pos = 0; var dir = 1; function move() { pos += dir; ad.style.left = pos + 'px'; if (pos >= (window.innerWidth - ad.offsetWidth) || pos <= 0) { dir = -dir; } requestAnimationFrame(move); } move(); ``` 上述代码中,我们首先获取了类名为`ad`的`div`元素,并定义了一个变量`pos`来表示广告的当前位置,以及一个变量`dir`来表示广告移动的方向。然后,我们定义了一个`move`函数,该函数通过不断地修改广告的`left`属性来实现广告飘动效果,并在广告到达窗口边缘时改变移动方向。最后,我们使用`requestAnimationFrame`函数来循环执行`move`函数,从而实现动画效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值