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 augueLorem 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 augueLorem 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 augueAll 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);
jquery-plugin-biggerLink,highLight-层加亮_andy 阳光生活_百度空间的更多相关文章
- ollicle.com: Biggerlink – jQuery plugin
ollicle.com: Biggerlink – jQuery plugin Biggerlink – jQuery plugin Purpose Demo Updated for jQuery 1 ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- The ultimate jQuery Plugin List(终极jQuery插件列表)
下面的文章可能出自一位奥地利的作者, 列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...
- JQuery plugin ---- simplePagination.js API
CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...
- jQuery plugin: Autocomplete 参数及实例
官网:jQuery plugin: Autocomplete (注:此插件已经不再更新.它的继任者是jQuery UI的一部分,) 此插件依赖于 jquery 1.2.6 --- j ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- Signs of a poorly written jQuery plugin 翻译 (Jquery插件开发注意事项,Jquey官方推荐)
原文链接:http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ 原文作者:remy sharp So far ...
- JQuery Plugin 1 - Simple Plugin
1. How do you write a plugin in jQuery? You can extend the existing jQuery object by writing either ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
随机推荐
- 检测android机器是否有GPS模块
public boolean hasGPSDevice(Context context) { final LocationManager mgr = (LocationManager)context. ...
- poj 2723 Get Luffy Out 二分+2-sat
题目链接 给n个钥匙对, 每个钥匙对里有两个钥匙, 并且只能选择一个. 有m扇门, 每个门上有两个锁, 只要打开其中一个就可以通往下一扇门. 问你最多可以打开多少个门. 对于每个钥匙对, 如果选择了其 ...
- Scala数组操作实战详解
增删改查,要注意的是,Array数组是定长数组,ArrayBuffer数组才是变长数组. 其他集合也存在可变不可变.例如,List,Set,Map 多维数组定义方法与Java类似.
- Umbraco扩展开发
国内Umbraco方面的资料很少,搜集到一些国外的优秀项目或插件.记录下来,便于日后使用: backoffice:https://github.com/TimGeyssens 后台扩展UI,可以在这里 ...
- WinSetupFromUSB – Install Windows XP from USB Flash Drive
http://myeeeguides.wordpress.com/2008/11/15/winsetupfromusb-install-windows-xp-from-usb-flash-drive/ ...
- jQuery-zclip实现复制内容到剪切板
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...
- JEECMS用法总结
1.循环打印栏目: [@cms_channel_list] [#list tag_list as c] <li id="${c.path}"><a href=&q ...
- express手工实现session原理
var express = require('express'); var cookieParser = require('cookie-parser'); var bodyParser = requ ...
- C#中经常使用的几种读取XML文件的方法
XML文件是一种经常使用的文件格式,比如WinForm里面的app.config以及Web程序中的web.config文件,还有很多重要的场所都有它的身影.Xml是Internet环境中跨平台的,依赖 ...
- sql server 2005中没有等于等于,高手自行跳过。。
set ANSI_NULLS ONset QUOTED_IDENTIFIER ONgo ALTER TRIGGER [qiandaoTrigger] ON [dbo].[bbsQianDao] AFT ...