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事件

       源码

  • 相关阅读:
    最短路径(Dijkstra和堆优化)
    最小生成树(prim和Kruskal)
    ac自动机(加强版)
    【敏捷】火星人敏捷开发手册- 教你怎么开会 然并卵知晓
    【敏捷】扑克牌估算
    向黄太吉学习线上营销模式
    黄太吉品牌创始人赫畅:创造下一个互联网奇迹
    吃煎饼思考人生:从黄太吉看商家的社会化营销
    月薪3000与月薪30000的文案区别
    聚美优品广告词和经典分析
  • 原文地址:https://www.cnblogs.com/dooom/p/1715819.html
Copyright © 2011-2022 走看看