jquery image scrolling enlargement code sharing (2)

jquery image scrolling enlargement code sharing (2)_jquery

WBOY

Release： 2016-05-16 15:41:57

Original

1231 people have browsed it

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>

Copy after login

The above is the jquery image scrolling magnification effect code shared with you, I hope you can like it.