分类 前端技术 下的文章

鼠标点击屏幕后出现爱心特效


大家好,今天给大家分享鼠标点击屏幕后如何出现小爱心的特效代码


JS代码如下:

<script>
        //鼠标点击出现爱心特效
        (function(window, document, undefined) {
            var hearts = [];
            window.requestAnimationFrame = (function() {
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        setTimeout(callback, 1000 / 60);
                    }
            })();
            init();

            function init() {
                css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
            }

            function gameloop() {
                for(var i = 0; i < hearts.length; i++) {
                    if(hearts[i].alpha <= 0) {
                        document.body.removeChild(hearts[i].el);
                        hearts.splice(i, 1);
                        continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
                }
                requestAnimationFrame(gameloop);
            }

            function attachEvent() {
                var old = typeof window.οnclick === "function" && window.onclick;
                window.onclick = function(event) {
                    old && old();
                    createHeart(event);
                }
            }

            function createHeart(event) {
                var d = document.createElement("div");
                d.className = "heart";
                hearts.push({
                    el: d,
                    x: event.clientX - 5,
                    y: event.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: randomColor()
                });
                document.body.appendChild(d);
            }

            function css(css) {
                var style = document.createElement("style");
                style.type = "text/css";
                try {
                    style.appendChild(document.createTextNode(css));
                } catch(ex) {
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
            }

            function randomColor() {
                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
            }
        })(window, document);
    </script>

是不是很简单呢,如果有不会的可以在下面评论区说出来,我会一一作答的


广告插入一波:
如果有不会搭建网站的朋友可以花点钱让我帮你搭建,保证以最快的速度搭建完成。
联系qq:2380699980


原生JS实现返回顶部特效


大家好,今天给大家分享一个用原生JS实现返回顶部的代码


JS代码如下:

    <script type="text/javascript">
    var obot = document.getElementById('bot'); //获取a链接的ID
    var dsq = null; //声明定时器
    obot.onclick = function() { //获取一个点击a链接的事件
        dsq = setInterval(function() { //开启定时器
            var gaodu = document.body.scrollTop || document.documentElement.scrollTop; //获取浏览器滚动条距离顶部的高度
            var sudu = Math.floor(-gaodu / 5); //获取滚动条的移动速度
            document.body.scrollTop = document.documentElement.scrollTop = gaodu + sudu; //获取滚动条距离顶部高度逐渐减少直到0高度
            if(gaodu == 0) { //判断高度是否为0
                clearInterval(dsq); //如果高度等于0的话就关闭定时器
            }

        }, 30); //滚动条距离顶部移动的延迟

    }
    window.onscroll = function() { //获取滚动条,滚动事件
        if(document.documentElement.scrollTop + document.body.scrollTop > 0) { //如果滚动条大于0
            obot.style.display = "block"; //大于0就显示出来
        } else {
            obot.style.display = "none"; //等于0就隐藏起来
        }
    }
</script>

HTML代码如下:

<body class="" style="height: 20000px;">
    <a style="display: none;" href="javascript:;" id="bot" title="返回顶部"><img style="width: 50px;" src="http://pic.51yuansu.com/pic3/cover/00/65/16/5896fa26bf012_610.jpg"></a>
</body>

CSS代码如下:

<style type="text/css">
        #bot {
            position: fixed;
            right: 10px;
            bottom: 100px;
            font-size: 30px;
            z-index: 999999999;
            text-decoration: none;
            color: #00BCD4;
        }
    </style>

是不是很简单呢?如有什么问题可以在评论区说出来,我会一一作答的


广告插入一波:
如果有不会搭建网站的朋友可以花点钱让我帮你搭建,保证以最快的速度搭建完成。
联系qq:2380699980


浅谈HTML5技术优点及未来发展趋势


随着大前端时代的到来,移动互联网颠覆了PC互联网。接下来,HTML5将颠覆原生App世界。未来企业中开发APP的可以没iOS和Android工程师,但不能没有HTML5工程师,IT市场缺口大受到了很多企业的青睐和广泛使用,然后企业需求大,人才的缺口也不断增长,很多企业高薪也聘请不到专业的html5人才,人才市场的短缺,让html5前端开发工程师的薪资一路水涨船高,越来越多的人看到这一市场前景,纷纷投入到html5的学习中来,很多对自己未来有憧憬、想改变的有志青年,都想加入到HTML5的学习中。

HTML5

