网页前台页面图片飘窗代码

 <!---飘窗开始--->
    <div id="img1" style="z-index: 999; border: 1px solid rgb(204, 204, 204); width: 340px; background-color: white; height: 100px; position: absolute; top: 29px; left: 1230px; font-size: 13px;" >
            <div style="height:18px;margin-left:310px;margin-top:6px;">
                <a href="javascript:void(0);" onclick="closediv()" title="点击关闭" style="height:16px;text-decoration:none;color:#666;">关闭</a>
            </div>
            <div>
                <a href="" target="_blank"><img src="images/float_20171001.png"  alt="中秋 国庆,双节同庆" title="中秋 国庆,双节同庆"></a>
            </div>
        </div>

         <script type="text/javascript">
             var obj = document.getElementById("img1");

             var ggRoll = {
                 roll: obj,
                 speed: 16,
                 statusX: document.documentElement.clientWidth - document.body.clientWidth,
                 statusY: document.documentElement.clientHeight - document.body.clientHeight,
                 x: 200,
                 y: 400,
                 winW: document.body.clientWidth - obj.offsetWidth * 2,
                 winH: document.body.clientHeight - obj.offsetHeight,
                 Go: function () {
                     this.roll.style.left = this.x + ‘px‘;
                     this.roll.style.top = this.y + ‘px‘;

                     this.x = this.x + (this.statusX ? -1 : 1);
                     if (this.x < 0) {
                         this.statusX = 0;
                     }
                     if (this.x > this.winW) {
                         this.statusX = 1;
                     }

                     this.y = this.y + (this.statusY ? -1 : 1);
                     if (this.y < 0) {
                         this.statusY = 0;
                     }
                     if (this.y > this.winH) {
                         this.statusY = 1;
                     }
                 }
             }

             var intervaly = setInterval("ggRoll.Go()", ggRoll.speed);

             ggRoll.roll.onmouseover = function () {
                 clearInterval(intervaly);
             };

             ggRoll.roll.onmouseout = function () {
                 intervaly = setInterval("ggRoll.Go()", ggRoll.speed);
             };

             function closediv() {
                 clearInterval(intervaly);
                 obj.style.display = "none";
                 obj.parentNode.removeChild(obj);
             }
    </script>

         <!---飘窗结束--->
时间: 2024-07-30 01:38:02

网页前台页面图片飘窗代码的相关文章

Android获取网页上的图片的代码

public Bitmap getWebBitmap(String imgUrl) { Bitmap bitmap =null; try { InputStream inputStream = null; URL url; url = new URL(imgUrl); if (url != null) { // 打开连接 HttpURLConnection httpURLConnection = (HttpURLConnection) url .openConnection(); httpURL

页面定制CSS代码初探:页面变宽 文本自动换行 图片按比缩放

一.初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱了,设置里找了下,->博客侧边栏公告 <-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~ 二.认识CSS 过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧.于是乎,开始了2天的全折腾.

网页的背景图片代码

网页背景图片代码 1.(最普遍类) <style>body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}</style> 说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的! 2.(综合类) 3.<P class=style6> </P></SPAN&

在网页静态页面里面怎么跳转底部顶部的代码

跳到网页底部html代码: 在</body>前加个<a name="bottom"></a> 在任何地方写<a href="#bottom">跳到底部</a> 就可以实现点击回到底部: 返回网页顶部代码: <a href=#top>顶部</a> 在网页静态页面里面怎么跳转底部顶部的代码

前台页面优化全攻略(三)

经过前两篇文章的实践,你的网站加载速度一定有了非常明显的变化.能把实践跟到这篇文章的人想必一定是极客中的极客.如果你仍对网站的加载速度不满意,可以看看再尝试一下本文中几近疯狂的终极优化方案. 你可以对网站进行快速的优化,但网站日常的节食却很难.也许你已经花了很大的力气去优化你的CSS和JavaScript代码,但是你所做的努力马上又会因为老板或客户期望的新功能而付之东流.所以看来不论是人还是网页,减肥都贵在坚持. 这篇终极减肥方案可能不适合所有的网站,但是我相信它可以引起你对网页大小的重视. 1

前台页面优化全攻略(四)

通过前几篇文章,你应该已经掌握了很多优化网站的方法.现在你的网站加载速度已经很快了,但是你必须持续的监控你的网站,了解它的大小变化,要不然一段时间过去之后,它可能又成为了一个胖子. 如今每个页面平均已经达到1.7M,每年增长大概32%.你可以通过以下几个工具来查看你的网站是不是又在暴饮暴食,而且它们都是免费的. 1. Pingdom Pingdom是我喜欢的一个在线测试工具.它会揭露出所以你想知道的细节,你可以一清二楚的看到网站的现状:重量.加载速度.代码分析.性能评分.开发者建议,它还提供了一

前台页面优化全攻略(四)

如今每个页面平均已经达到1.7M,每年增长大概32%.你可以通过以下几个工具来查看你的网站是不是又在暴饮暴食,而且它们都是免费的. 1. Pingdom Pingdom是我喜欢的一个在线测试工具.它会揭露出所以你想知道的细节,你可以一清二楚的看到网站的现状:重量.加载速度.代码分析.性能评 分.开发者建议,它还提供了一个历史的时间轴帮你查看网站瘦身的成果.如果你只想用一个工具完成所有的检测,Pingdom再合适不过了. 2. Firefox Web Developer Add-on Web De

页面图片懒加载

一.页面滚动加载图片的理解 当一个网页含有大量的图片的时候,往往在打开页面的加载的很慢,如现在的大型电商.新闻.微博等,如果一下加载整个网页的所有图片,那会是一个缓慢的过程,要想快速的浏览网页,我们这时候就需要用到了在滚动或滑动页面的时候加载图片的方法.即图片懒加载!!! 二.实现懒加载的思路 当打开页面的时候,刚开始不给显示图片的位置放图片,等滚动或滑动到哪里的时候在获取图片.当然如果我们不给图片src中放图片,就会出现先找不到图片的提示,这样肯定是不行的. 所以我们在放图片的位置刚开始让一张

网页瀑布流布局jQuery实现代码

网页瀑布流布局jQuery实现代码 这篇文章主要为大家详细介绍了网页瀑布流布局jQuery实现方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 什么是瀑布流网页布局? 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 下面来看代码,用纯CSS3来做看效果怎样! HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2