首页 新闻 会员 周边

鼠标点击图片后箭头变为该图片

0
悬赏园豆：20 [已解决问题] 解决于 2012-04-19 08:45

当鼠标点击一张图片后鼠标的箭头变成该点击的图片，或者该图片跟随鼠标也行，该怎么做啊

千重的主页 千重 | 初学一级 | 园豆：129
提问于：2012-04-18 13:46
< >
分享
最佳答案
0 
<img src="http://101code.net/images/happy.jpg" id="Img1selectedImage"  
width="88px" style="border:2px solid #ccc; background-color:#fff; padding:2px" />

<br />
<span class="selectedImage" style="border:2px solid #eee">This is a test , the image follow this span</span>  
<br />
<p class="selectedImage" style="border:2px solid #eee">This is second test the image follow this "p" </p> 
<br />


<script type="text/javascript">

    $(document).ready(function() {

    $("#Img1selectedImage").ImageFollowMouse({ src: 'http://101code.net/images/happy.jpg' });

        $(".selectedImage").ImageFollowMouse({ src: 'http://101code.net/images/happy.jpg', width: '100', 
        height: '200', topY: 10, leftX: 10 });
    }); 
 
    
</script>

 

 

这个插件也可以的：http://www.javascriptkit.com/script/script2/ajaxtooltip.shtml

收获园豆：20
悟行 | 专家六级 |园豆：12559 | 2012-04-18 14:05

提示不支持对象属性

千重 | 园豆：129 (初学一级) | 2012-04-18 14:21

@千重: 

*Example :
*     
*     <img src="images/happy.jpg" id="selectedImage"  width="88px" style="border:2px solid #ccc; background-color:#fff; padding:2px" />
*    
*     ///////////////////////////////////////////////////////
*
*     <script type="text/javascript">
*     $(document).ready(function() {
*     $("#selectedImage").ImageFollowMouse({ 
*            src: 'images/happy.jpg',
*            Padding:'28px'
*         });  
*     }); 
*     </script>
*
*    
*/

(function($) {

    $.fn.ImageFollowMouse = function(params) {

        params = $.extend({ src: null, width: null, height: null, topY: null, leftX: null, backgroundColor: null, Padding: null }, params);

        this.each(function() {

            var imgWidth;
            var imgHeight;
            var $t = $(this);
            var X = 20;
            var Y = 20;
            var bColor = 'fff';
            var iPadding = '8px';

            $("<img id='ThisISImageFollowMouseImageClassID' />").attr({ src: params.src }).prependTo('body');
            $("#ThisISImageFollowMouseImageClassID")
            .addClass("ThisISImageFollowMouseImageClass")
            .css('position', 'absolute')
            .css('visibility', 'hidden')
            ;
            if (params.width != null) {
                imgWidth = params.width;
                $("#ThisISImageFollowMouseImageClassID").css('width', imgWidth);
            }
            if (params.height != null) {
                imgHeight = params.height;
                $("#ThisISImageFollowMouseImageClassID").css('height', imgHeight);
            }


            if (params.topY != null) X = params.topY;
            if (params.leftX != null) Y = params.leftX;
            if (params.backgroundColor != null) bColor = params.backgroundColor;
            if (params.Padding != null) iPadding = params.Padding;

            $t.mousemove(function(e) {
                $(".ThisISImageFollowMouseImageClass")
                .css('top', e.clientY + X)
                .css('left', e.clientX + Y)
                .css('visibility', 'visible')
                .css('border', '2px solid #bbb')
                .css('padding', iPadding)
                .css('backgroudColor', '#fff')
                ;
            });

            $t.mouseout(function(e) {
                $(".ThisISImageFollowMouseImageClass")
                .css('visibility', 'hidden');
            });
        });

        return this;
    };
})(jQuery);
悟行 | 园豆：12559 (专家六级) | 2012-04-18 14:30

还是比较想要js自己手动写的

千重 | 园豆：129 (初学一级) | 2012-04-19 08:46

@千重: 可以自己边写边看啊。

悟行 | 园豆：12559 (专家六级) | 2012-04-19 09:02
其他回答(1)
0

http://www.cnblogs.com/jasonjiang/archive/2010/11/10/1874049.html

JasonNET | 园豆：168 (初学一级) | 2012-04-18 17:18
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。