zoukankan      html  css  js  c++  java
  • jquery-plugin-biggerLink,highLight-层加亮_andy 阳光生活_百度空间

    How to get the xpath by clicking an html element

    How to get the xpath by clicking an html element

    Quick Tip: Outline Elements on Hover

    Quick Tip: Outline Elements on Hover

    Highlight On Mouseover Effect With JQuery

    Highlight On Mouseover Effect With JQuery I have seen this effect been used a lot on e-commerce sites or sites with lists in general. I don’t know how they do it exactly but I can show you how I would do it with JQuery. Take a look at the CSS class I made, what it does is it has a gold background color and round corners for Firefox, Safari and Chrome. .highlight-yellow { background-color:#FFD700; -moz-border-radius: 5px; -webkit-border-radius: 5px; } Let’s make the divisions we will highlighting.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
    All I need now is to make a script that adds the CSS class we just made to the divisions when the mouse is on it, when the mouse moves out of the division I will remove the class. $(document).ready(function(){ $(".product").mouseover(function(){ $(this).addClass("highlight-yellow"); }); $(".product").mouseout(function(){ $(this).removeClass("highlight-yellow"); }); }); I don’t think I’ve told you about $(this) in any of my previous tutorials, in short, all $(this) does is refer to the current element on which the event (mouseout or mouseover) is been performed. As always, happy JQuerying!

    jquery-plugin-biggerLink,highLight-层加亮_andy 阳光生活_百度空间

    jquery-plugin-biggerLink,highLight-层加亮 yeah邮箱->jquery->jquery-biggerLink-层加亮 由jquery.biggerlink.js源码修改,剔除多个链接只能第一个链接和点击层起作用的功能,纯粹的加亮作用。 jquery.highLight.js 用法:        $('#links3 div').highLight(); js:         (function($) {             $.fn.highLight = function(options) {                 // Default settings                 var settings = {                     hoverclass:'hover', // class added to parent element on hover                     clickableclass:'hot', // class added to parent element with behaviour                            };                 if(options) {                     $.extend(settings, options);                 }                 $(this).addClass(settings.clickableclass).each(function(i){                        $(this)                     .mouseover(function(){                         $(this).addClass(settings.hoverclass);                     })                     .mouseout(function(){                         $(this).removeClass(settings.hoverclass);                     })                            });                 return this;             };         })(jQuery); 解决IE问题:                 (function($) {                     $.fn.highLight = function(options) {                         // Default settings                         var settings = {                             hoverclass:'hover', // class added to parent element on hover                             clickableclass:'hot', // class added to parent element with behaviour                             follow: true    // follow link? Set to false for js popups                         };                         if(options) {                             $.extend(settings, options);                         }                         $(this).filter(function(){                              return $('a',this).length > 0;                         }).addClass(settings.clickableclass).each(function(i){                             // Add title of first link with title to parent                             $(this).attr('title', $('a[title]:first',this).attr('title'));                             // hover and trigger contained anchor event on click                             $(this)                             .mouseover(function(){                                 window.status = $('a:first',this).attr('href');                                 $(this).addClass(settings.hoverclass);                             })                             .mouseout(function(){                                 window.status = '';                                 $(this).removeClass(settings.hoverclass);                             })                             // triggerable events on anchor itself                             .find('a').bind('focus',function(){                                 $(this).parents('.'+ settings.clickableclass).addClass(settings.hoverclass);                             }).bind('blur',function(){                                 $(this).parents('.'+ settings.clickableclass).removeClass(settings.hoverclass);                             }).end()                         });                         return this;                     };                 })(jQuery); css:         /* Put a border around the newly clickable element */         .hot {             border: solid 1px #ccc;             zoom: 1; /* Should be IE only */         }         /* rollover style for clickable element */         .hover {             border-color: #aaf;             cursor: pointer;             background-color: #cdF;         }         /* Simulate hover on contained link */         .hover a:link {             color: #CC3333;         }         .hover a:visited {             color: #CC3333;         } 附jquery.biggerlink.js         (function($) {             $.fn.biggerlink = function(options) {                 // Default settings                 var settings = {                     hoverclass:'hover', // class added to parent element on hover                     clickableclass:'hot', // class added to parent element with behaviour                     follow: true    // follow link? Set to false for js popups                 };                 if(options) {                     $.extend(settings, options);                 }                 $(this).filter(function(){                     return $('a',this).length > 0;                 }).addClass(settings.clickableclass).each(function(i){                                     // Add title of first link with title to parent                     $(this).attr('title', $('a[title]:first',this).attr('title'));                                         // hover and trigger contained anchor event on click                     $(this)                     .mouseover(function(){                         window.status = $('a:first',this).attr('href');                         $(this).addClass(settings.hoverclass);                     })                     .mouseout(function(){                         window.status = '';                         $(this).removeClass(settings.hoverclass);                     })                     .bind('click',function(){                         $(this).find('a:first').trigger('click');                     })                                         // triggerable events on anchor itself                                         .find('a').bind('focus',function(){                         $(this).parents('.'+ settings.clickableclass).addClass(settings.hoverclass);                     }).bind('blur',function(){                         $(this).parents('.'+ settings.clickableclass).removeClass(settings.hoverclass);                     }).end()                                         .find('a:first').bind('click',function(e){                         if(settings.follow == true)                         {                             window.location = this.href;                         }                         e.stopPropagation(); // stop event bubbling to parent                     }).end()                                         .find('a',this).not(':first').bind('click',function(){                         $(this).parents('.'+ settings.clickableclass).find('a:first').trigger('click');                         return false;                     });                 });                 return this;             };         })(jQuery);
  • 相关阅读:
    2016.5.30实现透明Panel及控件置顶的方法
    2016.6.14自定义控件添加自定义事件
    2016.5.30让窗口处于最顶层的方法
    2016.5.23 用反射技术为实体类变量赋值、取值
    2016.4.6 WinForm显示PDF两种方法
    2016.3.7 Word2007编号设置
    2016.2.28 DataTable用法汇总
    2016.2.24 利用用户控件和委托完美解决快速选择txbbox
    2016.2.13 (年初六) oracle两张表update方法
    怎样用idhttpserver代替IIS让用户浏览html或下载文件 http://bbs.csdn.net/topics/360248674
  • 原文地址:https://www.cnblogs.com/lexus/p/3598837.html
Copyright © 2011-2022 走看看