简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4月9号juqery在线相册作业
Blogger Information
Blog 24
fans 0
comment 0
visits 15268
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4月9号juqery在线相册作业
小蚂蚁的博客
Original
689 people have browsed it

源码： 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>juqery相册在线管理器</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript"  src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
  <div>
  <div>
    <h2>在线相册管理</h2>
       <p>
       <label for="img_url">请插入图片</label>
      <input type="text" name="img_url" id="img_url" placeholder="images/deno.jpg">
       </p>
       <p>请选择图片类型:
       <input type="radio" name="border" id="rect" value="0" checked=""><label>矩形</label>
       <input type="radio" name="border" id="radius" value="10%" ><label>圆角</label>
       <input type="radio" name="border" id="circle" value="50%" ><label>圆形</label>
           </p>
           <p>
           <select name="shadow">
           <option value="0">不添加</option>
           <option value="1">添加</option>
           </select>
           </p>
           <p><button>添加图片</button></p>
    </div>
  <div><ul></ul>
  </div>
  </div>
</body>
</html>
 $(document).ready(function(){
        //先给按钮添加点击事件
        $('button.add').on('click',function(){

            //获取图片的相关信息
            //获取图片地址
            var img_url = $('#img_url').val()
            console.log(img_url)
            
            //如果用户没有选择图片,提示用户并返回
            if (img_url.length==0) {
                alert('请选择一张图片')
                $('#img_url').focus()
                return false
            }


            console.log(img_url.length)
            //获取图片类型
            var img_type = $(':radio:checked').val()
            // console.log(img_type)
            //是否添加阴影    
            // console.log($(':selected').val())
            var shadow = 'none'
            if ($(':selected').val() == 1) {
                shadow = '3px 3px 3px #666'
            }
            
            //创建图片元素,并把相关设置添加上
            var img = $('<img>')
                    .prop('src',img_url)
                    .width(150)
                    .height(150)
                    .css({            
                        'border-radius': img_type,
                        'box-shadow': shadow
                    })

            //给相册添加图片移动与删除功能
            var before = $('<button>').text('前移')
            var after = $('<button></button').text('后移')
            var remove = $('<button></button').text('删除')

        //钮添加到当前图片后面
            var li = $('<li>').append(img,before,after,remove)

            // 将图片添加到页面中        
            li.appendTo('ul')

            //前移: 将前一个图片做为插入点,在此之前插入当前图片
            before.click(function() {
            $(this).parent().prev().before($(this).parent())
            });

            //后移: 将下一个图片做为插入点,在此之后插入当前图片
            after.click(function() {
            $(this).parent().next().after($(this).parent())
            });

                //删除
                remove.click(function() {
                $(this).parent().remove()
                });
            })
        })
 .wrap{ 
            width: 360px;
         height: auto;
         background-color: lightyellow;
         border: 1px solid #cecece;
         color: #363636;
     }

     .wrap .header{
         padding: 15px;
     }
     .wrap .header h2{
         text-align: center;
     }
     .add{
         width: 100px;
         height: 30px;
         border: none;
         cursor:pointer;
         background-color:skyblue;
         color: white;
     }

     .add:hover{
         /*background-color: orange;*/
         font-size:1.2em;
     }
     .main{

         background-color:lightyellow;
         overflow: hidden;
     }
     .main ul{
         margin: 0;
         padding: 0;
     }
     .main ul li{
         list-style:none;
         float: left;
         margin-left: 20px;
         margin-bottom: 10px;
         width: 150px;
         height: 200px;
         text-align:center;

实例

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>juqery相册在线管理器</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript"  src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
  <div class="wrap">
  <div class="header">
    <h2>在线相册管理</h2>
       <p>
       <label for="img_url">请插入图片</label>
      <input type="text" name="img_url" id="img_url" placeholder="images/deno.jpg">
       </p>
       <p>请选择图片类型:
       <input type="radio" name="border" id="rect" value="0" checked=""><label>矩形</label>
       <input type="radio" name="border" id="radius" value="10%" ><label>圆角</label>
       <input type="radio" name="border" id="circle" value="50%" ><label>圆形</label>
           </p>
           <p>
           <select name="shadow">
           <option value="0">不添加</option>
           <option value="1">添加</option>
           </select>
           </p>
           <p><button class="add">添加图片</button></p>
    </div>
  <div class="main"><ul></ul>
  </div>
  </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


实例

 .wrap{ 
            width: 360px;
     	height: auto;
     	background-color: lightyellow;
     	border: 1px solid #cecece;
     	color: #363636;
     }

     .wrap .header{
     	padding: 15px;
     }
     .wrap .header h2{
     	text-align: center;
     }
     .add{
     	width: 100px;
     	height: 30px;
     	border: none;
     	cursor:pointer;
     	background-color:skyblue;
     	color: white;
     }

     .add:hover{
     	/*background-color: orange;*/
     	font-size:1.2em;
     }
     .main{

     	background-color:lightyellow;
     	overflow: hidden;
     }
     .main ul{
     	margin: 0;
     	padding: 0;
     }
     .main ul li{
     	list-style:none;
     	float: left;
     	margin-left: 20px;
     	margin-bottom: 10px;
     	width: 150px;
     	height: 200px;
     	text-align:center;

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

 $(document).ready(function(){
    	//先给按钮添加点击事件
    	$('button.add').on('click',function(){

    		//获取图片的相关信息
    		//获取图片地址
    		var img_url = $('#img_url').val()
    		console.log(img_url)
    		
    		//如果用户没有选择图片,提示用户并返回
    		if (img_url.length==0) {
    			alert('请选择一张图片')
    			$('#img_url').focus()
    			return false
    		}


    		console.log(img_url.length)
    		//获取图片类型
    		var img_type = $(':radio:checked').val()
    		// console.log(img_type)
    		//是否添加阴影	
    		// console.log($(':selected').val())
    		var shadow = 'none'
    		if ($(':selected').val() == 1) {
    			shadow = '3px 3px 3px #666'
    		}
    		
    		//创建图片元素,并把相关设置添加上
    		var img = $('<img>')
    				.prop('src',img_url)
    				.width(150)
    				.height(150)
    				.css({			
    					'border-radius': img_type,
    					'box-shadow': shadow
    				})

    		//给相册添加图片移动与删除功能
    		var before = $('<button>').text('前移')
    		var after = $('<button></button').text('后移')
    		var remove = $('<button></button').text('删除')

    	//钮添加到当前图片后面
    		var li = $('<li>').append(img,before,after,remove)

    		// 将图片添加到页面中		
    		li.appendTo('ul')

    		//前移: 将前一个图片做为插入点,在此之前插入当前图片
    		before.click(function() {
    		$(this).parent().prev().before($(this).parent())
    		});

    		//后移: 将下一个图片做为插入点,在此之后插入当前图片
    		after.click(function() {
    		$(this).parent().next().after($(this).parent())
    		});

    			//删除
    			remove.click(function() {
    			$(this).parent().remove()
    			});
    		})
    	})

运行实例 »

点击 "运行实例" 按钮查看在线实例



Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！