zoukankan      html  css  js  c++  java
  • jQuery上传预览图片

    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <script type="text/javascript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></script>
    <script language="javascript">
    $(
    function(){
        
    var ei = $("#large");
        ei.hide();
        $(
    "#img1, img").mousemove(function(e){
            ei.css({top:e.pageY,left:e.pageX}).html(
    '<img style="border:1px solid gray;" src="' + this.src + '" />').show();
        }).mouseout( 
    function(){
            ei.hide();
        })
        $(
    "#f1").change(function(){
            $(
    "#img1").attr("src","http://www.cnblogs.com/Pynix/admin/file:///"+$("#f1").val());
        })
    });
    </script>
    <style type="text/css">
        #large
    {position:absolute;display:none;z-index:999;}
    </style>
    </head>
    <body>

    上传预览图片:
    <br>
    <input id="f1" name="f1" type="file" /><br>
    <img id="img1" width="120" height="60" src="http://www.cssrain.cn/skins/tim/logo-jq.gif">

    <div id="large"></div>

    <br><br><br><br><br><br>
    鼠标滑过预览图片:
    <br>
    <img width="120" height="60" src="http://www.cssrain.cn/skins/tim/logo-jq.gif"><br>
    <img width="120" height="60" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif"><br>
    </body>
    </html>


    本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=538

  • 相关阅读:
    18个Java开源CMS系统一览
    冒泡排序
    数据挖掘十大经典算法
    开源Java CMS建站程序推荐
    Oracle
    Oracle Procedure returning Ref Cursor in Entity Framework 4
    Field_II
    SharePoint Video Library
    ORACLE 导入dmp文件
    System.Diagnostics.Process.Start()。它的作用是调用外部的命令
  • 原文地址:https://www.cnblogs.com/Pynix/p/1447033.html
Copyright © 2011-2022 走看看