`
yangfuchao418
  • 浏览: 167578 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

漂浮,鼠标拖动,自动变图,手动变图———史上最牛的四合一广告图片

阅读更多

<div id="img" style="position:absolute;">
<img src="images\T1BJ8dXjVEJ7BXXXXX.jpg_160x160.jpg"
onClick="pause_resume();">
</div>

<script>

var NowFrame = 1;
var MaxFrame = 4;
function show(d1) {
if(Number(d1)){
clearTimeout(theTimer);NowFrame=d1;}
for(var i=1;i<(MaxFrame+1);i++){
if(i==NowFrame)
document.getElementById('div'+NowFrame).style.display ='';else
document.getElementById('div'+i).style.display ='none';}
{ if(NowFrame == MaxFrame)NowFrame = 1;
else
NowFrame++;}
theTimer=setTimeout('show()', 2000);}
//=====================
var Obj
function MouseDown(obj){
Obj=obj
Obj.setCapture()
Obj.l=event.x-Obj.style.pixelLeft
Obj.t=event.y-Obj.style.pixelTop
}
function MouseMove(){
if(Obj!=null){
Obj.style.left = event.x-Obj.l
Obj.style.top = event.y-Obj.t
}
}
function MouseUp(){
if(Obj!=null){
Obj.releaseCapture()
Obj=null
}
}
//========================
<!-- Begin
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
// End -->
</script>

//===================================

<span
style='position: absolute; width: 200; height: 200; background: #FFFFFF'
onmousedown=MouseDown(this) onmousemove=MouseMove()
onmouseup=MouseUp()> <IMG src="images/ad-01.jpg"
style="display: none;" id="div1" border="0"> <IMG
src="images/ad-02.jpg" style="display: none;" id="div2"
border="0"> <IMG src="images/ad-03.jpg"
style="display: none;" id="div3" border="0"> <IMG
src="images/ad-04.jpg" style="display: none;" id="div4"
border="0">

<DIV style="position: absolute; left: 120px; top: 180px;"
align="center">
<A href="javascript:show(1)">1</A>&nbsp;
<A href="javascript:show(2)">2</A>&nbsp;
<A href="javascript:show(3)">3</A>&nbsp;
<A href="javascript:show(4)">4</A>&nbsp;
</DIV> </span>

分享到:
评论

相关推荐

    jQuery可拖动图片漂浮广告代码.zip

    该代码的核心功能是让图片广告能够在用户浏览网页时始终保持在屏幕上的特定位置,同时允许用户通过鼠标拖动来调整广告的位置,提供了一种灵活且吸引注意力的广告呈现形式。 首先,我们需要了解jQuery,它是一个广泛...

    常用的网页漂浮图片广告代码

    网页漂浮图片广告是网页设计中一种常见的营销手段,它通过JavaScript实现,可以在用户浏览页面时,让广告图片在特定位置浮动,增加广告的曝光率。这种广告代码的设计需要考虑到用户体验,既要达到广告效果,又不能...

    jquery浮动图片广告代码_页面上漂浮图片广告代码

    本文将深入探讨如何利用jQuery实现页面上的浮动图片广告代码。 首先,我们需要了解jQuery的基本用法。jQuery简化了JavaScript的DOM操作,事件处理和动画效果。要引入jQuery库,通常会在HTML文件的`&lt;head&gt;`部分添加...

    页面漂浮移动图片广告

    在网页设计和开发中,页面漂浮移动图片广告是一种常见的营销策略,用于吸引访客注意力并提高品牌曝光度。这种类型的广告通常会出现在网页的某个角落,随着用户滚动页面而保持在视窗可见范围内,因此被称为“漂浮”或...

    jQuery漂浮横幅图片广告代码.zip

    而jQuery漂浮横幅图片广告代码则是一种能够使广告在页面上动态移动,增加用户注意力的技术。本文将深入解析这一技术,帮助开发者理解和应用。 首先,jQuery 是一个快速、简洁的JavaScript库,它简化了HTML文档遍历...

    网站特效(网页中图片到处漂浮,广告图片)

    在网页设计中,为了吸引用户的注意力或增加互动性,经常使用各种特效,其中包括“网站特效(网页中图片到处漂浮,广告图片)”。这个特效通常指的是浮动广告或者漂浮元素,它们可以在用户滚动页面时始终保持在屏幕的...

    全屏图片广告随机漂浮可点击关闭jQuery特效.zip

    全屏图片广告随机漂浮可点击关闭的jQuery特效是一种常见的网页动态效果,它可以在网站页面上创建引人注意的广告展示。此特效的核心是利用jQuery库的灵活性和强大的DOM操作功能,来实现图片的随机位置显示、鼠标悬停...

    常见的在屏幕内漂浮的图片广告效果代码

    在屏幕内漂浮的图片广告效果代码 在互联网广告领域中,浮动广告是一种常见的广告形式,能够吸引用户的注意力。但是,浮动广告也存在一些缺点,例如对用户体验的影响。今天,我们将讨论一种常见的浮动广告代码,用于...

    漂浮广告代码 漂浮广告

    【标题】:“漂浮广告代码 漂浮广告” 在网页设计中,漂浮广告是一种常见的网络广告形式,它能够在用户浏览页面时始终悬浮在屏幕的一侧或角落,吸引用户的注意力。这种广告类型的设计和实现涉及到HTML、CSS以及...

    jQuery实现的可拖动的图片漂浮广告特效源码.zip

    在本资源中,我们关注的是一个使用jQuery库实现的可拖动图片漂浮广告特效的源码。jQuery是一个广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个源码利用...

    同时漂浮多个图片广告的JS特效

    "同时漂浮多个图片广告的JS特效"是一种常见的网页交互技术,它允许多张图片在页面上随机位置浮动,每次刷新页面时图片的位置都会有所不同,这样既保持了页面的新鲜感,又能确保广告的曝光率。 这种特效的核心是...

    jQuery浮动图片广告代码.zip

    jQuery浮动图片广告代码是一种网页设计技术,用于在网站页面上实现动态漂浮的图像广告。这种广告形式可以吸引用户的注意力,提高广告的可见性和点击率。以下是对这一技术的详细解释: 1. **jQuery库**:jQuery是一...

    js实现全屏漂浮广告移入光标停止移动

    JS全屏漂浮广告&lt;/title&gt;&lt;style type=”text/css”&gt;div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}&lt;/style&gt;&lt;/head&gt; &lt;body&gt;&lt;div&gt;&lt;div&gt;...

    漂浮图片随页面而滚动

    在网页设计中,有时我们需要创建一种效果,使得某些图片元素如广告或通知,在用户滚动页面时始终保持在屏幕的可见区域内,这种效果被称为“漂浮图片”或者“固定定位”。本教程将详细介绍如何利用jQuery和一个名为...

    网页模板——javascript 物理弹性漂浮广告.zip

    【标题】"网页模板——javascript 物理弹性漂浮广告.zip" 涉及到的知识点主要集中在网页设计、JavaScript编程以及广告展示技术上。在网页设计领域,漂浮广告通常指的是那些在用户滚动页面时始终停留在屏幕某个位置的...

    网页漂浮广告代码,能够轻松的实现图片在网页上面漂浮

    网页漂浮广告是一种常见的网络营销策略,它通过在用户浏览网页时让广告图片或元素在页面上浮动,从而吸引用户的注意力。这种技术主要依赖于JavaScript,一种广泛用于网页动态效果和交互功能的编程语言。在本案例中,...

    JS漂浮广告代码,图片飘动,响应鼠标停止

    标题中的“JS漂浮广告代码,图片飘动,响应鼠标停止”揭示了这个压缩包文件包含的是一段JavaScript代码,用于实现网页上的漂浮广告效果。这种广告通常会在页面上浮动,跟随用户的滚动,当鼠标靠近时会停止移动,以...

    3个图片同时漂浮JS广告特效.rar

    图片广告的JS特效,一次漂浮3个图片,不知道能用上不。  用法:  var adver=new adverClass  adver.showAdver("img.gif","http://www.codesc.net/","codesc");

    图片随机漂浮

    在IT行业中,"图片随机漂浮"通常是指一种网页或应用程序中的动态效果,它使得图片在页面上以随机的位置和方向出现,给人带来一种动感和趣味性。这种效果常常用于广告设计、网页交互或者游戏元素中,以吸引用户的注意...

Global site tag (gtag.js) - Google Analytics