七个前端开发常用代码片段-值得收藏!

	一、预加载图像 如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。 $.preloadImages = function (){     for (var i = 0; = 0; i < arguments.length; i++) {         $('<img>').attr('src',arguments);     } } $.preloadImages('images/hover-on.png','images/hover-pff.png'); 复制代码 二、检查图像是否加载 有时为了继续脚本，你可能需要检查图像是否全部加载完毕。 $('img').load(function)(){     console.log('image load successful'); }); 复制代码 你也可以使用 ID 或 CLASS 替换 标签来检查某个特定的图像是否被加载。 三、自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你。 $('img').on('error',function(){     if(!$(this).hasClass('broken-image')){         $(this).prop('src','ima/broken.png').addClass('broken-image');     } }); 复制代码 四、悬停切换 当用户鼠标悬停在可点击的元素上时，可添加类到元素中，反之则移除类。 $(selector).hover(function () {     $(this).addClass('hover'); }, function () {     $(this).removeClass('hover'); }); 复制代码 只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。 $(selector).hover(function () {     $(this).addClass('hover'); }); 复制代码 五、淡入淡出/显示隐藏 //淡出 $('.btn').click(function(){ $('.element').fadeToggle('slow'); }); //淡入 $('.btn').click(function(){ $('.element').slideToggle('slow'); }); 复制代码 六、鼠标滚轮 $('#content').on("mousewheel DOMMouseScroll", function (event) {       // chrome & ie || // firefox     var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||           (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));        if (delta > 0) {           console.log('mousewheel top');     } else if (delta < 0) {         console.log('mousewheel bottom');     }   }); 复制代码 七、鼠标坐标 1、JavaScript实现 X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> function mousePosition(ev){     if(ev.pageX || ev.pageY){         return {x:ev.pageX, y:ev.pageY};     }     return {         x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,         y:ev.clientY + document.body.scrollTop - document.body.clientTop     }; } function mouseMove(ev){     ev = ev || window.event;       var mousePos = mousePosition(ev);     document.getElementById('xxx').value = mousePos.x;     document.getElementById('yyy').value = mousePos.y; } document.onmousemove = mouseMove; 复制代码 2、jQuery实现 $('#ele').click(function(event){     //获取鼠标在图片上的坐标       console.log('X：' + event.offsetX+'  Y:' + event.offsetY);       //获取元素相对于页面的坐标       console.log('X：'+$(this).offset().left+'  Y:'+$(this).offset().top); }); 复制代码

潇林⒐!4埘绱说：

	有需要会看看的

baby丶许说：

	这是啥 ，开发啥的

潮男⒐!4埘绱说：

	我表示看不懂 以后会学习下 感谢楼主分享

追忆⒐!4埘绱说：

	潮男⒐!4埘绱 发表于 2018-5-8 04:06 这是啥 ，开发啥的 这是网站前端Html需要用到的一些代码

潇林⒐!4埘绱说：