`

jQuery书签效果 - 1

阅读更多
<script type="text/javascript" src="jquery-1.4.4.min.js" ></script>
<script>
  $(document).ready(function(){

    $(".bookmark").mouseover(function(){
      var selecter = $(this).attr("id");
      var sid = selecter.split("_")[1];
      $("#bookmark_" + sid).css({border:"1px solid #81c5ff"});
      $(this).css({background:"#f0f7fa"});
      $("#bookleg_" + sid).css({visibility:"visible"});
    });

    $(".bookmark").mouseout(function(){
      var selecter = $(this).attr("id");
      var sid = selecter.split("_")[1];
      $("#bookmark_" + sid).css({border:"1px solid #ffffff"});
      $(this).css({background:""});
      $("#bookleg_" + sid).css({visibility:"hidden"});
      $("#bookmarkinfo").hide();
    });
    
    /** 层随鼠标移动 **/
    $(".bookimg").mousemove(function(e){
      var mx = e.clientX + $(window).scrollLeft();   
      var my = e.clientY + $(window).scrollTop() + 20;
      $("#bookmarkinfo").css({visibility:"visible"});
      $("#bookmarkinfo").css({top:my+"px", left:mx+"px"});
      $("#bookmarkinfo").show();
    });
  });
</script>
分享到:
评论

相关推荐

    jQuery书签效果

    "jQuery书签效果"是一个基于jQuery实现的交互式书签功能,旨在为网页提供一种用户友好的方式来保存和访问感兴趣的内容。这个项目可能是由个人爱好者创建的,目的是分享和自我提升。 在jQuery书签效果中,有几个关键...

    光盒jquery.fancybox-1.3.4

    1. 在网页中引入jQuery库和fancybox的JavaScript及CSS文件。 2. 对需要使用fancybox的图片或链接添加特定的类名或者数据属性。 3. 初始化fancybox,设置所需的配置项。 4. 可以通过JavaScript代码调用fancybox来手动...

    jquery插件--侧边栏浮动插件,固定在顶部

    标题中的“jquery插件--侧边栏浮动插件,固定在顶部”指的是一个基于jQuery的JavaScript插件,其主要功能是实现侧边栏在页面滚动时始终保持在屏幕顶部的浮动效果。这种效果常用于网站的导航菜单或者侧边工具栏,以...

    《锋利的jQuery》(高清扫描版-有书签).pdf

    - **动画效果**:jQuery内置了一些简单的动画方法,如 `fadeIn()`, `fadeOut()`, `slideUp()`, `slideDown()` 等,也支持自定义动画效果。 - **AJAX支持**:jQuery提供了 `$.ajax()` 方法来方便地发送异步请求,并...

    jquery mobile 1.4.5

    7. **页面加载和初始化**:jQuery Mobile会自动检测页面何时加载完成,并应用相应的增强效果。使用"pageinit"事件可以监听页面初始化,进行自定义设置。 8. **兼容性广泛**:jQuery Mobile旨在兼容各种浏览器,包括...

    《锋利的jQuery》(高清扫描版-有书签).pdf-含有代码实例

    jQuery的动画功能强大,`fadeIn()`, `fadeOut()`, `slideToggle()`等方法使得创建平滑的视觉效果变得简单。还可以通过`animate()`方法自定义动画,实现复杂的过渡效果。 对于Ajax交互,jQuery的`$.ajax()`函数是...

    jQuery基础教程+锋利的jQuery+源代码+jquery1.7.2中文API+jquery-1.7.2.min.js.rar

    首先,"jQuery基础教程"提供了对jQuery核心概念的介绍,包括选择器(如ID选择器、类选择器、属性选择器等)、DOM操作(如元素的增删改查)、事件处理(如click、hover等事件)和动画效果(如fadeIn、slideUp等)。...

    《锋利的jQuery》(高清扫描版-有书签).

    为使读者更好地进行开发实践,《锋利的jQuery(第2版)》的第8章将前7章讲解的知识点和效果进行了整合,打造出一个非常有个性的网站,并从案例研究、网站材料、网站结构、网站样式和网站脚本等方面指导读者参与到项目...

    5天驾驭jQuery教程 带书签版

    在jQuery中,类库的含义更为具体,它汇集了一系列优化过的JavaScript函数,让开发者能够以极短的代码实现复杂的网页动态效果。例如,选择元素、修改样式、绑定事件等操作,在jQuery中只需几行代码即可完成,而无需...

    Jquery翻书效果

    《jQuery实现翻书效果详解》 在Web开发中,为了提升用户体验,许多网站开始采用更加生动、互动的设计元素,其中“翻书效果”就是一种深受用户喜爱的技术。它能够模拟真实的书籍翻页动作,使数字内容呈现出纸质书籍...

    JQuery 翻书 效果

    在网页设计中,为了增强用户体验,常常会使用各种动态效果,其中JQuery的翻书效果是一种常见的、引人入胜的交互式展示技术。这种效果可以让网页中的内容以书籍翻页的形式呈现,使得用户仿佛在浏览一本真实的电子书,...

    msn官网书签风格jquery焦点图切换

    【标题】"msn官网书签风格jquery焦点图切换"涉及到的是网页设计中的一种常见交互效果,它将msn官方网站的书签样式与jQuery库相结合,实现了一个动态的焦点图切换功能。这种功能通常用于网站的首页或者产品展示区域,...

    jquery.fastpage-1.0.js

    此外,jQuery还提供了丰富的动画效果,使页面切换更加吸引人。 四、使用方法与配置 使用"jQuery.fastpage-1.0.js"非常简单,首先需要在HTML文件中引入jQuery库和该插件。然后,通过调用$.fn.fastpage并传入相应的...

    jquery 幻灯效果广告代码

    1. **jQuery库**(jquery.js):这是整个幻灯片效果的基础,提供了一系列的函数和方法,如`.slideUp()`, `.slideDown()`, `.fadeIn()`, `.fadeOut()`等,用于创建动画效果。在本案例中,`jquery.js`文件包含了一组...

    jquery.layout.js常用属性.pdf

    1. `jquery.js`:这是 jQuery 的核心库,提供了丰富的 DOM 操作和事件处理功能。 2. `jquery-ui.js`:jQuery UI 提供了各种用户界面组件和效果,如拖放、对话框、日期选择器等。 3. `jquery.layout-latest.js`:这是...

    JQuery实例-年月日级联菜单.rar )

    1. **JQuery**:JQuery是一个高效、简洁、易用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在本实例中,JQuery被用来处理DOM操作、事件监听以及动态效果,使得用户在选择年份时,月份和...

    《锋利的jQuery》(高清扫描版-有书签)

    1. **jQuery基础**:讲解如何引入jQuery库,理解jQuery选择器的基本用法,如ID选择器、类选择器和属性选择器,以及如何使用$(document).ready()方法确保代码在页面加载完成后执行。 2. **DOM操作**:详细阐述了如何...

Global site tag (gtag.js) - Google Analytics