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 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
JS常用函数使用指南
Nov 23 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
轮播图组件js代码
Aug 08 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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 图片上传类代码
2009/07/17 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
js常见遍历操作小结
2019/06/06 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
大学生简单自荐信
2013/11/10 职场文书
医科大学生的自我评价
2013/12/04 职场文书
少先队入队活动方案
2014/02/08 职场文书
财务简历的自我评价
2014/03/05 职场文书
爱心捐助倡议书
2014/05/19 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python