zoukankan      html  css  js  c++  java
  • 图片 上一张 下一张 链接效果(续篇)

        很久没写文章了,这段时间一直在做类似鲜果的一个应用和数据采集,还有就是对企业和个人成长的思考。

        前段时间写了篇图片 上一张 下一张 链接效果,后来看到 jquery插件封装,手里痒痒的,拿这个例子做ex.

        封装后的JS源码:

    代码
    /*
     * imageupdown 1.0 
     * Copyright (c) 2009 
     * Date: 2010-04-20
     * 图片移动上一张 下一张特效
     
    */
    (
    function($){
        $.fn.imageupdown 
    = function(options){
            
    var defaults = {
                upCursor:
    "pre.cur",
                upTitle:
    "点击查看上一张",
                upUrl:$(
    this).attr('left'),
                downCursor:
    "next.cur",
                downTitle:
    "点击查看下一张",
                downUrl:$(
    this).attr('right')
            }
            
    var options = $.extend(defaults, options);
            
    this.each(function(){
                
    var thisImage=$(this);
                $(thisImage).bind(
    "mousemove",function(e){
                  
    var positionX=e.originalEvent.x||e.originalEvent.layerX||0;
                             
    if(positionX<=$(this).width()/2){           
                                     this.style.cursor='url('+options.upCursor+'),auto';
                                     $(
    this).attr('title',''+options.upTitle+'');
                                     $(
    this).parent().attr('href',''+options.upUrl+''); 
                                 }
    else{  
                                     
    this.style.cursor=''+options.downCursor+'';
                                     $(
    this).attr('title',''+options.downTitle+'');
                                     $(
    this).parent().attr('href',''+options.downUrl+'');
                                }  
                });
            });
        };
    })(jQuery);

    html页面调用方法:

      <script type="text/javascript">
         $(document).ready(
    function() {
             $(
    ".rootclass").imageupdown();
         });
        
    </script>

     可能有疑惑的地方:

    (1)function(e)  e 是什么意思

       应该是对应事件。

       $().click(function(e) {}); // 这里的e是click事件

      $().focus(function(e) {});// 这里的e是focus事件

       源码

  • 相关阅读:
    bzoj 1030 [JSOI2007]文本生成器
    Swift 学习笔记 (闭包)
    Swift 学习笔记 (函数)
    HTML 学习笔记 JQueryUI(Interactions,Widgets)
    HTML 学习笔记 JQuery(表单,表格 操作)
    HTML 学习笔记 JQuery(animation)
    HTML 学习笔记 JQuery(盒子操作)
    HTML 学习笔记 JQuery(事件)
    HTML 学习笔记 JQuery(DOM 操作3)
    HTML 学习笔记 JQuery(DOM 操作2)
  • 原文地址:https://www.cnblogs.com/dooom/p/1715819.html
Copyright © 2011-2022 走看看