드롭다운 상자 이미지 선택 함수 example_jquery의 jQuery 구현-JS 튜토리얼-php.cn

드롭다운 상자 이미지 선택 함수 example_jquery의 jQuery 구현

WBOY

풀어 주다： 2016-05-16 15:46:18

원래의

1873명이 탐색했습니다.

이 기사의 예에서는 jQuery가 드롭다운 상자에서 이미지를 선택하는 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

드롭다운 상자에 사진이 표시되고 해당 사진을 선택하면 선택 드롭다운 상자에 텍스트가 표시될 뿐만 아니라 사진 내용도 표시됩니다. 더욱 생생하게 보이기 위해 여기에 jQuery 애니메이션 효과도 추가됩니다. 선택 목록이 확장되면 그림이 점차적으로 표시됩니다. jQ 플러그인이 사용됩니다: imageselect.js. 효과를 사용하는 친구는 직접 다운로드할 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<head>
<title>支持图片选择的jQuery列表框插件imageselect.js</title>
<script type="text/javascript" src="jquery-1.6.2.min.js" ></script> 
<script type="text/javascript" src="http://xiazai.jb51.net/201508/yuanma/imageselect.js"></script> 
<style>
.jqis{position: relative;}
.jqis_header{background-image: url('http://files.jb51.net/file_images/article/201508/201588110650877.png');background-position: right center;background-repeat: no-repeat;cursor: pointer;}
.jqis_header img{cursor: pointer;}
.jqis_dropdown{padding: 5px;position: absolute;overflow-x: hidden;overflow-y: scroll;}
.jqis_dropdown img{margin-right: 3px;cursor: pointer;float: left;}
</style> 
</head> 
<body> 
<p>请在下拉列表中选择：</p>
<select name="logo">
<option value="1">http://files.jb51.net/file_images/article/201508/201588111102886.jpg</option>
<option value="2">http://files.jb51.net/file_images/article/201508/201588111047711.jpg</option>
<option value="3">http://files.jb51.net/file_images/article/201508/201588110953715.jpg</option>
<option value="4">http://files.jb51.net/file_images/article/201508/201588111003336.jpg</option>
</select>
<script type="text/javascript">
  $(document).ready(function(){
    $('select[name=logo]').ImageSelect({dropdownWidth:425});
  });
</script>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.