search

Home >Web Front-end >JS Tutorial >jquery image scrolling enlargement code sharing (2)_jquery

jquery image scrolling enlargement code sharing (2)_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:571228browse

The example in this article describes the scrolling and magnifying effect of jquery images. Share it with everyone for your reference. The details are as follows:
This is a code based on jquery that implements image scrolling and magnification effects. It is like a magnifying glass and is suitable for product display to facilitate users to browse product details. It is a very practical special effects code.
Running renderings: ----------------------------------------------------------------------------------------------------------------

Tips: If the browser does not work properly, you can try switching the browsing mode.

The jquery image scrolling and zooming effect code shared with you is as follows 



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动条放大效果 -</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
 <div id="content">
 <h1>jquery图片滚动条放大效果</h1>
 <div class="scroller demo1">
 <div class="inside">
 <a href="#"><img src="images/img1.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img2.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img3.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img4.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img5.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img6.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img7.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img8.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img9.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img10.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img11.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img12.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img13.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img14.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img15.jpg" alt="jquery image scrolling enlargement code sharing (2)_jquery" /></a>
 </div>
 </div>
 </div>
<link href="css/demo1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/scroller.js"></script>
<script type="text/javascript">
$(function(){
 $(".demo1").scroller();
});
</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>
</body>
</html>
The above is the jquery image scrolling magnification effect code shared with you, I hope you can like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS implements imitating Apple bottom taskbar menu effect code_javascript skillsNext article：JS implements imitating Apple bottom taskbar menu effect code_javascript skills

Related articles

See more