js实现图片漂浮效果的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下:

描述:打开网页就看到不停在飘动的图片,点击连接到其他页面;起到着重强调的效果!

<html>  

<head>  

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

    <title>test</title>  

    <style type="text/css">   

        #All{ width: 100%; height: 3000px;}  

    </style>  

</head>  

<body>    

    <div id="All">   

        <div id="img" style="position: absolute; z-index:99;">   

            <a href="#" target="_blank"><img src="Images/OPVTI.jpg" border="0"  style="cursor: pointer;" style="cursor: pointer;" /></a>   

            <script language="JavaScript">  

    <!--Begin  

                var xPos = document.body.clientWidth - 20;  

                var yPos = document.body.clientHeight / 2;  

                var step = 1;  

                var delay = 10;  

                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>  

        </div>  

    </div>  

</body>  

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 #Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 #Javascript
JavaScript数组常用方法
Mar 02 #Javascript
使用npm发布Node.JS程序包教程
Mar 02 #Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 #Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 #Javascript
Javascript动画的实现原理浅析
Mar 02 #Javascript
You might like
PHP 批量更新网页内容实现代码
2010/01/05 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python实现ATM系统
2020/02/17 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
django使用graphql的实例
2020/09/02 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
关于毕业的广播稿
2014/01/10 职场文书
家庭困难证明
2014/10/12 职场文书
2014年食堂工作总结
2014/11/20 职场文书
市场营销计划书范文
2015/01/16 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android