< a href="http://www." /> < a href="http://www." />
返回顶部
首页 > 资讯 > 精选 >JavaScript制作会反弹的浮动图片(转)
  • 906
分享到

JavaScript制作会反弹的浮动图片(转)

2023-06-03 06:06:43 906人浏览 安东尼
摘要

现在网上流行会弹来弹去的浮动图片。想给自己的网页也加上一个吗?其实很简单,把下面这段代码加到网页的之间,然后,把图片换成你中意的就OK啦!   到这里下载示例代码 < div id="img" > < a href="http://www.

现在网上流行会弹来弹去的浮动图片。想给自己的网页也加上一个吗?其实很简单,把下面这段代码加到网页的之间,然后,把图片换成你中意的就OK啦!

  到这里下载示例代码

< div id="img" >
< a href="http://www.eschool.com.cn" target="_blank">
< img src="/Article/UploadPic/2005-7/20057504250720.gif" >
< /a>
< /div>

< script LANGUAGE="Javascript">
< !-- 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);
}
start();
// End -- >
< /script >[@more@]

--结束END--

本文标题: JavaScript制作会反弹的浮动图片(转)

本文链接: https://lsjlt.com/news/233277.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript制作会反弹的浮动图片(转)
    现在网上流行会弹来弹去的浮动图片。想给自己的网页也加上一个吗?其实很简单,把下面这段代码加到网页的之间,然后,把图片换成你中意的就OK啦!   到这里下载示例代码 < div id="img" > < a href="http://www....
    99+
    2023-06-03
  • javascript特效:飘动的图片(转)
    写了很多关于JS的特效,但大部分效果都是固定在一定的区域内,那今天我们来编个自由活动的JS效果!  大家都看过很多网站中在页面上自由活动的图片,很吸引人,而且适合于做广告招牌,可以获得更高的点击率,一般做这种效果可以通过Dreamweave...
    99+
    2023-06-03
  • 如何使用JavaScript实现HTML转图片的操作
    在web开发中,JavaScript和HTML是我们最常用的技术。而有时候,我们需要把HTML的内容转换成图片,比如在制作海报、截图等场景中。本文将介绍如何使用JavaScript实现HTML转图片的操作。一、使用canvas实现HTML转...
    99+
    2023-05-14
  • Python中图片转数组、二进制互转的操作示例
    小编给大家分享一下Python中图片转数组、二进制互转的操作示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言需要导入以下包,没有的通过pip安装import...
    99+
    2023-06-07
  • 利用JavaScript制作一个酷炫的3D图片演示
    目录前言一、页面特效效果展示二、功能描述三、功能实现前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面。但往往那些页面的源代码对初学的伙伴们都不太友好。今天给大家分享一...
    99+
    2024-04-02
  • 如何利用JavaScript制作一个酷炫的3D图片
    这篇文章将为大家详细讲解有关如何利用JavaScript制作一个酷炫的3D图片,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、页面特效效果展示注:上述效果图只是部分效果,原谅我还没有学会自制gif图!二...
    99+
    2023-06-29
  • Android中利用matrix 控制图片的旋转、缩放、移动
    本文主要讲解利用android中Matrix控制图形的旋转缩放移动,具体参见一下代码: 代码如下:  public class CommonImgEffectView...
    99+
    2022-06-06
    图片 控制图 matrix Android
  • Dreamweaver如何制作鼠标经过图片晃动的效果
    这篇文章给大家分享的是有关Dreamweaver如何制作鼠标经过图片晃动的效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。方法如下行为需要三个步骤,一是需要对象,也就是说要选中对象。就拿网页头部的图片来示例吧。...
    99+
    2023-06-08
  • 在Flutter中制作翻转卡片动画的完整实例代码
    目录前言使用自写代码预览完整代码使用第三个插件编码结论前言 本文将带您了解在 Flutter 中制作翻转卡片动画的两个完整示例。第一个示例从头开始实现,第二个示例使用第三方包。闲话少...
    99+
    2024-04-02
  • Android应用中制作选中后图标变大浮动效果的代码分享
     最近在玩3g体育门户客户端的时候,看到这样个效果: 轻触赛事图标,会有一个图标变大浮出的效果.,蛮有意思的.于是就把仿照它做了一个.   这个是原图:&n...
    99+
    2022-06-06
    动效 Android
  • CSS3制作带方向感应的鼠标滑过图片3D动画
    本篇内容介绍了“CSS3制作带方向感应的鼠标滑过图片3D动画”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2024-04-02
  • 如何使用CSS制作无缝滚动的图片轮播的效果
    随着互联网的发展和人们对美观性的追求,图片轮播已经成为网页设计中常见的元素之一。无缝滚动的图片轮播效果能够吸引用户的注意力,增加页面的互动性和视觉效果。在本文中,我们将介绍如何使用CSS来实现无缝滚动的图片轮播效果,并提供具体的代码示例。首...
    99+
    2023-10-21
    图片轮播 CSS 无缝滚动
  • Android实现中轴旋转特效 Android制作别样的图片浏览器
    Android API Demos中有很多非常Nice的例子,这些例子的代码都写的很出色,如果大家把API Demos中的每个例子研究透了,那么恭喜你已经成为一个真正的Android高手了。这也算是给一些比较迷茫的Android开发者一个指...
    99+
    2023-05-30
  • 如何使用CSS制作无缝滚动的图片展示栏的效果
    随着互联网的发展,图片展示成为了很多网站设计中必不可少的一部分。而无缝滚动的图片展示栏效果,更是能够吸引用户目光,提升网站的视觉效果和用户体验。在本文中,我将向您介绍如何使用CSS来实现无缝滚动的图片展示栏效果,并提供具体的代码示例。实现无...
    99+
    2023-10-21
    图片展示 无缝滚动 关键词:CSS
  • Android使用gallery和imageSwitch制作可左右循环滑动的图片浏览器
    效果图: 为了使图片浏览器左右无限循环滑动 我们要自定义gallery的adapter 如果要想自定义adapter首先要了解这几个方法 @Override publi...
    99+
    2022-06-06
    浏览器 循环 图片 gallery Android
  • 如何使用CSS制作滚动加载的图片展示效果的实现步骤
    随着网页技术的发展,滚动加载已成为一种常见的图片展示方式。通过使用CSS,我们可以实现一个具有滚动加载功能的图片展示效果,让网页在用户滚动的同时自动加载新的图片,提升用户体验。下面将介绍一种实现滚动加载图片展示效果的具体步骤,并提供相应的代...
    99+
    2023-10-21
    图片展示 CSS 滚动加载
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作