×

分享几个jQuery的小代码片段

作者:andy0012018.05.07来源:Web前端之家浏览:15078评论:0
关键词:JQueryJS

分享几个jQuery的小代码片段:

1)禁用右键单击功能

如果你想为用户保护网站信息,那么开发者可以使用这段代码——禁用右键单击功能

  1. $(document).ready(function() {
  2.  //catch the right-click context menu
  3.  $(document).bind("contextmenu",function(e) {     
  4.   //warning prompt - optional
  5.   alert("No right-clicking!");
  6.   //delete the default context menu
  7.   return false;
  8.  });
  9. });

2)使用jQuery设定文本大小

使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。

  1. $(document).ready(function() {
  2.  //find the current font size
  3.  var originalFontSize = $('html').css('font-size');
  4.  
  5.  //Increase the text size
  6.  $(".increaseFont").click(function() {
  7.   var currentFontSize = $('html').css('font-size');
  8.   var currentFontSizeNumber = parseFloat(currentFontSize, 10);
  9.   var newFontSize = currentFontSizeNumber*1.2;
  10.   $('html').css('font-size', newFontSize);
  11.   return false;
  12.  });
  13.  //Decrease the Text Size
  14.  $(".decreaseFont").click(function() {
  15.   var currentFontSize = $('html').css('font-size');
  16.   var currentFontSizeNum = parseFloat(currentFontSize, 10);
  17.   var newFontSize = currentFontSizeNum*0.8;
  18.   $('html').css('font-size', newFontSize);
  19.   return false;
  20.  });
  21.  // Reset Font Size
  22.  $(".resetFont").click(function(){
  23.  $('html').css('font-size', originalFontSize);
  24.   });
  25. });

3)在新窗口打开链接

使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。

  1. $(document).ready(function() {
  2.  //select all anchor tags that have http in the href
  3.  //and apply the target=_blank
  4.  $("a[href^='http']").attr('target','_blank');
  5. });

4)更改样式列表

使用这段代码帮助你更改样式列表。

  1. $(document).ready(function() {
  2.  $("a.cssSwap").click(function() { 
  3.   //swap the link rel attribute with the value in the rel    
  4.   $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
  5.  }); 
  6. });

5)返回到顶部链接

此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能。

  1. $(document).ready(function() {
  2.  //when the id="top" link is clicked
  3.  $('#top').click(function() {
  4.   //scoll the page back to the top
  5.   $(document).scrollTo(0,500);
  6.  }
  7. });

6)获取鼠标指针的X / Y轴

  1. $().mousemove(function(e){
  2.     //display the x and y axis values inside the P element
  3.     $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  4. });

7)检测当前鼠标坐标

使用这个脚本,你可以在任何网络浏览器获取鼠标坐标。

  1. $(document).ready(function() {
  2. $().mousemove(function(e)
  3. {
  4.     $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
  5. });

8)图片预加载

此段代码帮助用户快速加载图片或网页页面。

  1. jQuery.preloadImagesInWebPage = function() 
  2. {
  3.      for(var ctr = 0; ctr<arguments.length; ctr++)
  4.      {
  5.          jQuery("").attr("src", arguments[ctr]);
  6.      }
  7. }
  8. To use the above method, you can use the following piece of code:
  9. $.preloadImages("image1.gif", "image2.gif", "image3.gif");
  10. To check whether an image has been loaded, you can use the following piece of code:
  11. $('#imageObject').attr('src', 'image1.gif').load(function() {
  12.     alert('The image has been loaded…');
  13. });

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1488211200543.html

网友评论文明上网理性发言 已有0人参与

发表评论: