드롭다운 상자 이미지 선택 함수 example_jquery의 jQuery 구현
- WBOY원래의
- 2016-05-16 15:46:181910검색
이 기사의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.