一、HTML5技术优点

  1、给站点带来了更多的多媒体元素(视频和音频);

  2、静态的页面开始动起来,视觉效果更炫,提高了用户体验度;

  3、添加了几个新的标签控件:提高了标签的语义性、提升了加载速度;

  4、被大量应用于移动应用程序和游戏:不需要第三方插件、不需要插件就能支持iOS设备、突破常规浏览器游戏限制;

  5、可以很好的替代Flash和Silverlight,可以直接播放视频,不必安装Flash插件,除去网站因Flash打开慢的不友好的一面;以往Flash的网站开发开始转向HTML5,Flash网站不利于搜索引擎收录,HTML5技术,当涉及到网站的抓取和索引的时候,对于SEO很友好;

  6、跨平台部署运行:可以共用一个UI代码库,节省几倍的开发时间;

  7、跨浏览器兼容性好:可以快速查询DOM、遍历Java并深入研究网络堆栈;

  二、HTML5发展趋势

  1、移动优先

  如今移动应用层出不穷,可以用只有咱没想到的没有人家没做到的来形容,在这个智能手机和平板电脑大爆炸的时代,尤其是手机,已经成为人们生活中非常重要的一部分,很大一部分人离开手机已经到没法生活的地步了,移动优先已成趋势,不管是开发什么,都以移动为主,移动应用可以极大的方便人们的生活。所以未来HTML5应该会优先在移动设备上更多的应用。如今已经有一些大企业将HTML5应用于移动开发,表现非常出色,所以终将成为趋势。

  2、游戏开发是重要领域

  如今做游戏那应该是相当赚钱的一个领域了,但是做手游尤其是收费的游戏,开发原生应用就有局限了,因为iOS系统充值需要向苹果公司支付30%的提成,而利用HTML5开发web应用,可以很巧妙的躲过这30%的提成。所以游戏开发商应该是从HTML5中获益最多的一方。

  3、响应式设计

  在HTML5真的改变移动开发平台之前,必须要迈出重要一步,那就是“响应式设计”,也就是屏幕可以根据内容而自动调整大小。然而响应式设计也是一件非常不容易的事情,因为当今各式各样的设备实在是让开发者眼花缭乱,手足无措。要想做好响应式设计,就必须洞悉内容与屏幕之间的反馈关系,响应式设计要完全离开“流”,转而注重内容是如何在网页和移动设备中被处理的,这一过程还在继续,HTML5会让它最终成为可能。

  4、设备访问

  消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力,比如照相机,通讯录,日历,加速器等,利HTML5实现此能力方面,Mozilla一直在努力通过移动浏览器Fennec来将强设备访问能力。对许多移动开发商来说,提高设备访问能力是HTML5最令人激动的革新,这意味着Web应用能够登陆移动设备而无需做任何PhoneGap式打包,游戏开发商当然最开心,因为某些特性对他们来说是封锁的,比如能整合到游戏中的加速器。这就开启了另一个可能的世界,比如能与云更好地整合并提高游戏可玩性,有了HTML5这个平台,开发商可以不再依赖于Java语言,CSS3,HTML及其它程序语言。

  5、离线缓存

  离线缓存算是比较新的一个概念,简单来说就是在离线情况下,web应用还可以正常运行。传统意义上的web应用需要依赖于网络,而HTML5的离线缓存可以冲破这个束缚,利用离线缓存技术,可以在离线状态下正常使用web应用。目前已经有产品实现了这个方式。

  以上的HTML5技术优点,希望可以帮助大家清楚了解HTML5的发展。HTML5开发已是大势所趋,市场对于HTML5开发人才需求也在不断增加。


广告插入一波:
如果有不会搭建网站的朋友可以花点钱让我帮你搭建,保证以最快的速度搭建完成。
联系qq:2380699980


HTML5技术到底是什么


HTML的全称是Hyper Text Markup Language 即超文本标记语言,它是互联网上应用最广泛的标记语言。简单地说,HTML文件就是普通文本+HTML标记(HTML标签),和不同的标记就能表示不同的效果。HTML5就是HTML最新的修订版本。

HTML5介绍

HTML5继承了HTML的部分特征,同时又添加了许多新的语法特征,比如语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性等。此外HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。

广义的HTML5是指包括HTML、CSS和JavaScript在内的一套技术组合。主要作用是减少网页浏览器对于需要插件的丰富性网络应用服务,例如:Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网络应用的标准集。

通过对HTML5的定义,我们可以了解到HTML5具有独特的优势:网络标准、多设备跨平台、自适应网页设计。这对于程序员来说是绝对的福音,因为你只需掌握HTML5就能即时更新自己的页面、适应多个浏览器。

HTML5的作用

对于互联网领域来说,HTML5不再只是一种标记语言,它为下一代Web提供了全新的框架和平台,包括提供免插件的视频、图像动画、本体存储以及更多酷炫而且重要的功能,并使这些应用标准化,从而使Web能够轻松实现类似桌面的应用体验。

对于编程人员来说,HTML5的特点是具有革命性的,特别是其丰富的标签体系,类似于内置了很多快捷键,将取代那些完成比较简单任务的插件,可以降低应用开发的技术门槛;

对于SEO来说,HTML5有利于搜索引擎抓取和索引网站内容,能够提供更多的功能和更好的用户体验,有助于提高网站的可用性和互动性;

对于企业来说,HTML5能够改变企业网络广告的模式与分布,助力传统企业IT应用移动化,帮助企业构建应用平台。


广告插入一波:
如果有不会搭建网站的朋友可以花点钱让我帮你搭建,保证以最快的速度搭建完成。
联系qq:2380699980