【hoverdir】的更多相关文章

JQuer.HoverDir的基本使用方法

首先引入JQ和HoverDir库 HTML部分: <ul id="da-thumbs" class="da-thumbs"> <li> <a href="#"> <img src="img/001.png" alt=""> <div class="hot-info"> <h2>infenStudio</h2&g…

hoverdir

js 引入  jq  &&  modernizr.custom.97074.js  &&jquery.hoverdir.js css 引入style.css html代码 <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http://www.htmleaf.com/"> <img src="images/1.…

[读码][js,css3]能感知鼠标方向的图片遮罩效果

效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net…

【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑出.这是一个十分有趣的效果. 我们使用无序列表来组织缩略图和描述遮罩层: <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http://dribbble.com/shots/…

JS判断鼠标从什么方向进入一个容器

偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方法,是基于jquery的,原文地址 说实话,其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了.…

原生JS一些操作

很久没写原生的JS了,上周做了一个小东西让我又重新了解了一下原生JS,以下记录一些常见的原生JS var canvArrow = document.getElementById('js-canv_arrow'); var body = document.getElementsByTagName('body')[0]; var a = document.getElementById('nav-text'); 1.修改css属性:canvArrow.style.display = "block&qu…

jQuery鼠标悬停

(function ($) { $.fn.hoverdir = function(options){ var options = $.extend({ choice : ".cove" },options); return this.each(function(){ var self = $(this); self.hover(function(e){ mouseMove(e,self,true); },function(e){ mouseMove(e,self,false); });…

利用闭包判断Dom元素和滚动条的方向

本文收集整理自网上. 一,判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动的方向 var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("scroll", function() { var afterScrollTop =…

CSS3实现穿墙广告效果

㈠分享一组很有趣的代码: 具体如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>穿墙广告</title> <style> *{ margin:0; padding:0; list-style:none; } ul{ overflow:hidden; width:630px; margin:100px auto; } ul li…